Actions Menu Button Example

This example implements the menu button design pattern for a button that provides access to a menu of actions. When an element with role button has aria-haspopup="true", browsers inform assistive technologies that the button is a menu button. This role transformation caused by aria-haspopup happens with any element that is recognized as a button, including the HTML button and input[type="button"] elements.

Similar examples include:

Example

This example shows a popup menu of actions that can be used for changing states in a web application.

Keyboard Support

Menu Button

Key Function
Down Arrow,
Space,
or Enter		 Open menu and move focus to first menuitem
Up Arrow Key Open menu and move focus to previous menuitem

Popup Menu Widget

Key Function
Space or Enter
  • Activates any click event associated with the menuitem. In this example updates the "Last Action" textbox.
  • Moves focus back to menu button and then closes the menu. NOTE: This sequence is important since hidding the element with focus will cause the focus to move to the beginning of the page.
Escape
  • Closes popup menu.
  • Moves focus to button menu.
Up Arrow
  • Moves focus to previous popup menu item.
  • If first popup menu item, focus is moved to the last popup menu item.
Down Arrow
  • Moves focus to next popup menu item.
  • If last popup menu item, focus is moved to the first popup menu item.
Home
  • Moves focus to first popup menu item.
End
  • Moves focus to last popup menu item.
A-Z, a-z
  • Moves focus to the next popup item that starts with that letter.
  • If no popup menu item starts with the letter, focus does not move.

Role, Property, State, and Tabindex Attributes

Menu Button Widget

Role Attribute Element Usage
button button
  • Default role of a button element is "button", so no need to set the role attribute.
  • The accessible name comes from the child text content of the button element (e.g. "Actions").
  • The button element is a part of the default tab order of the page (e.g. tabindex=0), so no need to set tabindex.
aria-haspopup="true" button
  • The aria-haspopup attribute defines an element with role=button as a ARIA menu button design pattern and indicates the actions of the button are to open and close the popup menu.
aria-controls="IDREF" button
  • The aria-controls attribute serves as a pointer to the the popup menu that is controlled by the menu button.
aria-expanded="true" button
  • Indicates popup menu is open.
aria-expanded="false" button
  • Indicates popup menu is closed.

Popup Menu

Role Attribute Element Usage
menu ul
  • The role="menu" attribute identifies the ul element as an ARIA menu widget.
  • Accessible name for the menu widget comes from aria-labelledby attribute.
  • The menu widget does not need a tabindex value, since the ul[role"menu"] element never receives keyboard focus.
aria-labelledby="[IDREF]" ul
  • Pointer to element with the corresponding id="[IDREF]" that defines the accessible name for the menu, in this example "Actions".
menuitem li
  • The role="menuitem" attribute identifies the li element as an ARIA menuitem widget.
  • Accessible name for the menuitem widget comes from child text content of the li element.
  • The menuitem widget has tabindex="-1".
tabindex="-1" li
  • Identifies each li[role=menuitem] as an interactive element on the page (e.g. can recived keyboard focus), but is not part of the tab order of the page.

Javascript and CSS Source Code

HTML Source Code