[UI/UX Design] Design a segmented control component with full a11y semantics #351

Description

Segmented controls are reimplemented ad hoc across the app. Design a shared SegmentedControl component with roving tabindex, ARIA radiogroup semantics, and equal-width variants.

Requirements and context

• Must be accessible (WCAG 2.1 AA), responsive, and documented in the design system
• Should be consistent with existing patterns and easy to review
• Relevant code: src/components/common/
• Ship compact and default sizes plus icon-only variant

Suggested execution

• Fork the repo and create a branch
• git checkout -b uiux/segmented-control
• Implement changes
  • Design and document the SegmentedControl component
  • Migrate Settings, ThemeToggle, and density controls to use it
  • Add Storybook coverage for all variants
• Validate accessibility and responsive assumptions

Test and commit

• Run checks
  • npm run lint and component/visual tests
• Cover edge cases
  • Keyboard nav, RTL flip, disabled segments, screen-reader radiogroup
• Include screenshots/before-after and accessibility (axe) notes

Example commit message

design: SegmentedControl component

Guidelines

• Minimum 95 percent test coverage
• Clear documentation
• Timeframe: 96 hours