To implement an accessible PatternFly menu toggle component:
- Due to the composable nature of the menu and menu toggle components, keyboard interaction will need to be added manually between the menu toggle and the menu. See the composable menu demos to see how this is done.
- When adding an action to the menu toggle, an
aria-labelwill need to be added to the
MenuToggleCheckboxto communicate to users what this action will do.
- When adding any additional elements to the menu toggle, remember to follow that element's specific considerations. For example, if you are adding an avatar to the menu toggle, you will need to provide an
altattribute with a description of the image.
At a minimum, a menu toggle component should meet the following criteria:
- Tab navigates to the menu and Shift + Tab navigates to the previous focusable element. Refer to our menu accessibility documentation for more implementation details when using these components together.
- This will communicate what the menu toggle is to users of assistive technologies when navigating through a page or a screen reader's rotor menu.
- This will differentiate each action when announced to users of assistive technologies when navigating through a page or a screen reader's rotor menu.
The following React props have been provided for more fine-tuned control over accessibility.
Adds an accessible name to the menu toggle. Required when there is no text displayed in the menu toggle.
Adds an optional icon rendered inside the toggle, before the children content. Add
Adds an accessible name to the menu toggle action when the action is represented by an icon and no text.
Adds an accessible name to the checkbox item on the menu toggle when there is no associated visible label text.
The following HTML attributes and PatternFly classes can be used for more fine-tuned control over accessibility.
Attribute or Class
Indicates that the menu toggle component is in the expanded or collapsed state.
An accessible label for the menu toggle when there is no visible text within the toggle. Required when using a
Makes the decorative icon on the toggle hidden from screen reader users. Required when the toggle contains only an icon
View source on GitHub