A11y: Update animation/transition styles with reduced motion media queries

[himanshupathak95]

Part of: #68282

What?

Refactors animation and transition styles to use @media not (prefers-reduced-motion) ensuring better accessibility for users who prefer reduced motion.

Why?

Currently, many places in the codebase do not account for user's motion preferences. This might not be correct for user's having reduced motion preferences. This PR fixes that.

Testing Instructions

1. Open the Block Editor

2. Add an Image block and upload an image

3. Enable the lightbox feature in block settings

4. Test normal behavior:

   • Click to open Lightbox
   • Observe opening/closing animations
   • Test zoom functionality

5. Test with reduced motion preference:

   • Enable "Reduced motion" preference:
     • Chrome DevTools: Open DevTools > More Tools > Rendering > "Emulate CSS media feature prefers-reduced-motion" > select "reduce"
   • Repeat the above tests
   • Verify that:
     • Lightbox opens/closes without animation
     • No zoom animations occur

6. Disable reduced motion and verify all original animations work correctly

Screencast

Screen.Recording.2024-12-26.at.15.53.49.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: himanshupathak95 <[email protected]>

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

[himanshupathak95]

Hey @t-hamano!

Updated the animation handling to follow user preferences. Let me know if this is what you had in mind. Thanks!

[t-hamano]

Thanks for the PR! Two pieces of feedback from me:

• It would be better to use @media not ( prefers-reduced-motion ) instead of @media (prefers-reduced-motion: no-preference). See this comment. Furthermore, it would be good if you could update existing @media (prefers-reduced-motion: no-preference).
• Does this PR only target the Image block? Or does it target the @wordpress/block-library? If it is the latter, it would be good to check other blocks as well.