View-Transitions: Respect prefers-reduced-motion settings

[mediaformat]

Summary

Fixes #2067

Relevant technical choices

Wrapped the initializing @view-transition inline style with a check for prefers-reduced-motion: no-preference, so that the animation effects are NOT applied if prefers-reduced-motion is true.

Screen.Recording.2025-06-25.at.1.34.12.PM.mov

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: mediaformat <mediaformat@git.wordpress.org>
Co-authored-by: westonruter <westonruter@git.wordpress.org>
Co-authored-by: felixarntz <flixos90@git.wordpress.org>
Co-authored-by: joedolson <joedolson@git.wordpress.org>
Co-authored-by: amberhinds <alh0319@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[westonruter]

LGTM

[felixarntz]

@mediaformat Thank you for creating the PR. You are raising a great point in that we need to figure out how to respect accessibility preferences in regards to view transitions. That said, I think there needs to be a bit more discussion on how to approach it the best way, so I'm marking this as requesting changes only to make sure we can make an educated decision. To me, the approach of wrapping with prefers-reduced-motion could work, but I would like to get additional accessibility experts to weigh in on the approach.

Let's discuss on the issue before proceeding here.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 67.14%. Comparing base (714dd71) to head (b213343).
Report is 3 commits behind head on trunk.

Additional details and impacted files

@@           Coverage Diff           @@
##            trunk    #2068   +/-   ##
=======================================
  Coverage   67.14%   67.14%           
=======================================
  Files          93       93           
  Lines        7740     7740           
=======================================
  Hits         5197     5197           
  Misses       2543     2543           

Flag	Coverage Δ
multisite	67.14% <100.00%> (ø)
single	36.53% <0.00%> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[mediaformat]

So my technical suggestion would be:

• Leave the default fade view transition as is.
• If any view transition animation other than the default is active, wrap its CSS code so that it only applies to users without prefers-reduced-motion.
• Similarly, for the control over the transition duration (see Allow control over view transition animation duration #2040) that CSS should only be applied to users without prefers-reduced-motion too.

@felixarntz updated with discussed changes, wrapping the injected transition stylesheets with a prefers-reduced-motion: no-preference

[felixarntz]

@mediaformat Thanks, this looks great!

Now that #2051 (and #2078) was merged, this has a merge conflict, but it should be straightforward to fix. As discussed on the issue, we'll need to wrap the animation duration code as well.

I think you can simply move the change here to the updated line where the code adds the $default_animation_stylesheet inline style.

[felixarntz]

@mediaformat Thank you for the iterations, LGTM!