v3-info icon indicating copy to clipboard operation
v3-info copied to clipboard

[A11Y] - Make NetworkDropdown keyboard accessible

Open josephcoombes opened this issue 2 years ago • 0 comments

Bug Description Currently cannot use keyboard navigation to access the NetworkDropdown menu. This also means this element probably isn't accessible with screen-readers.

Once the dropdown toggle is navigable by keyboard, the menu itself would also need to be keyboard accessible. Potentially the focus could/should be trapped in the dropdown once the user has keyboard navigated into it. Should be able to close the menu with esc key press.

Steps to Reproduce

  1. Press tab to navigate through top level navigation
  2. Notice that NetworkDrowdown is skipped

Expected Behavior All links, buttons, interactive elements should be accessible through keyboard navigation, including this menu toggle, and the child items within it.

It should also have a very clear focus state. (Will file another issue for focus states)

There are some different approaches to handling keyboard interaction for dropdown/fly-out menus here:

https://www.w3.org/WAI/tutorials/menus/flyout/#flyoutnavkbbtn

image

josephcoombes avatar Apr 08 '22 16:04 josephcoombes