Stepper

Accessibility

Import Stepper, StepperState from @prepared911/ui/stepper.

Structure

The list is a native ol with role="list" (Box adds the role, because WebKit exposes a list without markers as a group) and one li per step. A screen reader announces the list name and the number of steps on entering it.
The list is named by aria-label or by aria-labelledby, which the types require. In the live guidance panel the header names it.
The current step carries aria-current="step". No other step carries aria-current.
Every row starts with hidden text that names its state, from stateLabels: "Completed, Confirm nature of event". The status marks (check, spinner, ring, question mark) are decorative and aria-hidden. Color and shape carry no state alone.
An empty list renders nothing, so there is no empty list to announce.

Announcements

When a step becomes current or complete after the first render, the sentence from announcement is written to the polite live region of the list's document. It is one sentence per update: a step that became current wins over one that became complete. Nothing is said on mount, for a step new to the list, or when no state changed. Without announcement nothing is said, and the state is still in the list.

Keyboard

The steps are not controls, so they take no tab stop. In the live guidance panel the header is one button (Enter and Space collapse and expand it) and the scroll region is focusable, so the arrow keys scroll a long list.

Contrast, forced colors and motion

Text and marks clear WCAG 2.2 AA in light and dark (asserted with axe in the browser test). The current row is the accent solid with the on-accent text color.
Under forced-colors: active the accent fill is dropped by the browser, so the current row draws a Highlight outline inside its edge; the success disc is CanvasText with a Canvas check, and the ring edge is CanvasText.
The spinner uses Icon's spin and stops under reduced motion (the system setting or data-motion="reduced"). The row stays filled and keeps aria-current, so the state does not rely on movement. The fill and text colors fade over a short glide.
Labels wrap, and rows are rem-based, so a row is 72px at 200% text size and nothing scrolls sideways at 320px.

Not covered by a gate

A screen reader pass (AC-8) is manual: the list name and count, the state text before each label, aria-current, and the single polite sentence when a step moves.

Stepper / API and Development

On this page

Contrast, forced colors and motion

Not covered by a gate

Stepper

Accessibility

Import Stepper, StepperState from @prepared911/ui/stepper.

Structure

The list is a native ol with role="list" (Box adds the role, because WebKit exposes a list without markers as a group) and one li per step. A screen reader announces the list name and the number of steps on entering it.
The list is named by aria-label or by aria-labelledby, which the types require. In the live guidance panel the header names it.
The current step carries aria-current="step". No other step carries aria-current.
Every row starts with hidden text that names its state, from stateLabels: "Completed, Confirm nature of event". The status marks (check, spinner, ring, question mark) are decorative and aria-hidden. Color and shape carry no state alone.
An empty list renders nothing, so there is no empty list to announce.

Announcements

Keyboard

Contrast, forced colors and motion

Text and marks clear WCAG 2.2 AA in light and dark (asserted with axe in the browser test). The current row is the accent solid with the on-accent text color.
Under forced-colors: active the accent fill is dropped by the browser, so the current row draws a Highlight outline inside its edge; the success disc is CanvasText with a Canvas check, and the ring edge is CanvasText.
The spinner uses Icon's spin and stops under reduced motion (the system setting or data-motion="reduced"). The row stays filled and keeps aria-current, so the state does not rely on movement. The fill and text colors fade over a short glide.
Labels wrap, and rows are rem-based, so a row is 72px at 200% text size and nothing scrolls sideways at 320px.

Not covered by a gate

A screen reader pass (AC-8) is manual: the list name and count, the state text before each label, aria-current, and the single polite sentence when a step moves.

Stepper / API and Development

On this page

Contrast, forced colors and motion

Not covered by a gate