[a11y][TableSortLabel] Assess WCAG 2.2 conformance #49432

Context

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

Focus on aria-sort on the header cell (4.1.2), the sort direction that only the icon shows (1.1.1, 1.4.1) and the contrast of the sort icon (1.4.11).

Scope

1. Add axe tests and fixtures in test/regressions/a11y/fixtures/.
2. Write TableSortLabel/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 to a TableSortLabel, then press Enter and Space. The sort order changes.
• 4.1.2 — With a screen reader, sort a column. The column header announces "sorted ascending" or "sorted descending". This needs sortDirection on the TableCell.
• 1.1.1, 1.4.1 — The sort direction is available as text, for example a visually hidden "sorted descending", not only as the arrow icon.
• 1.4.11 — With a contrast checker, measure the arrow icon in the active state and in the hover state. Each is at least 3:1.
• 2.4.7 — The focused TableSortLabel shows a visible focus indicator.

Done when

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

Search keywords: