Disable shake for users with reduced motion preference

[joe-op]

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.

[mgifford]

This is a pretty easy addition:

    @media (prefers-reduced-motion) {
        animation: none;
    }

No piece of software should be happy to know that it can make their users physically ill.

Still, I think we need more than this addition. At least I haven't seen it applied this way.

@joe-op I think this is part of the solution, but not sufficient:

https://www.smashingmagazine.com/2021/10/respecting-users-motion-preferences/

https://css-tricks.com/introduction-reduced-motion-media-query/

[joe-op]

Hi @mgifford, are you thinking of something like making the query more specific:

@media(prefers-reduced-motion: no-preference) {
    animation: shake .4s 1;
}

or a broader change, like moving the animation and the media query out of the invalidFormElement mixin?