From 7dd675539225553aa74ac3d4b96f737139de528e Mon Sep 17 00:00:00 2001 From: xRangerDE Date: Mon, 11 May 2026 07:51:23 +0200 Subject: [PATCH] =?UTF-8?q?a11y:=20respect=20prefers-reduced-motion=20?= =?UTF-8?q?=E2=80=94=20suppress=20all=20animations/transitions?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The app had no @media (prefers-reduced-motion: reduce) rule, meaning users with the OS-level "Reduce motion" setting enabled still got the full animation set: the empty-state floating SVG (4s infinite), the btn-icon-spin on Refresh hover, the vod-bulk-bar slide-in, the storyboard fade-in, and the ~6 transition: all declarations scattered across button hover states. For users with vestibular disorders this is real discomfort, not aesthetic preference. Windows 11 and macOS both expose the setting via Settings > Accessibility, and the media query is the standard way to honour it from CSS. Added the conventional reduce-motion block at the bottom of styles.css: - animation-duration: 0.01ms (effectively instant) - animation-iteration-count: 1 (kills infinite loops) - transition-duration: 0.01ms (state changes are immediate) - scroll-behavior: auto (kills smooth-scroll) All hover/state changes still happen — they just snap rather than animate. No feature is lost. Co-Authored-By: Claude Opus 4.7 (1M context) --- src/styles.css | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/src/styles.css b/src/styles.css index 267025e..cc05154 100644 --- a/src/styles.css +++ b/src/styles.css @@ -4359,3 +4359,27 @@ input[type="number"]::-webkit-outer-spin-button { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.18) 100%); pointer-events: none; } + +/* ============================================ + REDUCED MOTION — respect OS-level user preference + ============================================ + Users who set "Reduce motion" in their OS accessibility settings + (Windows: Settings > Accessibility > Visual Effects > Animation + effects; macOS: System Settings > Accessibility > Display > Reduce + motion) get animations and transitions effectively disabled. + + Suppresses things like the empty-state-float loop, the btn-icon-spin + on Refresh hover, the vod-bulk-bar slide-in, the storyboard fade-in, + and the multitude of transition: all 0.2s declarations — anything + that involves motion. Critical for users with vestibular disorders + and a baseline accessibility expectation in 2025. */ +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } +}