USWDS - Feature: Add support for prefers-reduced-motion to disable transitions

[aduth]

Is your feature request related to a problem? Please describe.

Some users who experience distraction or nausea from animated content may specify system preferences to express their desire for reduced motion to eliminate inessential animation. The U.S. Web Design System should ideally respect this preference to disable transitions which are inessential (e.g. mobile menu flyout animation).

Describe the solution you'd like

When the @media (prefers-reduced-motion) media feature is present for a user, the USWDS $project-easing variable should effectively be set to 0.

Describe alternatives you've considered

No response

Additional context

• prefers-reduced-motion MDN documentation
• WCAG Technique C39: Using the CSS reduce-motion query to prevent motion
• web.dev article: prefers-reduced-motion: Sometimes less movement is more

Code of Conduct

• I agree to follow this project's Code of Conduct.
• I checked the current issues for duplicate feature requests.

[aduth]

A couple additional notes:

• It may not be enough to just affect $project-easing, since there are some animations which don't use this (example)
• One implementation option could be a global style which implements a reset, which would be easy, but could conflict with a site's own custom styles (though likely not in a way which would be unexpected for the end-user)
• This can also be useful for integration testing environments to avoid issues where the test may otherwise need to wait for the animations to finish before proceeding (example in our project)

[aduth]

Looks like #5067 would address the part of this affecting the mobile navigation menu (cc @jkjustjoshing)