What's wrong with this?
- The menu doesn't have a navigation
- There is no semantic coherence between the menu items.
- The submenu toggle is an
<a>, but should be a
- Voice Over reads the toggle button's icon aloud.
- The next focus after opening the submenu is not inside it.
- The submenu gets focus even when it's closed.
<nav> to wrap the menu to give it a navigation role.
- Label the navigation with
- Put menu items in a list
<ul> to give them semantic coherence.
- Use a
<button> for the submenu toggle to indicate interactivity.
aria-hidden="true" on the submenu's icon.
aria-expanded on the toggle button to indicate its state. Make sure to change it when toggling.
- Nest the submenu to ensure correct tab order.
- Remove a closed submenu from tab order with
display: none or
visibility: hidden or