Wizard Progress Indicator
Component Detail
Description
Displays current step position and total step count in all multi-step wizards. Enforces the maximum of 5 steps and provides clear visual feedback so users with cognitive impairments always know where they are in a flow.
wizard-progress-indicator
Summaries
The Wizard Progress Indicator directly reduces user drop-off during multi-step data entry flows — one of the most common causes of incomplete submissions in mobile applications. By always showing users exactly where they are in a process (e.g. Step 2 of 4), the product builds trust and reduces anxiety, particularly for users with cognitive impairments. The built-in enforcement of a five-step maximum prevents product teams from inadvertently creating overwhelming flows, protecting completion rates across the entire platform.
Accessibility compliance also mitigates legal and reputational risk under Norwegian and EU digital accessibility regulations, avoiding costly remediation later.
This is a low-complexity shared component with no external dependencies, making it one of the safest deliverables on the mobile roadmap. Because it is consumed by every multi-step wizard in the application, it must be prioritized early and stabilized before dependent wizard screens enter development. Acceptance criteria must include screen-reader announcement testing on both iOS and Android, which requires accessibility-focused QA resource allocation. The five-step constraint enforced at render time should be validated through automated unit tests.
Once shipped, changes to this component carry broad blast radius — any regression affects all wizard flows simultaneously.
WizardProgressIndicator is a stateless mobile UI component accepting currentStep and totalSteps props. The validateStepCount(total) method throws an assertion error when total exceeds five, enforcing the UX constraint at the component boundary rather than relying on callers. The announceProgress() method posts an accessibility announcement via the platform's native semantics layer (AccessibilityEvent on Android, UIAccessibility.post on iOS) on every step change. Since this component has zero dependencies, it can be tested in full isolation with straightforward unit tests covering edge cases: step 1 of 1, step 5 of 5, and invalid counts above five.
Responsibilities
- Render step counter (e.g. Step 2 of 4) with accessible labels
- Enforce maximum 5-step constraint at render time
- Provide screen-reader-friendly progress announcements
Interfaces
WizardProgressIndicator({currentStep, totalSteps})
announceProgress()
validateStepCount(total)