You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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.
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.
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
The text was updated successfully, but these errors were encountered: