Make WordPress Core

Opened 3 years ago

Closed 2 years ago

Last modified 2 years ago

#53542 closed enhancement (fixed)

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

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

Description (last modified by kirasong)

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 (453.1 KB) - added by kirasong 3 years ago.
Reduce Motion Disabled
Reduce Motion (786.0 KB) - added by kirasong 3 years ago.
Reduce Motion Enabled
Motion Disabled (435.1 KB) - added by kirasong 3 years ago.
Mockup video of expected behavior with Reduce Motion enabled

Download all attachments as: .zip

Change History (14)

3 years ago

Reduce Motion Disabled

3 years ago

Reduce Motion Enabled

#1 @kirasong
3 years ago

  • Description modified (diff)

3 years ago

Mockup video of expected behavior with Reduce Motion enabled

#2 @dlh
3 years 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 @kirasong
3 years 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 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.

3 years ago

  • Keywords has-patch added; needs-patch removed

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

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:

kevin940726 commented on PR #1608:

3 years ago

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

#6 @kirasong
3 years ago

Nice, thank you @kevin940726!

Tested PR #1608 and it works as expected.

#7 @kirasong
3 years ago

@dlh How does PR #1608 look to you?

#8 @dlh
3 years ago

Looks good to me!

#9 @kirasong
3 years ago

@dlh Cool, thank you much for the review!

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

#10 @kirasong
2 years 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 for the related Gutenberg issue.

See 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.