Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[A11Y] - Make NetworkDropdown keyboard accessible #215

Open
josephcoombes opened this issue Apr 8, 2022 · 0 comments
Open

[A11Y] - Make NetworkDropdown keyboard accessible #215

josephcoombes opened this issue Apr 8, 2022 · 0 comments

Comments

@josephcoombes
Copy link

josephcoombes commented Apr 8, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant