feat(a11y): WCAG AA polish on the site onboarding flow
🔍 Lint / 🪄 Check lint (pull_request) Has been cancelled
🔍 Lint / 🎨 Check format (pull_request) Has been cancelled
🔍 Lint / 🔎 Typecheck (pull_request) Has been cancelled
📊 Quality / 🔒 Security Audit (pull_request) Has been cancelled
📊 Quality / 📋 Dependency Freshness (pull_request) Has been cancelled
📊 Quality / 📦 Bundle Size (pull_request) Has been cancelled
🔍 Lint / 🏗 Build (pull_request) Has been cancelled

- index.css: add visible :focus-visible rings for .site-card-button
  and .site-button so keyboard users can see where focus lives
- SiteCard: drop outline:none, add aria-pressed and aria-label so
  screen readers announce selection state
- SiteButton: add the .site-button class for the shared focus ring
- SiteDisclaimerScreen: keyboard skip via Enter / Space / Escape, a
  role="region" + aria-label wrapper and aria-live="polite" on the
  message; honour prefers-reduced-motion on the fade
- IntroVideoPlayer: role="region" with a skip hint in aria-label,
  preload="auto", and aria-hidden on the decorative caption span
This commit is contained in:
Tom Boullay
2026-05-30 18:44:03 +02:00
parent 07b09c22af
commit 970adf4853
5 changed files with 52 additions and 32 deletions
+12
View File
@@ -44,6 +44,18 @@ select {
font: inherit;
}
/* Site onboarding — accessible focus rings (WCAG 2.4.7) */
.site-card-button:focus-visible,
.site-button:focus-visible {
outline: 3px solid #ffffff;
outline-offset: 3px;
box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.55);
}
.site-card-button[aria-pressed="true"]:focus-visible {
outline-color: #a8d5a2;
}
canvas {
display: block;
}