[a11y][Rating] Assess WCAG 2.2 conformance #49439

Context

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

Rating uses a radio group internally. Reuse the Radio and RadioGroup evidence. Focus on the names of the values (getLabelText, 4.1.2), the read-only variant (role="img"), half-star precision, 1.4.11 (contrast of the empty icons) and 2.5.8 Target Size.

Scope

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

• 2.1.1 — Press Tab into the Rating. Change the value with the arrow keys. With precision={0.5}, the arrow keys move in half steps.
• 4.1.2 — With a screen reader, each value announces "radio button" and the getLabelText text, for example "3 Stars", with the checked state.
• 1.1.1 — With readOnly, the screen reader announces the Rating as an image with a name, for example "3.5 Stars".
• 2.4.7 — The focused value shows a visible focus indicator.
• 1.4.1, 1.4.11 — In grayscale, the filled and the empty icons stay distinguishable. The empty icon is at least 3:1 against the background.
• 2.5.8 — Measure each icon on size="small". Each is at least 24 × 24 CSS px, or it has enough spacing.

Done when

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

Search keywords: