Black Lives Matter. Support the Equal Justice Initiative.
Skip to main contentCarbon Design System

Overflow menu

How it works

The Carbon overflow menu component is used when there is limited space to provide a pop-up list of actions that are available to the user. The overflow menu button uses tabindex="0" to ensure it is in the tab order for keyboard only users.

When the button has focus, Space key as well as the Enter key activates the pop-up menu. WAI-ARIA roles and states are used to ensure the component is accessible to people using assistive technologies. The pop-up menu has the ARIA role of role="menu", a label of aria-label="Menu" and includes aria-haspopup="true" to let the user know it is a pop-up menu.

When the menu button is collapsed the pop-up menu is hidden so the ARIA state is set to aria-expanded="false" to advise users of assistive technologies that the pop-up menu is not visible. When the pop-up menu is expanded the ARIA state changes to aria-expanded="true" and the menu is displayed.

Each menu option contains an ARIA role of role="menuitem" and unique ARIA labels for each option. When focus is on each option there is a prominent style change to the border to ensure the focus is clearly displayed.

Accessibility considerations

This component has been validated to meet the WCAG 2.1 AA and Section 508 accessibility guidelines, however changes made by the content owner can affect accessibility compliance. Be sure to review and follow the guidance in this section when updating or adding new content to this component.

  1. Labels should be clear and concise.
  2. If a colored button is used in the menu, be sure color is not the only way the information is conveyed.
  3. If a menu item is disabled it should not be in the tab order.

Resources

Accessibility testing

Accessibility issues are tracked in the Carbon Component GitHub repository.

Automated test

Automated test environment
Results
- macOS Mojave version 10.14.6 with VoiceOver
- Chrome version 77.0.3865.90
- Dynamic Assessment Plugin (DAP) version 1.8.0.0 - IBM Accessibility WCAG 2.1 Sept. 2019 Ruleset
- Carbon React version 7.7.1
DAP test:
- No violations

macOS screen reader tests

Environment
Results
- macOS Mojave version 10.14.6 with VoiceOver
- Chrome version 77.0.3865.90
- Carbon React version 7.7.1
VoiceOver(VO) test:
  1. Tab to the Overflow Menu. VO announces the menu label and pop-up button.
  2. The Enter or Space key opens the menu. VO announces the menu item label the number and the total number of options.
  3. The Up and Down Arrow keys navigate through the list of options and VO announces each menu item label.
  4. The Escape key closes the menu. (Note: Space and Enter key also close the menu.)

Windows screen reader tests

Environment
Results
- Microsoft Windows 10
- Firefox version 68
- JAWS 18
- Carbon React version 7.7.1
JAWS test:
  1. Tab to the Overflow Menu. JAWS announces the menu label and pop-up button, as well as press Space to expand.
  2. The Space key opens the menu briefly and then it disappears. The Enter key opens the menu and JAWS announces the menu item label
  3. The Up and Down Arrow keys navigate through the list of options and JAWS announces each menu item label.
  4. The Escape key closes the menu. (Note: Space and Enter key also close the menu.)

iOS screen reader tests

Environment
Results
- iOS version 13.1.3 with VoiceOver
- Safari version 13.1.3
- Carbon React version 7.7.1
VoiceOver test:
  1. Swipe right to the Overflow Menu. VO announces the main landmark, menu label, and that the pop-up button is collapsed.
  2. Double tap to open the menu. VO announces the menu item label.
  3. Swipe right or left to navigate through the list of options and VO announces each menu item label.
  4. Double tap closes the menu. (Note: Space and Enter key also close the menu.)