ARIA Menu Button Example: `a` element with `role="button"`

Menu Button Example

This example provides a pop-up menu of links for web navigation.

The a element with[role="button"][aria-haspopup="true"] identifies the element as a menu button, "WAI-ARIA Quick Links".
aelement has tabindex="0" to include it as part of the tab order of the page.
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 idenfities the content that will be opened when the button is activated.
The a[role="button"][aria-haspopup="true"] element has a keydown event to handle opening and closing the menu and moving focus to the menu.
The role="menu" attribute on the div element identifies the element as a contatiner for a list of menu items.
The aria-labelledby attribute of the div[role="menu"] elements defines an accessible name for the menu.
The role="menuitem" on the a elements identifies the element as a item in the menu .
Each of the a[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 a[role="menuitem"] elements 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 `div` element as a menu widget
`menuitem`		Identifies the `a` 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 the menu widget