[a11y][Badge] Assess WCAG 2.2 conformance #49441

Context

Wave 4, item 12 (lower risk). Tracking issue: #49260.

Focus on 1.3.1 (assistive technology does not get the badge content unless the parent label includes it) and 1.4.3 (contrast of the badge colors). The dot variant has no text alternative.

Scope

1. Add axe tests and fixtures in test/regressions/a11y/fixtures/.
2. Write Badge/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, focus an IconButton with a Badge. Record if the screen reader announces the count. The author must put the count in the name, for example "4 new notifications".
• 1.4.1 — With variant="dot", the information is only a colored dot. Record that the author must add a text alternative.
• 1.4.3 — With a contrast checker, measure the badge text against the badge color for each color. Each is at least 4.5:1.
• 1.4.4 — At 200% zoom, the badge content, for example "99+", is not clipped.
• 1.3.1 — With invisible, the screen reader does not announce the badge content.

Done when

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

Search keywords: