- 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
- Menu Button and Menu options should have a visible keyboard
- 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.
- Menu Button should use role button and use a button element to activate the menu (e.g.
- Menu Button has aria-haspopup set to
- Menu has role menu.
- When menu is visible, button has aria-expanded set to
true. When menu is hidden, it is set to
- (Optional) Menu Button has aria-controls attribute that refers to the Menu
- Menu visibility should be toggled using the
- Menu items should use the appropriate roles, states, and properties depending their functionality. More on that here.