SegmentedControl from @prepared911/ui-core is a compact cluster that maps to radio-group semantics. The primitive wires roles and keyboard behavior; your job is to label the control, keep labels short, and ensure icon-only segments carry accessible names.
What the component handles
- Radio-group semantics. Root is
role="radiogroup"; items are role="radio" with aria-checked.
- Keyboard navigation. Arrow keys move between segments; Home/End jump to ends.
- Automatic selection. Arrow navigation typically selects as it moves, matching the compact-control expectation.
- Disabled state. Disabled controls expose
aria-disabled and are skipped.
- Group label. Use
aria-labelledby (pointing at a visible heading) or aria-label.
- Accessible names on icon-only segments. When a segment renders only an icon, the icon's
title or a sibling aria-label supplies the name.
- Parallel wording. Short, parallel labels scan quickly and translate cleanly.
- Tab moves focus into the control.
- Arrow Left / Right (and Up / Down in vertical layouts) move and select between segments.
- Home / End jump to first / last.
- Enter / Space select the focused segment (when automatic selection is disabled).
- Root →
role="radiogroup" with aria-orientation.
- Segments →
role="radio" with aria-checked.
- Icons inside segments should be marked
aria-hidden="true" when a text label provides the name.
- Too many segments. Six or more options don't fit the pattern. Use a
Select or ToggleGroup with overflow.
- Long labels. Labels that wrap break the visual rhythm and are a sign the segment needs to be shorter or the whole control needs to be replaced.
