fix(a11y): hold revealed state under the reduced-motion backstop

The global prefers-reduced-motion catch-all collapsed every animation to
near-zero duration but left animation-fill-mode at its default, so an
entrance animation whose element rests at opacity:0 and only reveals
through its keyframe snapped back to the hidden base style once the
near-instant animation completed. Under reduced motion that left charts
and list rows permanently invisible. Pin animation-fill-mode:forwards and
zero the stagger delay so the shortened reveal holds its final visible
frame and paints immediately. Per-component blocks that set animation:none
are unaffected (no animation to fill).
This commit is contained in:
Marc-André Bombeck committed 2026-06-18 17:48:41 +02:00
1 parent 15a628db47
commit 33dcf39adf
1 file changed
+12 -1
+12 -1
View File
@@ -896,13 +896,24 @@
* for reduced motion. The per-component blocks above stay — they carry
* tailored static fallbacks (static dots, full-height bars). This is the
* floor, not a replacement. Near-zero (not 0) keeps JS animation-end /
* transition-end listeners firing so state machines don't stall. */
* transition-end listeners firing so state machines don't stall.
*
* `animation-fill-mode: forwards` + `animation-delay: 0ms` are load-bearing:
* several entrance animations rest at `opacity: 0` and only become visible
* through their reveal keyframe. Without holding the end state (and without
* zeroing the stagger delay) the near-zero animation completes and the
* element snaps back to its hidden base style — leaving charts and list
* rows permanently invisible under reduced motion. Forwards pins the final
* (revealed) frame; zero delay reveals immediately. Per-component blocks
* above that set `animation: none` are unaffected (no animation to fill). */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
animation-fill-mode: forwards !important;
animation-delay: 0ms !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}