Accessibility
To implement an accessible PatternFly chip group component:
- Ensure any interactive elements - such as close buttons or overflow chips - within a chip group can be navigated to and interacted with via keyboard and other assistive technologies such as a screen reader
- Provide an
aria-labelif the chip group does not have a visible text category name - Follow the chip accessibility documentation when rendering chips
Testing
At a minimum, a chip group should meet the following criteria:
- Tab navigates to the next chip group close button or focusable element, and Shift + Tab navigates to the previous chip group close button or focusable element.
- Enter and Space should be able to activate the chip group close button, individual chip close buttons, or an overflow chip. This can usually be achieved by using "click" events.
- This can be achieved by ensuring the category name itself has the
tabindex="0"attribute. A category name should then be included in the standard keyboard navigation. - Follow the tooltip accessibility documentation.
- This will help users of assistive technologies differentiate multiple chip groups on a page, and provide context of what content the chip group contains.
React customization
The following React props have been provided for more fine-tuned control over accessibility.
Prop | Applied to | Reason |
|---|---|---|
aria-label="[text describing the chip group]" | ChipGroup | Adds an accessible name to the chip group. Required when the chip group does not have a visible category name. |
closeBtnAriaLabel="[text describing the close button]" | ChipGroup | Adds an accessible name to the chip group's close button. Required. When passing in a custom value, you do not need to repeat the chip group's category name and should only include a verb such as "close" or "remove". |
HTML/CSS customization
The following HTML attributes and PatternFly classes can be used for more fine-tuned control over accessibility.
Attribute or class | Applied to | Reason |
|---|---|---|
aria-label="[text describing the close button]" | .pf-c-chip-group__close > button | Adds an accessible name to the chip group's close button. Required when the close button does not contain any visible text. |
aria-labelledby="[space separated list of the chip group's and close button's ID]" | .pf-c-chip-group__close > button | Combines the accessible name of the close button and the chip group's category name, providing more context to users regarding which chip group will be closed. Required. |
id | .pf-c-chip-group__close > button | The value of this attribute is passed into the close button's aria-labelledby attribute. Required. |
aria-hidden="true" | .pf-c-chip-group__close > button > i | Removes the close button icon from the accessibility tree, preventing assistive technologies from potentially announcing duplicate or unnecessary information without visually hiding it. Required if the close button contains an icon. |
id | .pf-c-chip-group__label | The value of this attribute is passed into the close button's aria-labelledby attribute. Required when a chip group has a close button. |
role="list" | .pf-c-chip-group__list | Indicates that the chip group list is a list element. Required. This role is redundant since .pf-c-chip-group__list is a <ul> element, but it is required for assistive technologies to announce the list properly. |
View source on GitHub
