Skip to content

Resolve #3192235 "Accessibility upgrades"

knaffles requested to merge issue/tb_megamenu-3192235:3192235-accessibility-upgrades into 8.x-1.x-dev

This upgrades the keyboard accessibility, borrowing a lot of code from recent changes made to the 7.x branch. Specifically, it adds the following:

  • Tab - When focus is at the top level, navigate across top level links; when focus is on a submenu, cycle through all submenu links
  • Left/right - When focus is at the top level, navigate across top level links; when focus is on a submenu, navigate across columns within the submenu
  • Return - visit the link that has focus
  • Esc - close the mega menu
  • Up/down - cycle through all the links within a submenu
  • Home - When focus is at the top level, navigate to the first top level link; when focus is on a submenu, navigate to the first link in the submenu.
  • End - When focus is at the top level, navigate to the last top level link; when focus is on a submenu, navigate to the last link in the submenu.

It also makes a couple of minor updates to the markup:

  • Add an accessible aria label ("Main Navigation") for the navigation landmark (the surrounding div with role="navigation").
  • Remove ARIA role="listitem" for menu list items.
  • Remove the use of aria-haspopup.

Finally, it fixes a couple of issues:

  • Disable keyboard event listener on mobile (because currently all menu items are expanded by default on mobile).
  • Fix behavior of up arrow so that links currently not visible are skipped.

Testing

It's probably not realistic to review the code changes line by line because they are pretty extensive. But having one or two people perform some basic keyboard tests as outlined above would be great.

Merge request reports