# Filter Chip

Filter Chips are used to display dismissible filter chips.

## Guidance

### When to use

- Use to clearly indicate to the user what filters have been applied to a set of results and provide a quick and easy way to remove a selected filter

### When to consider alternatives

- When many filter chips would be displayed and available screen real estate is limited
- When a badge is sufficient in place of a filter chip

### Usage

- Do not mix badges and filter chip as it can be confusing to the user
- Do not use filter chip when a badge is sufficient, i.e., when none of the tags are removable
- Filter chips should be short and not wrap to the second line
- Allow adequate spacing (at least 8px) between each filter chip, as much as the design will allow.
- The colors of the Filter Chip can be overriden using the CSS variables listed below, but should not be overriden with colors outside of the color palette.

## Accessibility
The filter chip component has been tested against, and meets, WCAG 2.1 standards for size, color contrast, and screen reader usage.

- The filter chip itself does not need a label, as the text content within it is sufficient. However, actions that the filter can take (like remove) do need to be labeled. You should take advantage of the `ariaClearLabel` prop to provide additional text for screen reader support.
- The chip should receive focus.
- `Enter`, `Backspace`, and `Delete` will remove the tag when it is in focus.

### Accessibility testing

#### Screen reader testing

- When navigating to a filter chip, screen readers should announce the label text and any actions (like remove) separately.
- Screen readers should identify filter chips as buttons.

#### Keyboard testing

- Users should be able to navigate to the chip with their keyboard.
- Filter chips should receive focus.
- `Enter`, `Backspace`, and `Delete` should remove the tag or otherwise trigger the filter action when it is in focus.