[a11y][Chip] Assess WCAG 2.2 conformance #49414

Context

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

Check the roles of clickable and static chips (4.1.2), the keyboard behavior of the delete action (2.1.1), the name of the delete icon (1.1.1) and the target size of the delete icon (2.5.8).

Scope

1. Add axe tests and fixtures in test/regressions/a11y/fixtures/.
2. Write Chip/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 deletable chip, then press Backspace or Delete. The chip is removed. A clickable chip activates with Enter and Space.
• 4.1.2 — With a screen reader, focus a clickable chip. It announces "button" and its label. A static chip is not in the Tab order.
• 1.1.1 — With a screen reader, the delete icon is silent. Record how a screen-reader user learns that the chip can be deleted.
• 2.4.3 — Delete a chip with the keyboard. Record where focus goes. Focus must not go to the top of the page.
• 2.5.8 — Measure the delete icon on a size="small" chip. It is at least 24 × 24 CSS px, or it has enough spacing.
• 1.4.3, 1.4.11 — With a contrast checker, measure the label for each color and variant. Also measure the outlined border. The label is at least 4.5:1, and the border is at least 3:1.

Done when

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

Search keywords: