Intelligence Community Design System

Popover menus use the role ‘menu’ and the items within use ‘menuitem’ and ‘menuitemcheckbox’. This enables the menu to be opened using usual keyboard commands. Clicking on a menu item closes the menu after triggering the menu item's action. A menu item's action can also be triggered using the 'Space' and 'Enter' keys. Popover menu groups use the role ‘group’.

Popover menus appear overlaid on other content. When opening a sub-menu, focus is applied to the whole sub-menu and then the items are navigated between using the up and down arrow keys. When focus is moved on, the popover menu closes automatically. Using the ‘Esc’ key will also close the popover menu.

Disabled menu items can still be focussed upon so that the structure of the menu is understandable, even if the menu item can’t be triggered at that time.

Each menu item within a popover menu can use an aria-label that provides additional context that may not be required in a visible label.

For ease of use, actions can be assigned keyboard shortcuts and these are displayed on the menu item. This information is announced by a screen reader when each menu item is focussed.

When moving between sub-menus in a popover menu, the nested sub-menu’s level is announced by a screen reader so that it is easy to understand whereabouts you are within the menu structure.

The popover menu component has been based on the following resources:

We’ve tested this component against WCAG 2.2 Level AA. It’s been tested with NVDA and VoiceOver, and several different users with different interaction methods.