Buttons that spawn items with role="menu" must indicate this fact with aria-haspopup="menu", and an aria-controls attribute referencing the id value for the element with role="menu". On expansion, focus should move to the first menu item, and focus should be tracked with either a roving tabindex attribute (so one menu item is always focusable) or tracked with an aria-activedescendant attribute on the element with role="menu". aria-expanded can be used to indicate the state of the button and its attached menu (e.g. expanded or collapsed).
This paradigm may apply to over OPAC menus, such as the Lists Menu on the homepage.
Steps to Reproduce:
1. Navigate to the element with id="langmenu"
2. Verify this item does not have an aria-haspopup attribute
3. Activate the element, verify a menu appears
4. Verify this content contains an element with role="menu"
5. Verify focus has not moved to the first menuitem beneath the menu
6. Use the arrow keys to adjust content within the menu
7. Verify tabindex attributes are not adjusted and aria-activedescendant is not set on the element with role="menu"
Screen readers and other assistive technologies may be unable to interact with content as intended if ARIA controls are not coded to spec.
The above listed attributes are added to the button item and element with role="menu". An example of a fully implemented button spawning an element with role="menu" (in this case using aria-activedescendant) can be found at: https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-actions-active-descendant.html
Brian I wonder if you could take a look at the demos of Bootstrap 4? The next upgrade of the Bootstrap framework in the OPAC will jump us to version 4.x I think. https://getbootstrap.com/docs/4.3/examples/ Bootstrap is the library that creates the dropdown menus.
I'm also curious if the same problem is found in the staff client, which is on Bootstrap 3.3.7. Thanks for investigating!
Checking an example from the Staff Client (the Logged In User dropdown), I am seeing the same issue outlined in the ticket.
Bootstrap in 4.x appears to have removed adding any role information to their dropdowns. They include some basic ARIA requirements, such as aria-expanded. However, it appears they've added an invalid 'aria-haspopup' (https://www.w3.org/TR/wai-aria-1.1/#aria-haspopup).
If the plan was to upgrade to 4.x for both the OAPC & Staff clients, this would effectively fix this issue. Though, I might suggest a few additional tweaks to improve the accessibility from what bootstrap already has. Off the top of my head the two things would be:
1. removing the aria-haspopup
2. adding a role of group to div class="dropdown-menu" (they seem to have removed the use of lists by default)