[a11y][ListItemButton] Assess WCAG 2.2 conformance #49437

Context

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

ListItemButton uses ButtonBase, so reuse the Button evidence. Focus on the selected state (aria-current or aria-selected, 4.1.2), the contrast of the selected and focus states (1.4.11) and nested navigation lists (1.3.1, 2.4.3).

Scope

1. Add axe tests and fixtures in test/regressions/a11y/fixtures/.
2. Write ListItemButton/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 — With a screen reader, focus a ListItemButton and a ListItemButton with component="a". They announce "button" and "link".
• 4.1.2 — Focus a selected item. Record what the screen reader announces. The author must add aria-current or aria-selected.
• 4.1.2 — In a nested list, the parent button announces "expanded" or "collapsed" when the author sets aria-expanded.
• 1.4.1 — In grayscale, the selected item stays distinguishable.
• 2.4.7, 1.4.11 — Press Tab to an item. Measure the focus and selected backgrounds. Record the ratios. The tint is probably below 3:1.
• 2.5.8 — Measure a dense item. Its height is at least 24 CSS px.

Done when

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

Search keywords: