Skip to content

FilterTrigger

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.

ComponentAttributeUsage
FilterTrigger.ClearButtonaria-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:

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.

ComponentAttributeUsage
Trigger<label for="IDREF"> or aria-labelledby="IDREF" or aria-labelDefines an accessible name for the trigger. Refer to our examples.
Select.Menuaria-labelledby="IDREF" or aria-labelDue 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.

Released under the MIT License.

Released under the MIT License.