Vivid API

Menu

The Menu is an interactive element that appears in response to user actions. It typically presents a list of Menu Items (actions) relevant to the current context.

This component was tested and signed off by Applause (external accessibility specialists).

Implementation

  • The Menu requires an accessible name. It is the consumer’s concern to provide an aria-label to the Menu.
  • If you are using Menu with the anchor prop, it is important to place the Menu directly after the anchor element in the source code so that the correct tab order is maintained.
  • The Menu will set appropriate values for the aria-haspopup and aria-expanded attribute on the anchor element.

Keyboard Interaction

When anchor has focus:

  • Enter - Opens the menu.
  • Space - Opens the menu.

When the menu has focus:

  • ArrowDown - Moves focus to the next menu item.
  • ArrowUp - Moves focus to the previous menu item.
  • Home - Moves focus to the first menu item.
  • End - Moves focus to the last menu item.
  • Escape - Closes the menu.

Resources