[a11y][FormHelperText] Assess WCAG 2.2 conformance #49411

Context

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

The TextField report already tests FormHelperText indirectly. Check the aria-describedby association (1.3.1), error identification (3.3.1) and announcement of errors (4.1.3).

Scope

1. Add axe tests and fixtures in test/regressions/a11y/fixtures/.
2. Write FormHelperText/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.

• 1.3.1 — With a screen reader, press Tab to a TextField with helper text. The screen reader reads the helper text as the description after the name.
• 3.3.1 — In the error state, the helper text names the error in words, for example "Enter a valid email".
• 4.1.3 — Cause an error on blur, then move focus to the next field. Record if the screen reader announces the new error text. The probable result is "not announced".
• 1.4.3 — With a contrast checker, measure the helper text and the error text on the outlined, filled and standard variants. Each is at least 4.5:1.
• 1.4.4 — At 200% page zoom, long helper text wraps and is not clipped.

Done when

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

Search keywords: