See Step Progress in Multi-Step Wizard Flows
The StepProgressWidget renders in all wizard screens (activity registration, event creation, bulk registration, NDA signing, etc.) and displays the current step index and total count using large, high-contrast elements. This is a core cognitive accessibility pattern that ensures users with memory or orientation challenges are never uncertain about their position within a flow. The widget is designed against the stroke patient persona checklist with minimum touch target sizes and WCAG AA contrast ratios.
User Story
Acceptance Criteria
- Given a user has opened any multi-step wizard, when the first screen loads, then a step progress indicator is visible at the top showing 'Step 1 of N' in large, high-contrast text
- Given a user is on step 2 of a 4-step wizard, when they view the progress indicator, then it clearly shows '2 of 4' or equivalent and visually marks completed steps as distinct from remaining steps
- Given cognitive mode is enabled, when the step progress widget renders, then the text size and contrast ratio meet WCAG 2.2 AA requirements (minimum 4.5:1 for normal text)
- Given a user taps the back button within a wizard, when they return to the previous step, then the progress indicator updates to reflect the correct current step number
- Given any wizard screen, when it renders without the step progress widget, then the build fails a stroke patient persona checklist validation — every wizard screen must include the widget
Business Value
Wizard orientation is critical for users with stroke-related cognitive impairments. Without a progress indicator, users abandon multi-step flows mid-way when they feel uncertain about how much remains. This directly reduces the underreporting rate that all three organizations cited as their core pain point.
Components
- Step Progress Widget ui
- Cognitive Mode Service service