Menu widget
As defined in the W3C Working Draft, Roles for Accessible Rich Internet Applications (WAI-ARIA Roles), a menu is a control offering a list of choices to the user. A menu is often a list of links to important sections of a Document or a Site. Menus contain menu items, and they are typically collected on a menubar.
Keyboard Interaction
- First item in menu bar should be in the tab order (tabindex=0).
- If a menu bar item has focus, then:
- Pressing Enter, Spacebar, or the up or down arrow keys opens the menu and places focus on the first menu item in the opened menu or child menu bar.
- If no menu is open, pressing left or right arrow keys moves focus to the adjacent menu bar items.
- When a menu is open and focus is on a menu item in that open menu, then
- Pressing Enter or Spacebar invokes that menu action (which may be to open a submenu).
- Pressing up or down arrow keys cycles focus through the items in that menu.
- If the menu item with focus has a submenu, pressing Enter, Spacebar, or the right arrow key opens the submenu and puts focus on the first submenu item.
- Pressing Escape closes the open menu or submenu and returns focus to the parent menu item.
- When a submenu is open and focus is on a menu item in that submenu:
- The up or down arrow keys cycle through the submenu items (behaves the same as open menu).
- Pressing Escape or the left arrow key closes the submenu and returns focus to the parent menu item.
- Disabled menu items receive focus but have no action when enter or left/right arrow is pressed.
- Tabbing out of the menu component closes any open menus.
- With focus on a menu item and a sub menu opened via mouse behavior, pressing down arrow moves focus to the first item in the sub menu.
- With focus on a menu item and a sub menu opened via mouse behavior, pressing up arrow moves focus to the last item in the sub menu.
- With focus on a submenu item, the user must use arrows or the Escape key to progressively close submenus and move up to the parent item(s).
Mouse Interaction
- Primary mouse click on a closed menu opens the menu; a second mouse click on the menu item closes the menu.
- Primary mouse click on a menu item invokes that menu action (which may be to open a submenu).
- A primary mouse click away from an open menu closes the menu.
ARIA Roles and Properties
Has the role menu, with required child elements of menu items.