USWDS - Core: Add transition utility with reduced motion preference handling

[aduth]

Summary

Animated transitions now respect the system's reduced motion preference. A new transition utility handles default behavior for easing and disabling inessential animation.

Breaking change

This is not a breaking change.

Related issue

Closes #5256

Preview link

• Tooltip
• Skipnav
• Modal

In local Storybook, can be previewed at:

• http://localhost:6006/?path=/story/components-tooltip--tooltip
• http://localhost:6006/?path=/story/components-skipnav--skipnav
• http://localhost:6006/?path=/story/components-modal--default

Problem statement

As a user who may be distracted or experience harm such as nausea due to animated content, I expect that the U.S. Web Design System will respect my preference to experience reduced motion where possible.

Related:

• WCAG Success Criterion 2.3.3: Animation from Interactions (Level AAA)

Solution

Adds a new utility u-transition with smart defaults to handle:

• Default easing
• Optional $essential argument (default false) to control whether transition is disabled when reduced motion is preferred

Related:

• WCAG Technique C39: Using the CSS reduce-motion query to prevent motion

Testing and review

See "Preview links" above.

Unless system preferences are configured to prefer reduced motion, there should be no changes in the appearance of animated transition effects.

Instructions for configuring reduced motion preference:

• macOS: https://support.apple.com/guide/mac-help/stop-or-reduce-onscreen-motion-mchlc03f57a1/mac
• Other: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#user_preferences

---

Before opening this PR, make sure you’ve done whichever of these applies to you:

• Confirm that this code follows the 18F Front End Coding Style Guide and Accessibility Guide.
• Run git pull origin [base branch] to pull in the most recent updates from your base and check for merge conflicts. (Often, the base branch is develop).
• Run npm run prettier:sass to format any Sass updates.
• Run npm test and confirm that all tests pass.
• Run your code through HTML_CodeSniffer and make sure it’s error free.

[aduth]

This addresses all transition styles in stylesheets. I discovered there's also one use of animation which should probably similarly be disabled when reduced motion is preferred.

uswds/packages/usa-nav/src/styles/_usa-nav.scss

Line 103 in 0cf7c7e

animation: slidein-left 0.3s ease-in-out;

A couple ideas:

• We could create a u-animation mixin very similar to what's introduced here with u-transition
• Alternatively, we could refactor the approach to either inline the media-query, or introduce a mixin which wraps @content with @media not(prefers-reduced-motion)

[mejiaj]

I've created a local branch to get the previews and added them to the description.

• Tooltip
• Skipnav
• Modal

You might have to refresh the page if component isn't working

CC @uswds/a11y

[mejiaj]

@aduth thanks for submitting this! I've tested with both Reduce motion settings and everything looks good. Minor suggestion for SASSDoc mixin.

I personally, prefer reducing motion.

---

I also want to make sure I'm understanding the second point in this comment correctly.

• Alternatively, we could refactor the approach to either inline the media-query, or introduce a mixin which wraps @content with @media not(prefers-reduced-motion)

Do you mean inline prefers-reduced-motion strictly for this single animation? If so, it seems fair to add it inline because:

1. We're not using many animations and it seems unnecessary to create a mixin for this
2. The animation itself is only found in this file
3. We already have several other media queries in usa-nav, so wouldn't look out of place

[aduth]

Do you mean inline prefers-reduced-motion strictly for this single animation? If so, it seems fair to add it inline because:

Yep, that's what I meant. I agree that -- at least in the short term -- adding the media query to the existing style is the most direct option. Maybe an extra mixin could be added in the future.

Updated in 6ca2a6f.

[mahoneycm]

This is great! This will benefit users and developers alike. Thanks @aduth

Left a couple comments for additional considerations but nothing blocking

[mahoneycm]

thought: We should consider adding guidance to our Utilities pages to document this new utility for users.

[aduth]

Just to clarify, this would be a separate pull request in the uswds-site repository, correct?

[mejiaj]

@mahoneycm I can see that, but transitions in USWDS are new and aren't used often. There's not even a dedicated page on the website, so this might be a bigger level of effort than we expect.

I would wait until we a strategy for USWDS animations and transitions as a whole.

[mahoneycm]

@aduth correct! Just wanted to flag for internal discussion.

@mejiaj right, just noting we have utility pages that capture the rest of the available utilities, so it's worth discussing if we want to create guidance for this utility in the future

[mahoneycm]

Praise: $essential is a nice touch! Matches w3c guidance and allows this utility to be very resilient. Thanks!

[mejiaj]

Thanks for the quick updates!