Describe the bug
Slack discussion
The main menu implements a creative solution for keyboard accessibility. It is not very discoverable though and inaccessible for screen reader users.
To Reproduce
Steps to reproduce the behavior:
- Go to fronteers.nl on desktop
- Tab to the main menu
- Using left and right arrow keys you can jump between main menu items
- Using up and down arrow keys you can go into the sub-menus
Expected behavior
Good examples for accessible keyboard nav with drop downs:
https://a11y-collective.github.io/demos/en/advanced-accessible-components/components/navigation/navigation.html
https://www.eur.nl/
- everything accessible by tab
- the "open dropdown" action is triggered by activating a button
- you can tab through the open submenu
- tabbing out of the submenu closes it (tab & shift-tab)
- esc also closes the open submenu
- the submenu trigger has an
aria-label of "Submenu of [xyz]" and an aria-expanded attribute
Describe the bug
Slack discussion
The main menu implements a creative solution for keyboard accessibility. It is not very discoverable though and inaccessible for screen reader users.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Good examples for accessible keyboard nav with drop downs:
https://a11y-collective.github.io/demos/en/advanced-accessible-components/components/navigation/navigation.html
https://www.eur.nl/
aria-labelof "Submenu of [xyz]" and anaria-expandedattribute