Menu & Menu Button
Menus are commonly referred to as "Dropdowns" and present a list of options to a user when activated.
Keyboard Expectations
- Enter or Space = Open Menu
- Escape = Close Active Menu
- ↓ = Open Menu (when button focused)
- ↑↓ = Cycles menu option focus
- Home (Optional) = Focus first Menu item
- End (Optional) = Focus last Menu item
Focus Expectations
- Menu Button and Menu options should have a visible keyboard
:focusstate - When escape key Escape is pressed and the menu is active/open, focus should be returned to the Menu Button associated with that menu.
- (Optional) When focused on the last menu item, the down arrow key ↓ should move focus to the first menu item.
- (Optional) When focused on the first menu item, the up arrow key ↑ should move focus to the last menu item.
Labelling Expectations
- Menu Button should use role button and use a button element to activate the menu (e.g.
<button>). - Menu Button has aria-haspopup set to
true. - Menu has role menu.
- When menu is visible, button has aria-expanded set to
true. When menu is hidden, it is set tofalse. - (Optional) Menu Button has aria-controls attribute that refers to the Menu
- Menu visibility should be toggled using the
hiddenattribute. - Menu items should use the appropriate roles, states, and properties depending their functionality. More on that here.