[a11y][IconButton] Assess WCAG 2.2 conformance #49405

Context

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

Icon-only buttons need an accessible name. Focus on 1.1.1 Non-text Content and 4.1.2 Name, Role, Value. Reuse the ButtonBase evidence from the Button report.

Scope

1. Add axe tests and fixtures in test/regressions/a11y/fixtures/.
2. Write IconButton/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.1.1, 4.1.2 — With a screen reader, press Tab to each icon-only button. Each one announces its action from aria-label, and the icon is silent.
• 4.1.2 — Focus a disabled IconButton and an href IconButton. The screen reader announces "disabled" and "link".
• 2.4.7 — Press Tab to an IconButton, also with disableRipple. A visible focus indicator shows.
• 1.4.11 — With a contrast checker, measure the icon and the focus indicator against the background. Each is at least 3:1.
• 1.4.1 — In grayscale (DevTools > Rendering > Emulate vision deficiencies > Achromatopsia), the purpose of each colored IconButton stays clear.
• 2.5.8 — Measure size="small". The target is at least 24 × 24 CSS px, or it has enough spacing.

Done when

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

Search keywords: