Steppers

The steps of a task that takes more than one screen: a booking, an import, the first run of a site. A list of steps in order, the one the person is on marked by the attribute a screen reader says, the ones before it done by their place.

Examples

stepper on an <ol>, stepper-item on each step, and aria-current="step" on the step the person is on. Every step before it reads as done, every step after it as still to come; the numbers are counted by the list.

Choose a tour
Pick a date
Guests
Payment

<ol class="stepper" aria-label="Booking">
	<li class="stepper-item">Choose a tour</li>
	<li class="stepper-item" aria-current="step">Pick a date</li>
	<li class="stepper-item">Guests</li>
	<li class="stepper-item">Payment</li>
</ol>

Across

stepper-horizontal sets the steps in a row, each under its number. With a prefix, md:stepper-horizontal, the row starts where the region is wide enough, and the steps stay a column below it.

Upload the file
Match the columns
Check the rows
Import

<ol class="stepper md:stepper-horizontal" aria-label="Import">
	<li class="stepper-item">Upload the file</li>
	<li class="stepper-item">Match the columns</li>
	<li class="stepper-item" aria-current="step">Check the rows</li>
	<li class="stepper-item">Import</li>
</ol>

Steps to go back to

A step done may lead back to its screen: its words are a link inside the stepper-item. A step still to come is plain text, as it cannot be reached yet.

Name
Languages
Theme
Publish

<ol class="stepper stepper-horizontal" aria-label="New site">
	<li class="stepper-item"><a href="#stepper-links">Name</a></li>
	<li class="stepper-item"><a href="#stepper-links">Languages</a></li>
	<li class="stepper-item" aria-current="step">Theme</li>
	<li class="stepper-item">Publish</li>
</ol>

States

class	the first step	a middle step	the last step
stepper	Choose a tour Pick a date Payment	Choose a tour Pick a date Payment	Choose a tour Pick a date Payment

Keyboard and accessibility

The list is an <ol> with a name of its own (aria-label): a screen reader says how many steps there are and which one this is.
The step the person is on is aria-current="step", never a class: VoiceOver and NVDA say "current step", and the look follows the attribute.
The stepper shows where the person is; it moves nothing by itself. The screen's own buttons, "Back" and "Next", move between steps.
A step done that leads back is a link, reached by Tab; a step still to come is text, never a disabled link.

Tokens

From css/components/stepper.css. It declares --redz-stepper-size, --redz-stepper-gap on its root, never on rows or items.

It reads the theme's --redz-space-12, --redz-space-8, --redz-text-muted, --redz-border-strong, --redz-bg, --redz-fs-12, --redz-border, --redz-primary, --redz-primary-contrast, --redz-text.