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 shake for users with reduced motion preference #10094

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

joe-op
Copy link

@joe-op joe-op commented Jul 27, 2024

For users with reduced motion settings enabled, disable the CSS shake animation for invalid input.

Description

For users who prefer reduced motion, disable the shake animation for invalid input.

This setting is typically enabled at the OS level. For example, a user selects "disable animations" or "reduce motion" in their computer's Accessibility or Display settings.

The implementation uses a media query for prefers-reduced-motion to disable the shake animation.

Motivation and Context

Users with reduced motion preference enabled may have difficulty with animations.

Fixes #10041

How Has This Been Tested?

I ran the dev server, selected "Try it out" on an endpoint, and tried to submit letters in an integer field.

I first ran this with "reduce motion" disabled on my Mac, and saw that the shake animation still occurred.

I then enabled "reduce motion" on my Mac, refreshed the page, repeated the test, and saw that the shake animation did not occur.

Screenshots (if appropriate):

Checklist

My PR contains...

  • No code changes (src/ is unmodified: changes to documentation, CI, metadata, etc.)
  • Dependency changes (any modification to dependencies in package.json)
  • Bug fixes (non-breaking change which fixes an issue)
  • Improvements (misc. changes to existing features)
  • [x ] Features (non-breaking change which adds functionality)

My changes...

  • are breaking changes to a public API (config options, System API, major UI change, etc).
  • are breaking changes to a private API (Redux, component props, utility functions, etc.).
  • are breaking changes to a developer API (npm script behavior changes, new dev system dependencies, etc).
  • [ x] are not breaking changes.

Documentation

  • [x ] My changes do not require a change to the project documentation.
  • My changes require a change to the project documentation.
  • If yes to above: I have updated the documentation accordingly.

Automated tests

  • My changes can not or do not need to be tested.
  • My changes can and should be tested by unit and/or integration tests.
  • If yes to above: I have added tests to cover my changes.
  • If yes to above: I have taken care to cover edge cases in my tests.
  • [x ] All new and existing tests passed.

For users with reduced motion settings enabled, disable the CSS shake
animation for invalid input.
@joe-op joe-op force-pushed the ft/10041-reduced-motion-preference branch from c484948 to 65e09f5 Compare September 6, 2024 13:37
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 this pull request may close these issues.

Disable animations for users with reduced motion preferences
1 participant