[a11y][CardActionArea] Assess WCAG 2.2 conformance #49444

Context

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

CardActionArea uses ButtonBase, so reuse the Button evidence. Focus on the accessible name of a large clickable area (4.1.2, 2.5.3), nested interactive content (4.1.2) and the focus indicator (2.4.7, 1.4.11).

Scope

1. Add axe tests and fixtures in test/regressions/a11y/fixtures/.
2. Write CardActionArea/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, 2.4.6 — With a screen reader, press Tab to a CardActionArea. Record the full name that the screen reader announces. A long name made from all the content is hard to use.
• 4.1.2 — Put a button inside the CardActionArea. Record that the screen reader and the keyboard cannot reach it correctly. The author must not nest interactive content.
• 2.1.1 — Enter activates the CardActionArea.
• 2.4.7, 1.4.11 — The focus highlight is visible. Measure it against the Card. Record the ratio. The tint is probably below 3:1.

Done when

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

Search keywords: