ARIA Menu Button Example: Button Element

Menu Button using a `button` element

This example provides a menu of actions for changing the state in a web application.

Last Action:

The aria-haspopup="true" attribute on the button element identifies that activating the button will result in either a menu or dialog box opening.
The aria-controls attribute on the button element identifies the content that will be opened when the button is activated.
The role="menu" attribute on the ul element identifies the element as a container for a list of menu items.
The aria-labelledby attribute of the ul[role=menu] elements defines an accessible name for the menu.
The role="menuitem" on the li elements identifies the element as an item in the menu .
The child text content of the li[role=menuitem] elements defines the accessible name for each of the menu items.
The button[aria-haspopup=true] element has a keydown event to handle opening and closing the menu and moving focus to the menu.
The button[aria-haspopup=true] element has a click event to open the menu and move focus to the first menu item to support assitive technology that emulates click event for button elements.
Each of the li[role=menuitem] elements has a keydown event to handle navigation between menu items, closing the menu and activating the function of the menu item.
Each of the li[role=menuitem] element has a focus event to handle highlighting the menu item with keyboard focus.

Key	Function
Space or Enter Key	Open menu and move focus to first menu item
Up Arrow Key	Open menu and moves focus to last menu item
Down Arrow Key	Open menu and moves focus to first menu item

Key	Function
Space or Enter Keys	Applies the styling associated with the menu item with focus Closes menu and moves focus back to menu button
Up or Left Arrow Key	Move focus to previous menu item
Down or Right Arrow Key	Move focus to next menu item
Escape Key	Close menu and move focus back to menu button

Role	Property/State	Usage
`menu`		Identifies the `ul` element as a menu widget
`menuitem`		Identifies the `li` element as a menu item widget
	`aria-haspopup`	Identifies the `button` element as a menu button widget when the value is `true`
	`aria-controls`	Identfies the content on the page (e.g. using IDREFs) that this menu button controls
	`aria-labelledby`	Use to provide a label with the menu widget