--- id: Chip section: components --- import { Checkbox, List, ListItem } from '@patternfly/react-core'; import { Link } from '@patternfly/documentation-framework/components/link/link'; ## Accessibility To implement an accessible PatternFly **chip** and **chip group**: - Render the chip as a button when using it as an overflow chip - 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-label` if the chip group does not have a visible text category name ## Testing At a minimum, a chip and chip group should meet the following criteria: Tab navigates to the next chip group close button, chip close button, or focusable element, and Shift + Tab navigates to the previous chip group close button, chip 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 or chip component itself has the tabindex="0" attribute. The category name/chip should then be included in the standard keyboard navigation.} /> Follow the tooltip accessibility documentation.} /> If a chip group does not have a visible category name, it has an aria-label instead.} description="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. ### Chip React properties | Prop | Applied to | Reason | |---|---|---| | `closeBtnAriaLabel="[text that labels the chip close button]"` | `Chip` | Adds an accessible name to the chip's close button. **Required**.

When passing in a custom value, you do not need to repeat the chip's content and should only include a verb such as "close" or "remove". | | `component="[element tag]"` | `Chip` | Sets the base element for the chip (`div` element by default).

When using a chip as an overflow chip, or in any manner where clicking the chip itself causes an action to trigger, the value passed in should be "button" to provide the built-in interaction necessary for improved accessibility. | ### Chip group React properties | Prop | Applied to | Reason | |---|---|---| | `aria-label="[text that labels 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 that labels the chip group 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. ### Chip HTML attributes and classes | Attribute or class | Applied to | Reason | |---|---|---| | `id` | `.pf-v6-c-chip` | The value of this attribute is passed into the close button's `aria-labelledby` attribute. **Required** when a chip has a close button. | | `aria-label="[text that labels the chip close button]"` | `.pf-v6-c-chip > button` | Adds an accessible name to the chip's close button. **Required** when the close button does not contain any visible text. | | `aria-labelledby="[space separated list of the chip's and close button's ID]"` | `.pf-v6-c-chip > button` | Combines the accessible name of the close button and the chip content, providing more context to users regarding which chip will be closed. **Required**. | | `id` | `.pf-v6-c-chip > button` | The value of this attribute is passed into the close button's `aria-labelledby` attribute. **Required**. | | `aria-hidden="true"` | `.pf-v6-c-chip > 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. | ### Chip group HTML attributes and classes | Attribute or class | Applied to | Reason | |---|---|---| | `aria-label="[text that labels the chip group]"` or `aria-labelledby="[id of the element that labels the chip group]"` | `.pf-v6-c-chip-group__list` | Adds an accessible name to the chip group. **Required** when the chip group does not have a visible category name. | | `aria-label="[text that labels the chip group close button]"` | `.pf-v6-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-v6-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-v6-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-v6-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-v6-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-v6-c-chip-group__list` | Indicates that the chip group list is a list element. **Required**.

This role is redundant since `.pf-v6-c-chip-group__list` is a `