Menu or Menu bar

The following description of keyboard behaviors assumes:

1. A horizontal menubar containing several menuitem, menuitemradio, or menuitemcheckbox elements.
2. Some menuitem elements in the menubar have child submenus that contain vertically arranged items.
3. Some of the menuitem elements in the submenus have child submenus with items that are also vertically arranged.

When reading the following descriptions, also keep in mind that:

1. Focusable elements, which may have role menuitem, menuitemradio, or menuitemcheckbox, are referred to as items.
2. If a behavior applies to only certain types of items, e.g., menuitem elements, the specific role name is used.
3. Submenus, also known as popup menus, are elements with role menu.
4. Except where noted, menus opened from a menubutton behave the same as menus opened from a menubar.

When a menu opens, or when a menubar receives focus, keyboard focus is placed on the first item. Because menubar and menu elements are composite widgets as described in Keyboard Navigation Inside Components, Tab and Shift + Tab do not move focus among the items in the menu. Instead, the keyboard commands described in this section enable users to move focus among the elements in a menubar or menu.

• Tab and Shift + Tab:
  • Move focus into a menubar:
    • If focus is moving into the menubar for the first time, focus is set on the first menuitem.
    • If the menubar has previously contained focus, focus is optionally set on the menuitem that last had focus. Otherwise, it is set on the first menuitem that is not disabled.
  • When focus is on a menuitem in a menu or menubar, move focus out of the menu or menubar, and close all menus and submenus.
  • Note that Tab and Shift + Tab do not move focus into a menu. Unlike a menubar, a menu is not visually persistent, and authors are responsible for ensuring focus moves to an item inside of a menu when the menu opens.
• Enter:
  • When focus is on a menuitem that has a submenu, opens the submenu and places focus on its first item.
  • Otherwise, activates the item and closes the menu.
• Space:
  • (Optional): When focus is on a menuitemcheckbox, changes the state without closing the menu.
  • (Optional): When focus is on a menuitemradio that is not checked, without closing the menu, checks the focused menuitemradio and unchecks any other checked menuitemradio element in the same group.
  • (Optional): When focus is on a menuitem that has a submenu, opens the submenu and places focus on its first item.
  • (Optional): When focus is on a menuitem that does not have a submenu, activates the menuitem and closes the menu.
• Down Arrow:
  • When focus is on a menuitem in a menubar, and that menuitem has a submenu, opens the submenu and places focus on the first item in the submenu.
  • When focus is in a menu, moves focus to the next item, optionally wrapping from the last to the first.
• Up Arrow:
  • When focus is in a menu, moves focus to the previous item, optionally wrapping from the first to the last.
  • (Optional): When focus is on a menuitem in a menubar, and that menuitem has a submenu, opens the submenu and places focus on the last item in the submenu.
• Right Arrow:
  • When focus is in a menubar, moves focus to the next item, optionally wrapping from the last to the first.
  • When focus is in a menu and on a menuitem that has a submenu, opens the submenu and places focus on its first item.
  • When focus is in a menu and on an item that does not have a submenu, performs the following 3 actions:
    1. Closes the submenu and any parent menus.
    2. Moves focus to the next item in the menubar.
    3. If focus is now on a menuitem with a submenu, either: (Recommended) opens the submenu of that menuitem without moving focus into the submenu, or opens the submenu of that menuitem and places focus on the first item in the submenu.
    Note that if the menubar were not present, e.g., the menus were opened from a menubutton, Right Arrow would not do anything when focus is on an item that does not have a submenu.
• Left Arrow:
  • When focus is in a menubar, moves focus to the previous item, optionally wrapping from the first to the last.
  • When focus is in a submenu of an item in a menu, closes the submenu and returns focus to the parent menuitem.
  • When focus is in a submenu of an item in a menubar, performs the following 3 actions:
    1. Closes the submenu.
    2. Moves focus to the previous item in the menubar.
    3. If focus is now on a menuitem with a submenu, either: (Recommended) opens the submenu of that menuitem without moving focus into the submenu, or opens the submenu of that menuitem and places focus on the first item in the submenu.
• Home: If arrow key wrapping is not supported, moves focus to the first item in the current menu or menubar.
• End: If arrow key wrapping is not supported, moves focus to the last item in the current menu or menubar.
• Any key that corresponds to a printable character (Optional): Move focus to the next item in the current menu whose label begins with that printable character.
• Escape: Close the menu that contains focus and return focus to the element or context, e.g., menu button or parent menuitem, from which the menu was opened.

• A menu is a container of items that represent choices. The element serving as the menu has a role of either menu or menubar.
• The items contained in a menu are child elements of the containing menu or menubar and have any of the following roles:
  • menuitem
  • menuitemcheckbox
  • menuitemradio
• If activating a menuitem opens a submenu, the menuitem is known as a parent menuitem. A submenu's menu element is:
  • Contained inside the same menu element as its parent menuitem.
  • Is the sibling element immediately following its parent menuitem.
• A parent menuitem has aria-haspopup set to either menu or true.
• A parent menuitem has aria-expanded set to false when its child menu is not visible and set to true when the child menu is visible.
• One of the following approaches is used to enable scripts to move focus among items in a menu as described in Keyboard Navigation Inside Components:
  • The menu container has tabindex set to -1 or 0 and aria-activedescendant set to the ID of the focused item.
  • Each item in the menu has tabindex set to -1, except in a menubar, where the first item has tabindex set to 0.
• When a menuitemcheckbox or menuitemradio is checked, aria-checked is set to true.
• When a menu item is disabled, aria-disabled is set to true.
• Items in a menu may be divided into groups by placing an element with a role of separator between groups. For example, this technique should be used when a menu contains a set of menuitemradio items.
• All separators should have aria-orientation consistent with the separator's orientation.
• If a menubar has a visible label, the element with role menubar has aria-labelledby set to a value that refers to the labelling element. Otherwise, the menubar element has a label provided by aria-label.
• If a menubar is vertically oriented, it has aria-orientation set to vertical. The default value of aria-orientation for a menubar is horizontal.
• An element with role menu either has:
  • aria-labelledby set to a value that refers to the menuitem or button that controls its display.
  • A label provided by aria-label.
• If a menu is horizontally oriented, it has aria-orientation set to horizontal. The default value of aria-orientation for a menu is vertical.