StepTracker
- Library
- UDS Base
- Repository
- github.com/telus/universal-design-system
- Package
- npmjs.com/package/@telus-uds/components-base
- Package version
- 1.6.1
Introduction
import { StepTracker } from '@telus-uds/components-base'
StepTracker component shows the current position in a sequence of steps. At wide viewports (lg and xl), all steps are labelled, and the current step is highlighted; at narrower viewports, progress through the steps is shown but only the current step has a visible label.
Accessibility
Keep in mind that in its current implementation this is not an interactive
component and can’t be used to navigate between steps. The application
must provide its own navigation mechanism and state control. That is the
main reason the component assumes the progressbar role in terms of
accessibility. This also makes it extremely important to make sure you
set the necessary accessibility attributes on controls used to modify the
state of the step tracker.
That said, you can also pass standard a11y props to the StepTracker
component, including the ones that are specific to the progressbar role.
By default the following props are used:
accessibilityRole(role):progressbar,accessibilityLabel(aria-label):Step I of N: <Current Step Label>,accessibilityLevel(aria-level): 1,accessibilityValue.min(aria-valuemin):0,accessibilityValue.max(aria-valuemax):steps.length - 1,accessibilityValue.now(aria-valuenow):current,accessibilityValue.text(aria-valuetext):<Current Step Label>,
Props
| Name | Type | Default | Description |
|---|---|---|---|
| current | number | 0 | |
| copy | 'en' | 'fr' | 'en' | |
| dictionary | shape | { en: { stepLabel: 'Step %{stepNumber}', stepTrackerLabel: 'Step %{stepNumber} of %{stepCount}: %{stepLabel}' }, fr: { stepLabel: 'Étape %{stepNumber}', stepTrackerLabel: 'Étape %{stepNumber} sur %{stepCount}: %{stepLabel}' } } | |
| steps | arrayOf | [] | |
| tokens | custom | System tokens prop, see tokens for more details | |
| variant | objectOf | System variant prop, see variants for more details |