[a11y][Stepper] Assess WCAG 2.2 conformance #49435

Context

Wave 4, item 6. Tracking issue: #49260.

Include Step, StepButton, StepLabel, StepIcon, StepContent and MobileStepper. Focus on the current step (aria-current, 4.1.2), states shown only by the icon or color (1.1.1, 1.4.1), the contrast of StepIcon (1.4.3, 1.4.11) and keyboard access to non-linear steps (2.1.1).

Scope

1. Add axe tests and fixtures in test/regressions/a11y/fixtures/.
2. Write Stepper/accessibility.md.
3. Enroll it in the CSS-dependent suite (1.4.10, 1.4.4, 1.4.12).
4. Run pnpm a11y:scorecard.

Manual tests

Write each check in the report as numbered Manual testing steps, as in Button/accessibility.md. pnpm a11y:scorecard then adds them to manual-testing.md. For screen-reader steps, use NVDA with Chrome and VoiceOver with Safari.

• 4.1.2 — With a screen reader, read the Stepper. The active step announces "current step". Record how the screen reader announces the completed and the error states.
• 1.1.1, 1.4.1 — The completed state (check icon) and the error state (warning icon) are also available as text, not only as an icon or a color.
• 1.4.3, 1.4.11 — With a contrast checker, measure the number in the StepIcon against its circle and the circle against the page.
• 2.1.1 — In a non-linear Stepper, press Tab to each StepButton and activate it with Enter.
• 1.1.1 — In MobileStepper, the dots and the progress bar have a text alternative, for example "Step 2 of 6". The Back and Next buttons have names.
• 1.4.10 — At 320 CSS px width, a horizontal Stepper with alternativeLabel does not need horizontal scroll.

Done when

• Stepper has a report and is in the scorecard.
• Each manual test in this issue has steps and a result in the report.

Search keywords: