Accessibility issue using multiple drop-down links on menu

[bobbulman]

The built-in accessibility checker is reporting an issue with duplicate IDs when a menu has more than one drop-down column:

[markconroy]

@msayoung I think we'll need to do a bit of work on this.

If you have more than one sub menu at the same level, then we have duplicate ids.

For example:

Top Level 1 ................ Top Level 2 ................ Top Level 3
-- Submenu 1               -- Submenu 2              -- Submenu 3

The button to toggle each of those sub menu items will have the same id, since it takes its id from the random(1000) that is the id of the main ul for the menu.

Similarly

Top Level
-- Submenu 1
------ Subsubmenu 1
-- Submenu 2
------ Subsubmenu 2
-- Submenu 3
------ Subsubmenu 3

The Submenu 1/2/3 will all have the same ids.

However, worse than that, we don't have any aria-controls set on the button for each toggle (which was the reason we were using the random ids in the first place), so there will be an announcement that the button is "aria-expanded" but won't say what it was expanding.

We have a really nice "disclosure library" written in Annertech that perhaps we can use for this. You can see it doing lots of things here: https://annertech.pages.anner.ie/libraries/disclosure/

Using that library would go a long way towards fixing this, but could also be used for our accordions and anything else that opens/closes.

[msayoung]

Ooooh... lovely :)

Thanks @bobbulman for spotting and reporting.

Would the reported issue be solved by making sure we are getting unique ids for each submenu? I'll fire up my local and have a test.

The disclosure library looks great from quick glance.
What are the potential ramifications of changing libraries at this stage, and would we be looking to do so in localgov proper too?

[markconroy]

Would the reported issue be solved by making sure we are getting unique ids for each submenu? I'll fire up my local and have a test.

Yes, I believe so. But I've been having issues trying to get a way to give them a unique id AND have the parent trigger/button to have the same id as a data attribute or something. Let's have a call about this as soon as we can and see can we figure it out. It's a pretty simple issue once we can do that I hope.