WordPress.org

Make WordPress Core

Opened 4 months ago

Closed 7 weeks ago

#53542 closed enhancement (fixed)

Honor `prefers-reduced-motion` in sliding Customizer Animations

Reported by: mikeschroder Owned by: mikeschroder
Milestone: 5.9 Priority: normal
Severity: normal Version: 5.8
Component: Customize Keywords: has-patch
Focuses: accessibility, css Cc:

Description (last modified by mikeschroder)

While looking into this Gutenberg issue, I noticed that the transitions between sections in the Customizer seem to slide, whether or not I enable "Reduced Motion" in the OS, as described here.

Support for prefers-reduced-motion looks to be included in some other areas of WordPress, but not honored here.

Videos with Reduce Motion Disabled and Enabled attached (the behavior is the same).

Attachments (3)

Reduce Motion Disabled.mov (453.1 KB) - added by mikeschroder 4 months ago.
Reduce Motion Disabled
Reduce Motion Enabled.mov (786.0 KB) - added by mikeschroder 4 months ago.
Reduce Motion Enabled
Motion Disabled Mockup.mov (435.1 KB) - added by mikeschroder 4 months ago.
Mockup video of expected behavior with Reduce Motion enabled

Download all attachments as: .zip

Change History (13)

@mikeschroder
4 months ago

Reduce Motion Disabled

@mikeschroder
4 months ago

Reduce Motion Enabled

#1 @mikeschroder
4 months ago

  • Description modified (diff)

@mikeschroder
4 months ago

Mockup video of expected behavior with Reduce Motion enabled

#2 @dlh
4 months ago

  • Milestone changed from Awaiting Review to 5.9

This sounds to me like a great, focused enhancement to try for in 5.9.

#3 @mikeschroder
3 months ago

In 51389:

Customizer: Skip animations when they have no duration.

In addition to skipping animations when a related style doesn't Exist, now checks to see if animation styles are Empty as well.

This resolves a case where the Gutenberg End to End tests were failing, due to running with animations disabled.

This change should also help some users who are intentionally overriding styles to remove animations.

See https://github.com/WordPress/gutenberg/issues/32024 for the original Gutenberg issue.

Props zieladam, isabel_brison, kevin940726, desrosj, mikeschroder.
Fixes #53562.
See #53542.

This ticket was mentioned in PR #1608 on WordPress/wordpress-develop by kevin940726.


8 weeks ago

  • Keywords has-patch added; needs-patch removed

Respect prefers-reduced-motion: reduce in the customizer.

https://user-images.githubusercontent.com/7753001/130192900-a2b47af0-8163-4e2d-a1e9-bfaa8bbb05be.mp4

Test steps:

  1. Enable reduce motion in your OS settings (macOS for instance)
  2. Visit Appearance -> Customize
  3. Click around different sections and panels
  4. There should be no transition nor animation effects
  5. Focus should not lost when expanding sections
  6. Everything should work fine when disabling reduce motion too

Trac ticket: https://core.trac.wordpress.org/ticket/53542

#5 @prbot
8 weeks ago

kevin940726 commented on PR #1608:

@tellthemachines Good catch! I don't think it's too much of an issue but I pushed a fix anyway :).

#6 @mikeschroder
8 weeks ago

Nice, thank you @kevin940726!

Tested PR #1608 and it works as expected.

#7 @mikeschroder
8 weeks ago

@dlh How does PR #1608 look to you?

#8 @dlh
7 weeks ago

Looks good to me!

#9 @mikeschroder
7 weeks ago

@dlh Cool, thank you much for the review!

Unless anyone thinks otherwise, I'll plan on handling a commit for this tomorrow.

#10 @mikeschroder
7 weeks ago

  • Owner set to mikeschroder
  • Resolution set to fixed
  • Status changed from new to closed

In 51677:

Customizer: Respect prefers-reduced-motion media query in Customizer animations.

Disables Customizer animations when media query prefers-reduced-motion: reduce returns true.

Continues the effort to reduce motion within the WordPress admin panel when users have enabled this feature in their operating system or browser.

It has the additional effect of making the Block Editor's end-to-end tests run faster, as explored initially with a different approach in #53562.

See https://github.com/WordPress/gutenberg/issues/32024 for the related Gutenberg issue.

See https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion for ways to enable this feature on various platforms.

Props kevin940726, isabel_brison, zieladam, youknowriad, desrosj, mamaduka, mikeschroder.
Previously [51389], [50028], [47813].
Fixes #53542.

Note: See TracTickets for help on using tickets.