v3-info
v3-info copied to clipboard
[A11Y] - Make NetworkDropdown keyboard accessible
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
- Press tab to navigate through top level navigation
- 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
