How to build an accessible ProgressIndicator in React
role="list" structures the steps in order; the current step is conveyed as text/state rather than color alone, so screen-reader users know where they are in the flow
When to use a ProgressIndicator
- Showing progress through the discrete steps of a multi-step flow (wizard, checkout)
- Communicating which step is complete, current, and upcoming
- Laying out steps horizontally or vertically with optional descriptions
When not to use it
- Continuous task progress with a percentage — use ProgressBar or ProgressCircle
- Indeterminate loading — use Spinner
Accessibility
Role list, verified at WCAG 2.2-AA.
Common mistakes
Avoid: Using ProgressIndicator to show a download percentage
Prefer: <ProgressBar value={pct}> for continuous progress
ProgressIndicator models discrete steps, not a continuous quantity
Example
<ProgressIndicator steps={[{ label: 'Cart' }, { label: 'Shipping' }, { label: 'Payment' }]} currentIndex={1} />