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

[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).

[kirasong]

Reduce Motion Disabled

[kirasong]

Reduce Motion Enabled

[kirasong]

Mockup video of expected behavior with Reduce Motion enabled

[dlh]

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

[kirasong]

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.

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

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

[kirasong]

Nice, thank you @kevin940726!

Tested ​PR #1608 and it works as expected.

[kirasong]

@dlh How does ​PR #1608 look to you?

[dlh]

Looks good to me!

[kirasong]

@dlh Cool, thank you much for the review!

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

[kirasong]

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.

Committed via https://core.trac.wordpress.org/changeset/51677.