[Block Library]: A11y - Add and Update missing reduce-motion mixing

[Mayank-Tripathi32]

Part of #68282

What?

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

Why?

Currently, many parts of the codebase do not consider users' motion preferences, which may not be ideal for those with reduced motion settings. This PR addresses and fixes that issue.

How?

This PR updates the old reduce-motion mixin implementation and addresses missing cases to adopt the new approach outlined in the parent issue.

	@media not ( prefers-reduced-motion ) {
			transition: opacity 0.1s linear;
		}

Standard adopted from @wordpress/components

Navigation Block

Testing Instructions

1. Open the Block Editor

   • Navigate to the WordPress Block Editor.

2. Add a Navigation Block

   • Insert a Navigation block.
   • Create a menu and include submenus and nested submenus.

3. Test Normal Behavior

   • Hover over the submenu and nested submenus.
   • Observe the opening and closing animations/transitions.

4. Test with Reduced Motion Preference

   • Enable the "Reduced Motion" preference:
     • Open Chrome DevTools.
     • Go to More Tools > Rendering.
     • Under "Emulate CSS media feature prefers-reduced-motion," select Reduce.
   • Repeat the tests:
     • Hover over the submenu and nested submenus.
     • Observe the behavior to ensure animations are disabled or minimized as expected.

5. Disable Reduced Motion Preference

   • Turn off the "Reduced Motion" preference in DevTools.
   • Verify that all original animations and transitions work correctly.

Screencast

(its hard to notice the difference, because its only 0.1s.)

Test-navigation-motion.mp4

Test-navigation-fr.mp4

Social Block

Testing Instructions

1. Open the Block Editor

   • Navigate to the WordPress Block Editor.

2. Add a Social Block

   • Insert a Social block.
   • Add a few icons.

3. Test Normal Behavior

   • Hover over the icons.
   • Observe the zoom in and out animations/transitions.

4. Test with Reduced Motion Preference

   • Enable the "Reduced Motion" preference:
     • Open Chrome DevTools.
     • Go to More Tools > Rendering.
     • Under "Emulate CSS media feature prefers-reduced-motion," select Reduce.
   • Repeat the tests:
     • Hover over the icons.
     • Observe the behavior to ensure animations are disabled or minimized as expected.

5. Disable Reduced Motion Preference

   • Turn off the "Reduced Motion" preference in DevTools.
   • Verify that all original animations and transitions work correctly.

Screencast

Socal.block.mp4

Gallery Block

Considerations

The code is largely deprecated, so I'm unsure if this PR is necessary, especially since we might be cleaning up the CSS soon.

FreeForm Block (classic editor)

Screencast

freeform.test.mp4

Image Block

1. Open the Block Editor

   • Navigate to the WordPress Block Editor.

2. Add an Image Block

   • Insert an Image block and upload an image.

3. Enable the Lightbox Feature

   • In the block settings, enable the Lightbox feature.

4. Test Normal Behavior

   • Click on the image to open the Lightbox.
   • Observe the opening and closing animations.
   • Test the zoom functionality.

5. Test with Reduced Motion Preference

   • Enable the "Reduced Motion" preference:
     • Open Chrome DevTools.
     • Go to More Tools > Rendering.
     • Under "Emulate CSS media feature prefers-reduced-motion," select Reduce.
   • Repeat the tests:
     • Click on the image to open the Lightbox.
     • Verify that the Lightbox opens and closes without animations.
     • Ensure there are no zoom animations.

6. Disable Reduced Motion Preference

   • Turn off the "Reduced Motion" preference in DevTools.
   • Verify that all original animations, including opening/closing and zoom, work correctly.

[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: Mayank-Tripathi32 <[email protected]>
Co-authored-by: himanshupathak95 <[email protected]>
Co-authored-by: t-hamano <[email protected]>

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

[t-hamano]

Thanks for the PR!

• Isn't this PR only for the block-library package? The block-editor package is being worked on in [Block Editor]: A11y - Add and Update missing reduce-motion mixing #68417, right?
• The following PRs are included in this PR, so can we close them?
  • [Social Block]: A11y - Add and Update missing reduce-motion mixing #68414
  • [Gallery Block]: A11y - Add and Update missing reduce-motion mixing - mostly depreciated #68415
  • [FreeForm Block]: A11y - Add and Update missing reduce-motion mixing #68416

[t-hamano]

@Mayank-Tripathi32 I noticed that #68315 about the block-library package has already been submitted. Sorry, I will close this PR.

As for the block-editor package, let's move forward with #68417.