Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Disable animations for users with reduced motion preferences #10041

Open
joe-op opened this issue Jun 21, 2024 · 0 comments · May be fixed by #10094
Open

Disable animations for users with reduced motion preferences #10041

joe-op opened this issue Jun 21, 2024 · 0 comments · May be fixed by #10094

Comments

@joe-op
Copy link

joe-op commented Jun 21, 2024

Is your feature request related to a problem?

Motion animations in CSS are not disabled when the media query prefers-reduced-motion is true (i.e., the user has indicated at the OS or some other level that they want animations disabled). The invalid input indicator in "Try it out" in particular has a prominent shake effect.

Describe the solution you'd like

Animations such as "shake" are disabled when prefers-reduced-motion is true.

@media(prefers-reduced-motion) {
  .class-typically-animated {
    animation: none;
  }
}

Describe alternatives you've considered

The media query can be overridden after importing swagger-ui CSS, but this is fragile and the end user depends on the developer of the API to implement it.

Additional context

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion

@joe-op joe-op linked a pull request Jul 27, 2024 that will close this issue
13 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant