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.

git-svn-id: https://develop.svn.wordpress.org/trunk@51677 602fd350-edb4-49c9-b593-d223f7449a82

1 files changed, 14 insertions, 5 deletions

diff --git a/src/js/_enqueues/wp/customize/controls.js b/src/js/_enqueues/wp/customize/controls.js
index c8ee3de8df..0496435e42 100644
--- a/src/js/_enqueues/wp/customize/controls.js
+++ b/src/js/_enqueues/wp/customize/controls.js
@@ -6,6 +6,12 @@
 (function( exports, $ ){
 	var Container, focus, normalizedTransitionendEventName, api = wp.customize;
 
+	var reducedMotionMediaQuery = window.matchMedia( '(prefers-reduced-motion: reduce)' );
+	var isReducedMotion = reducedMotionMediaQuery.matches;
+	reducedMotionMediaQuery.addEventListener( 'change' , function handleReducedMotionChange( event ) {
+		isReducedMotion = event.matches;
+	});
+
 	api.OverlayNotification = api.Notification.extend(/** @lends wp.customize.OverlayNotification.prototype */{
 
 		/**
@@ -1264,11 +1270,14 @@
 		 * @return {void}
 		 */
 		_animateChangeExpanded: function( completeCallback ) {
-			// Return if CSS transitions are not supported.
-			if ( ! normalizedTransitionendEventName ) {
-				if ( completeCallback ) {
-					completeCallback();
-				}
+			// Return if CSS transitions are not supported or if reduced motion is enabled.
+			if ( ! normalizedTransitionendEventName || isReducedMotion ) {
+				// Schedule the callback until the next tick to prevent focus loss.
+				_.defer( function () {
+					if ( completeCallback ) {
+						completeCallback();
+					}
+				} );
 				return;
 			}