[a11y][AppBar] Assess WCAG 2.2 conformance #49445

Context

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

Include Toolbar. Focus on the banner landmark (1.3.1), the contrast of the color variants (1.4.3), 2.4.11 Focus Not Obscured (fixed and sticky AppBar over focused content) and 1.4.10 Reflow.

Scope

1. Add axe tests and fixtures in test/regressions/a11y/fixtures/.
2. Write AppBar/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.

• 1.3.1 — With a screen reader, list the landmarks. The AppBar shows as the banner landmark. A page with more than one AppBar has more than one banner. Record this.
• 2.4.11 — With position="fixed" and "sticky", press Tab through the page while it scrolls. The AppBar does not fully hide a focused element. Record if the author must set scroll-padding-top.
• 1.4.3 — With a contrast checker, measure the title and the icons for each color, in light and dark mode, and with enableColorOnDark. The text is at least 4.5:1.
• 1.4.10 — At 320 CSS px width, the Toolbar content stays usable, and the page does not scroll horizontally.
• 1.4.4 — At 200% zoom, the title and the actions are fully visible.

Done when

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

Search keywords: