Administrator/Twitch-VOD-Manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 212 Wiki Activity

a11y: respect prefers-reduced-motion — suppress all animations/transitions

Browse Source 
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) <noreply@anthropic.com>
This commit is contained in:
xRangerDE 2026-05-11 07:51:23 +02:00
parent 02b61c7ea4
commit 7dd6755392
1 changed files with 24 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/styles.css
View File

@ -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;
}
}