a11y: prefers-reduced-motion not respected — animations fire unconditionally (WCAG 2.3.3) #33

New issue

Closed

opened 2026-04-08 06:43:14 -07:00 by pyr0ball · 0 comments

pyr0ball commented

2026-04-08 06:43:14 -07:00

Owner

theme.css defined .slide-up, .fade-in, .spinner, kiwi bird walk, and neon-mode animations with no @media (prefers-reduced-motion: reduce) guard. The cascade of simultaneous slide-up animations on recipe card load is a vestibular disorder trigger and sensory overwhelm risk.

Fixed: Global block added to theme.css:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Easter egg animations (kiwi bird, neon mode) should also check window.matchMedia('(prefers-reduced-motion: reduce)').matches in JS — tracked separately.

Refs: HIGH-W8, HIGH-N4

theme.css defined `.slide-up`, `.fade-in`, `.spinner`, kiwi bird walk, and neon-mode animations with no `@media (prefers-reduced-motion: reduce)` guard. The cascade of simultaneous `slide-up` animations on recipe card load is a vestibular disorder trigger and sensory overwhelm risk. **Fixed:** Global block added to theme.css: ```css @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } ``` Easter egg animations (kiwi bird, neon mode) should also check `window.matchMedia('(prefers-reduced-motion: reduce)').matches` in JS — tracked separately. **Refs:** HIGH-W8, HIGH-N4