Fix reduced-motion accessibility across DevTrack motion surfaces#1444
Conversation
|
@DiyaRathod-16 is attempting to deploy a commit to the PRIYANSHU DOSHI's projects Team on Vercel. A member of the Team first needs to authorize it. |
GSSoC Label Checklist 🏷️@Priyanshu-byte-coder — please apply the appropriate labels before merging: Difficulty (pick one):
Quality (optional):
Validation (required to score):
|
|
Hi! Your PR has merge conflicts with the current git fetch upstream
git rebase upstream/main
# resolve any conflicts
git push --force-with-lease origin your-branchOnce resolved, we'll merge it in. Thanks! |
50417f6 to
c97ec7d
Compare
a9ee73e
into
Priyanshu-byte-coder:main
|
🎉 Merged! Thanks for contributing to DevTrack. If the project has been useful to you, a ⭐ star on the repo is the easiest way to support it — it helps DevTrack get discovered by more developers. Keep an eye on open issues for your next contribution! |
|
@Priyanshu-byte-coder |
Hi @Priyanshu-byte-coder
Summary:
This PR fixes DevTrack’s reduced-motion accessibility behavior so the app respects users who set prefers-reduced-motion: reduce in their OS or browser. The change reduces or disables non-essential movement across the main motion surfaces in the app, including the landing ticker, entrance animations, counters, and hover transforms.
What changed:
Added a global reduced-motion media query in globals.css to suppress animation and transition motion site-wide for users who prefer reduced motion.
Disabled the landing ticker animation so the scrolling commit strip no longer moves for reduced-motion users.
Forced fade-up content to render immediately so content is never left hidden behind an entrance animation.
Updated the landing-page counter in LandingPage.tsx so numeric animations resolve instantly when reduced motion is enabled.
Guarded the remaining hover scale behavior in DeveloperPersona.tsx so the card motion stays motion-safe.
Kept the existing motion-aware hook behavior aligned with the accessibility preference instead of relying on CSS alone.
Why this matters:
This addresses the motion-triggering behavior reported in the issue and improves accessibility for users with vestibular sensitivity, migraines, or motion sickness.
It follows WCAG 2.2 guidance for respecting prefers-reduced-motion and avoids forcing non-essential animation on users who explicitly opted out.
Validation:
Verified the updated files for errors after the changes.
Confirmed the diyacommits branch is pushed to the forked repository.