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: Mobile nav dropdown should close on ESC or TAB #980

Open
bacitracin opened this issue Oct 27, 2024 · 1 comment
Open

A11y: Mobile nav dropdown should close on ESC or TAB #980

bacitracin opened this issue Oct 27, 2024 · 1 comment
Labels

Comments

@bacitracin
Copy link
Collaborator

bacitracin commented Oct 27, 2024

Describe the task

When the screen is narrower and the mobile nav hamburger button pops up, it is not reachable or operable via keyboard navigation. Since it's not reachable by keyboard, screenreaders are affected as well.

This ticket is the THIRD part of making the mobile nav more accessible.

  1. While the dropdown is open pressing ESC or TAB will close the dropdown and focus will go back to the hamburger button. Page does not change.

Resources

Total expected behavior of the menu:
(First ticket):
You should be able to TAB to the hamburger menu, press ENTER or SPACE and the dropdown opens.

(Second ticket)
Then you can use the UP or DOWN arrow keys to navigate the items (with focus state visible). Press ENTER or SPACE to choose one of the items.

(THIS ticket)
While the dropdown is open pressing ESC or TAB will close the dropdown and focus will go back to the hamburger button. The option is NOT selected.

See this example for most of the desired behavior (except for the behavior while the dropdown is open and pressing TAB.) https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/#mythical-page-content

Copy link

This issue has been marked as stale because it has been open for 30 days with no activity.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
Status: No status
Development

No branches or pull requests

1 participant