What component has

Keyboard support

Read more about FilterTrigger keyboard support in the Keyboard control guide.

Roles and attributes

The following table describes roles and attributes that component already has.

Component	Attribute	Usage
FilterTrigger.ClearButton	aria-label="Clear"	Defines an accessible name for the Clear button.

For other roles and attributes, refer to documentation for components that are commonly used with FilterTrigger:

• Select
• Dropdown

Considerations for developers

Sometimes, the filter name is included in the trigger alongside the value, for example "Color: Blue." In these cases, hide the name part from assistive technology to avoid redundant reading. Refer to the accessible name example.

Roles and attributes

The following table will help you to keep in mind the necessary attributes to make our components fully accessible in the particular cases in your interfaces.

Component	Attribute	Usage
Trigger	<label for="IDREF"> or aria-labelledby="IDREF" or aria-label	Defines an accessible name for the trigger. Refer to our examples.
Select.Menu	aria-labelledby="IDREF" or aria-label	Due to system limitations, <Select.Menu> doesn't generate its accessible name automatically when used with FilterTrigger. Make sure to label it explicitly, as in our examples.

Other recommendations

For more accessibility recommendations, read the common Accessibility guide.

Automated screen reader testing

Intergalactic v15.29.0, React v18.2.0, Playwright v1.25.1, Guidepup v0.13.1, MacOS Monterey 12.

Running screen reader against this file.

1. Screen reader goes into the active element.
2. Screen reader says "In web content Filter trigger with options Filter trigger with options".
3. Screen reader goes to the next element.
4. Screen reader says "Filter Select option list box pop up button".
5. Screen reader triggers element default action.
6. Screen reader goes to the next element.
7. Screen reader says "List of options list box".
8. Screen reader goes to the next element.
9. Screen reader goes to the next element.
10. Screen reader triggers element default action.
11. Screen reader says "Option 3 group Filter list box pop up group".
12. Screen reader goes out of active element.
13. Screen reader says "Filter list box pop up group".
14. Screen reader goes into the active element.
15. Screen reader says "Option 3".
16. Screen reader triggers element default action.
17. Screen reader goes to the next element.
18. Screen reader says "Option 3 button".
19. Screen reader triggers element default action.
20. Screen reader says "Filter list box pop up empty pop up button".
21. Screen reader goes out of active element.
22. Screen reader says "Out of web content".
23. Screen reader goes into the active element.
24. Screen reader says "Filter Select option list box pop up button".
25. Screen reader goes to the next element.