[a11y][CircularProgress] Assess WCAG 2.2 conformance #49408

Context

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

CircularProgress probably has the same gaps as LinearProgress: 4.1.3 Status Messages and 2.2.2 Pause, Stop, Hide. Reuse the LinearProgress report as the template.

Scope

1. Add axe tests and fixtures in test/regressions/a11y/fixtures/.
2. Write CircularProgress/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, go to a determinate and an indeterminate CircularProgress. The determinate one announces "progress bar" and its value. The indeterminate one announces "progress bar" with no value.
• 4.1.3 — Move focus away while the value changes. Record if the screen reader announces the change. The probable result is "not announced", the same as LinearProgress.
• 2.2.2 — Look at the indeterminate animation. Record that the component has no pause control. Check the behavior with prefers-reduced-motion: reduce.
• 2.3.1 — No part flashes more than three times per second.
• 1.4.11 — With a contrast checker, measure the arc against the page for each color, in light and dark mode. The arc is at least 3:1.

Done when

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

Search keywords: