Toggle

WCAG 2.1 AA — release blocker

Keyboard

Screen reader

• Toggle renders with aria-pressed reflecting its on/off state.
• ToggleGroup renders role="group" so assistive tech announces the set.
• ToggleGroupItem renders with aria-pressed.
• Icon-only toggles require an explicit aria-label — the icon alone is not an accessible name.

Focus management

• Individual Toggle buttons receive standard button focus.
• Inside a ToggleGroup, only the active item has tabIndex={0}; others have tabIndex={-1}. Arrow keys move focus between items.
• Disabled items are skipped during keyboard navigation.

React Native

• Uses accessibilityRole="button" with accessibilityState={{ selected }}.
• Disabled items set accessibilityState={{ disabled: true }}.

Color is never the only signal

• The pressed state uses a distinct background (bg-accent) in addition to aria-pressed. Do not rely on color alone.
• Disabled toggles have reduced opacity AND the semantic disabled attribute.

Audit checklist

• aria-pressed reflects on/off state
• Enter / Space activates
• Arrow keys navigate within ToggleGroup
• Icon-only items have aria-label
• 4.5:1 contrast on pressed and unpressed states
• Disabled items skipped by keyboard navigation