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.
- Labels should be clear and concise.
- If a colored button is used in the menu, be sure color is not the only way the information is conveyed.
- If a menu item is disabled it should not be in the tab order.
Resources
- W3C WAI-ARIA Authoring Practices Dialog Menu Button Design Pattern covers the usage of ARIA names, state and roles, as well as the expected keyboard interactions.
- IBM Accessibility Checklist Checkpoint:
- 1.3.1 Info and Relationships (WCAG Success Criteria 1.3.1)
- 1.3.2 Meaningful Sequence (WCAG Success Criteria 1.3.2)
- 2.1.1 Keyboard (WCAG Success Criteria 2.1.1)
- 2.4.3 Focus Order (WCAG Success Criteria 2.4.3)
- 2.4.6 Headings and Labels (WCAG Success Criteria 2.4.6)
- 2.4.7 Focus Visible (WCAG Success Criteria 2.4.7)
- 4.1.2 Name, Role, Value (WCAG Success Criteria 4.1.2)
Accessibility testing
Accessibility issues are tracked in the Carbon Component GitHub repository.
Automated test
- 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
- No violations
macOS screen reader tests
- Chrome version 77.0.3865.90
- Carbon React version 7.7.1
- Tab to the Overflow Menu. VO announces the menu label and pop-up button.
- The Enter or Space key opens the menu. VO announces the menu item label the number and the total number of options.
- The Up and Down Arrow keys navigate through the list of options and VO announces each menu item label.
- The Escape key closes the menu. (Note: Space and Enter key also close the menu.)
Windows screen reader tests
- Firefox version 68
- JAWS 18
- Carbon React version 7.7.1
- Tab to the Overflow Menu. JAWS announces the menu label and pop-up button, as well as press Space to expand.
- The Space key opens the menu briefly and then it disappears. The Enter key opens the menu and JAWS announces the menu item label
- The Up and Down Arrow keys navigate through the list of options and JAWS announces each menu item label.
- The Escape key closes the menu. (Note: Space and Enter key also close the menu.)
iOS screen reader tests
- Safari version 13.1.3
- Carbon React version 7.7.1
- Swipe right to the Overflow Menu. VO announces the main landmark, menu label, and that the pop-up button is collapsed.
- Double tap to open the menu. VO announces the menu item label.
- Swipe right or left to navigate through the list of options and VO announces each menu item label.
- Double tap closes the menu. (Note: Space and Enter key also close the menu.)