vzxipsule: Silence the carousel live region while it rotates and pause it on keyboard focus

This commit is contained in:
2026-10-19 22:31:56 -06:00
parent ce1a3e2eaa
commit cf45072f27
4 changed files with 49 additions and 11 deletions
+3 -2
View File
@@ -130,7 +130,8 @@ A compact spotlight that moves on its own. Nobody has to click or swipe. These a
- Every 2.8 seconds the next expert moves to the center with a 1.1s ease.
- Below: the name in serif, the byline, the rating and review count. The caption fades up on each change.
- Progress dots: the active one is a crimson bar. A counter ("3 / 10") sits in the panel header.
- Hover pauses the rotation. `prefers-reduced-motion` stops autoplay.
- Hover, or keyboard focus inside the carousel, pauses the rotation. `prefers-reduced-motion` stops autoplay.
- Live region (WAI-ARIA carousel pattern): `aria-live="off"` while autoplay is rotating, so slides are not announced every 2.8 seconds; `aria-live="polite"` when rotation is paused (hover or focus) or stopped (reduced motion, or a single expert).
### Trending minnects
@@ -198,7 +199,7 @@ All sheets slide up from the bottom (450ms) over a dimmed, slightly blurred back
- Every control is a real `<button>`, `<a>` or `<input>` with a label. Icon-only buttons have `aria-label`.
- The like button uses `aria-pressed` and labels its count. Comments toggles use `aria-expanded`.
- The carousel region is `aria-live="polite"`. The non-center items are `aria-hidden`.
- The carousel region follows the WAI-ARIA carousel pattern: `aria-live="off"` while autoplay rotates, `aria-live="polite"` while rotation is paused by hover or keyboard focus, or stopped by reduced motion. Keyboard focus inside the carousel pauses it. The non-center items are `aria-hidden`.
- Visible focus ring on every control, `--ink` colored.
- Touch targets at least 44px on mobile.