SegmentSelector

SegmentSelector is a top-level filter component that filters data by segments, setting the scope for additional filters.

OverviewPropertiesUsageAccessibility

New

Note

See Accessibility in Design Foundations for explanations of key concepts and best practices.

Accessible names and roles

SegmentSelector provides a default trigger with built-in accessible naming based on the current segment name.

• Do spread all the provided trigger props onto the trigger element if using SegmentSelector.CustomTrigger. These props carry the accessible name, role, and state attributes required for correct screen reader behaviour.
• Don't omit the provided props on a custom trigger. Doing so would remove the built-in accessibility semantics.

Keyboard accessibility and focus

SegmentSelector handles focus management out of the box. When the popup opens, focus moves to the first segment option; when it closes, focus returns to the trigger.

• Don't override the component's built-in focus handling. Focus must move into the popup when it opens, and return to the trigger on close, so screen readers can announce the state change correctly.

State announcements

SegmentSelector handles state announcements out of the box: aria-expanded="true" when open; aria-expanded="false" when closed.

• Do ensure that the popup content follows in a logical tab order so users can navigate into it after the state is announced.