Skip to content

App-wide transitions and hover animations never respect prefers-reduced-motion #258

Description

@chonilius

Across the app, hover/theme transitions are applied unconditionally with no
prefers-reduced-motion guard anywhere in src/app/globals.css or the Tailwind
utility classes used throughout the components:

/* globals.css */
body {
  transition: background-color 0.2s ease, color 0.2s ease;
}
// BountyCard.tsx
className="... transition-all ... hover:-translate-y-0.5 hover:shadow-md ..."

// Navbar.tsx's "Dashboards" dropdown
className="... transition-all group-hover:visible group-hover:opacity-100"

None of these are wrapped in, or overridden by, a @media (prefers-reduced-motion: reduce)
block. A visitor who has explicitly set their OS/browser preference to reduce motion
(a real, common accessibility accommodation for vestibular disorders and motion
sensitivity) still gets every hover-lift animation on every bounty card, every theme
transition, and every dropdown fade, exactly as if no such preference were set —
globals.css never queries it at all.

Suggested fix: add a @media (prefers-reduced-motion: reduce) block in globals.css
that disables/shortens transitions and transforms globally (e.g. forcing
transition-duration: 0.01ms !important on *), so users who've opted out of motion at
the OS level actually get a reduced-motion experience.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

Stellar WaveIssues in the Stellar wave programaccessibilityAccessibility (a11y) issuebugSomething isn't workinghelp wantedExtra attention is neededvery hardVery difficult task, expert-level effort required

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions