Actions Menu Button Example Using aria-activedescendant

This example demonstrates how the menu button design pattern can be used to create a button that opens an actions menu. In this example, choosing an action from the menu will cause the chosen action to be displayed in the Last Action edit box.

This implementation uses aria-activedescendant to manage focus in the menu.

Similar examples include:

Example

Keyboard Support

Menu Button

Key Function
Down Arrow
Space
Enter		 Opens menu and moves focus to first menuitem
Up Arrow Opens menu and moves focus to last menuitem

Menu

Key Function
Enter
  • Activates the menu item, causing the Last Action textbox to be updated.
  • Closes the menu.
  • Sets focus on the menu button
Escape
  • Closes the menu.
  • Sets focus to the menu button.
Up Arrow
  • Moves focus to the previous menu item.
  • If focus is on the first menu item, moves focus to the last menu item.
Down Arrow
  • Moves focus to the next menu item.
  • If focus is on the last menu item, moves focus to the first menu item.
Home Moves focus to the first menu item.
End Moves focus to the last menu item.
A-Z
a-z
  • Moves focus to the next menu item with a label that starts with the typed character if such an menu item exists.
  • Otherwise, focus does not move.

Role, Property, State, and Tabindex Attributes

Menu Button

Role Attribute Element Usage
aria-haspopup="true" button
  • Indicates the button element opens a menu.
  • NOTE: While ARIA does not include a role specifically for menu buttons, most platform accessibility APIs include a menubutton role. Consequently, on such platforms, assistive technologies, such as screen readers, identify buttons that have aria-haspopup set to either true or menu as menu buttons.
aria-controls="IDREF" button
  • Refers to the menu element controlled by the menu button.
  • Optional attribute: assistive technology users can operate the menu if not present.
aria-expanded="true" button
  • Added when the menu is open.
  • Indicates that the menu is displayed and that activating the menu button closes the menu.
  • The aria-expanded attribute is removed when the menu is closed.
  • Included to support touch devices where screen reader users can touch the menu button when the menu is displayed. Keyboard users cannot focus the menu button when the menu is open.

Menu

Role Attribute Element Usage
menu ul Identifies the ul element as a menu.
aria-labelledby="IDREF" ul
  • Refers to the element that contains the accessible name for the menu.
  • The menu is labeled by the menu button.
tabindex="-1" ul
  • Allows DOM focus to be set on the menu container with the JavaScript focus method.
  • Dynamically added by the JavaScript.
  • Note that users never perceive the menu container as focused. When the menu is open, only menu items are perceived as focused.
aria-activedescendant="IDREF" ul
  • Refers to the descendant menuitem element that is visually indicated as focused.
  • The IDREF value is updated when keys that move the focus indicator among menu items are pressed.
  • Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the ul element with role menu.
  • For more information about this focus management technique, see Using aria-activedescendant to Manage Focus.
menuitem li
  • Identifies the li element as a menuitem.
  • The text content of the li element provides the accessible name of the menuitem.

Javascript and CSS Source Code

HTML Source Code