[a11y][Dialog] Assess WCAG 2.2 conformance #49416

Context

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

Assess Dialog first in this wave. Focus trap, focus restore and labelling come from Modal. Drawer, Popover, Menu and Select reuse this evidence, so write the Modal findings so that later reports can refer to them.

Focus on 2.1.2 No Keyboard Trap (Escape closes), 2.4.3 Focus Order (initial focus and focus restore), 2.4.11 Focus Not Obscured, 4.1.2 (role="dialog", aria-modal, aria-labelledby with DialogTitle) and 1.4.10 Reflow (full-screen dialogs at 320 px).

Scope

1. Add axe tests and fixtures in test/regressions/a11y/fixtures/.
2. Write Dialog/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.4.3 — Open the Dialog with the keyboard. Focus moves into the Dialog. Close it. Focus goes back to the trigger.
• 2.1.2 — Press Tab and Shift+Tab past the last and the first element. Focus stays in the Dialog. Escape closes the Dialog.
• 4.1.2 — With a screen reader, open the Dialog. The screen reader announces "dialog", the DialogTitle as the name and, if set, the description.
• 1.3.1 — With NVDA browse mode and the VoiceOver rotor, try to read the page behind the Dialog. The background content is not reachable.
• 2.4.11 — In a Dialog with scrolling content, press Tab to each element. The DialogTitle and DialogActions do not fully hide a focused element.
• 1.4.10 — At 320 CSS px width (or 400% zoom), the Dialog and the fullScreen Dialog scroll vertically only, and no content is lost.
• 1.4.4 — At 200% page zoom, the title, the content and the actions are fully visible.

Done when

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

Search keywords: