Skip to main content Intelligence Community Design System ICDS Get started Accessibility Styles Components Patterns Community
Skip to page content Show navigation section

Popover menu

Guidance Code Accessibility

Easy to use for everyone

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.

For Assistive Technology

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.

Based on

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

  • Aria Group Role , MDN Web Docs, accessed 22nd March 2023

  • Aria Menu Role , MDN Web Docs, accessed 22nd March 2023

  • Aria Menuitem Role , MDN Web Docs, accessed 22nd March 2023

  • Aria Menuitemcheckbox Role , MDN Web Docs, accessed 22nd March 2023

Testing

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.


Last reviewed 15 April 2024 .
Navigated to Popover menu - Intelligence Community Design System