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:

Navigation Menu Button: The popup menu items are a elements and act as links.

Example

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

Last Action:

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`

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

CSS: MenubuttonAction.css
Javascript: Menubutton.js
Javascript: MenuItemAction.js
Javascript: PopupMenuAction.js

HTML Source Code

<div id="ex1">
  <p>
    This example shows a popup menu of actions that can be used for changing states in a web application.
  </p>
  <div class="menu_button">
    <button id="menubutton1"
          aria-haspopup="true"
          aria-expanded="false"
          aria-controls="menu1">
      
              Actions
            
    </button>
    <ul id="menu1"
      role="menu"
      aria-labelledby="menubutton1">
      <li role="menuitem" onclick="updateLastAction(event)">
        Action 1
      </li>
      <li role="menuitem" onclick="updateLastAction(event)">
        Action 2
      </li>
      <li role="menuitem" onclick="updateLastAction(event)">
        Action 3
      </li>
      <li role="menuitem" onclick="updateLastAction(event)">
        Action 4
      </li>
    </ul>
  </div>
  <p>
    <label>
      Last Action: 
      <input id="action_output"
           type="text"
           value="">
    </label>
  </p>
  <script type="text/javascript">
    

          document.getElementById("action_output").value = "none";

          function updateLastAction(event) {
            document.getElementById("action_output").value = event.currentTarget.innerHTML;
          }

          window.onload=function() {
            var menubutton = new Menubutton(document.getElementById('menubutton1'));
            menubutton.init();
          }

          
  </script>
</div>