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.