Actions Menu Button Example Using element.focus()
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.
In this implementation, each item in the menu is made focusable by setting tabindex="-1"
so the JavaScript can use element.focus()
to set focus in response to events that trigger focus movement inside the menu.
An alternative technique for managing focus movement among menu items is demonstrated in
the action menu button example that uses aria-activedescendant.
Similar examples include:
- Action Menu Button Example Using aria-activedescendant: A button that opens a menu of actions or commands where focus in the menu is managed using aria-activedescendant.
- Navigation Menu Button: A button that opens a menu of items that behave as links.
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 |
|
Escape |
|
Up Arrow |
|
Down Arrow |
|
Home | Moves focus to the first menu item. |
End | Moves focus to the last menu item. |
A-Z a-z |
|
Role, Property, State, and Tabindex Attributes
Menu Button
Role | Attribute | Element | Usage |
---|---|---|---|
aria-haspopup="true" |
button
|
|
|
aria-controls="IDREF" |
button
|
|
|
aria-expanded="true" |
button |
|
Menu
Role | Attribute | Element | Usage |
---|---|---|---|
menu
|
ul
|
Identifies the ul element as a menu . |
|
|
aria-labelledby="IDREF" |
ul
|
|
menuitem
|
li
|
|
|
tabindex="-1" |
li
|
|
Javascript and CSS Source Code
- CSS: MenubuttonAction.css
- Javascript: Menubutton.js
- Javascript: MenuItemAction.js
- Javascript: PopupMenuAction.js
HTML Source Code