Segmented Control

A compact button group that lets users switch between a set of mutually exclusive views or modes.

Keyboard interaction

Key	Action
`Tab`	Moves focus into the segmented control, landing on the first item.
`Tab (again)`	Moves focus to the next segment, then out of the control.
`Space / Enter`	Activates the focused segment.

Attribute / Property	Value / Behaviour
`role="group"`	Host element — Identifies the container as a related group of controls.
`aria-pressed`	Each button — "true" for the selected segment, "false" for all others.
`disabled`	Each button — Native disabled attribute prevents focus and interaction when the group or item is disabled.

✓

1.4.3 Contrast (Minimum) — AAPass

Segment label text uses --diwa-text-primary; meets the 4.5:1 minimum contrast ratio against the control background in both themes.

✓

1.4.11 Non-text Contrast — AAPass

The selected segment indicator uses --diwa-accent, validated to have ≥ 3:1 contrast against adjacent surface colours.

✓

2.1.1 Keyboard — APass

Tab moves focus through segments. Enter or Space activates the focused segment.

✓

2.4.7 Focus Visible — AAPass

A tokenized focus outline (var(--diwa-focus-ring-width) solid --diwa-border-focus) is shown on the focused segment button via :focus-visible.

✓

4.1.2 Name, Role, Value — APass

role="group" on the host and aria-pressed on each button communicate the group and selection state to assistive technologies.

Reduced motion — all CSS transitions inside the shadow DOM respond to prefers-reduced-motion: reduce and are suppressed automatically.
Focus management — each segment button is a natural tab stop. The first Tab press enters the control; subsequent tabs move to the next segment and eventually exit the control.
Group labelling — the control has role="group" but no built-in group label. If the context is ambiguous, wrap the component in an element with aria-label or associate a visible label via aria-labelledby so users understand what is being selected.