SegmentedControl from @prepared911/ui/segmented-control 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.
What you must provide
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.
Keyboard behavior
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).
Semantics and roles
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.
Known caveats
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.