fix(web): respect prefers-reduced-motion in ui-kit keyframes#2
Open
fix(web): respect prefers-reduced-motion in ui-kit keyframes#2
Conversation
Wraps every animation/transition in a global @media (prefers-reduced-motion: reduce) block that collapses them to a single 0.001ms tick. Each --animate-* keyframe (breathe, blink, beacon-glow, led-blink, alert-pulse) ends at its visible state, so iteration-count:1 lands users on a sane static frame instead of leaving e.g. alert-pulse stuck on a transparent border. Closes panvex-6qi (WCAG 2.3.3 / Apple HIG reduced-motion).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Closes [panvex-6qi]. WCAG 2.3.3 / Apple HIG require custom keyframe animations to honour the OS reduced-motion preference. The ui-kit declares five infinite animations (
breathe,blink,beacon-glow,led-blink,alert-pulse) that ran unconditionally.Approach
Single global
@media (prefers-reduced-motion: reduce)block at the bottom ofweb/src/ui-kit.cssthat collapses every animation/transition to one 0.001ms tick. Each of our five keyframes ends at its visible state at 100%, soiteration-count: 1lands users on a sane static frame — particularly important foralert-pulse, whose 50% keyframe istransparentborder.scroll-behavior: auto !importantalso disables programmatic smooth scrolling for the same users.Test plan
npx tsc --noEmitcleannpm run lintcleanalert-pulseborder ends visible (var(--alert-color)), not transparent🤖 Generated with Claude Code