From fd55ed4b7bf2240c759e125ad0b76a1d57ac0ffa Mon Sep 17 00:00:00 2001
From: Joe Dolson <joedolson@git.wordpress.org>
Date: Sun, 16 Mar 2025 20:25:35 +0000
Subject: [PATCH] Customizer: A11y: Respect `prefers-reduced-motion`.

Several significant animations in the customizer did not respect prefers reduced motion. Change CSS to wrap animations in `@media` queries to verify user preferences.

Props wildworks, sainathpoojary, abcd95, joedolson, audrasjb.
Fixes #62806.

git-svn-id: https://develop.svn.wordpress.org/trunk@59989 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/customize-controls.css  | 13 +++++++++----
 src/wp-admin/css/customize-nav-menus.css |  6 ++++--
 src/wp-admin/css/customize-widgets.css   |  6 ++++--
 src/wp-admin/css/themes.css              | 14 ++++++++------
 4 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css
index e694e35687..3d95b8d0ec 100644
--- a/src/wp-admin/css/customize-controls.css
+++ b/src/wp-admin/css/customize-controls.css
@@ -842,13 +842,18 @@ h3.customize-section-title {
 	color: #3c434a;
 	text-align: left;
 	cursor: pointer;
-	transition:
-		color .15s ease-in-out,
-		border-color .15s ease-in-out,
-		background .15s ease-in-out;
 	box-sizing: content-box;
 }
 
+@media (prefers-reduced-motion: no-preference) {
+	.customize-controls-close {
+		transition:
+			color .15s ease-in-out,
+			border-color .15s ease-in-out,
+			background .15s ease-in-out;	
+	}
+}
+
 .customize-panel-back,
 .customize-section-back {
 	display: block;
diff --git a/src/wp-admin/css/customize-nav-menus.css b/src/wp-admin/css/customize-nav-menus.css
index ce3f195bfe..090a8c168b 100644
--- a/src/wp-admin/css/customize-nav-menus.css
+++ b/src/wp-admin/css/customize-nav-menus.css
@@ -720,8 +720,10 @@
 	opacity: 1;
 }
 
-#customize-preview {
-	transition: all 0.2s;
+@media (prefers-reduced-motion: no-preference) {
+	#customize-preview {
+		transition: all 0.2s;
+	}
 }
 
 body.adding-menu-items #available-menu-items {
diff --git a/src/wp-admin/css/customize-widgets.css b/src/wp-admin/css/customize-widgets.css
index 3bd7a46b28..520297122c 100644
--- a/src/wp-admin/css/customize-widgets.css
+++ b/src/wp-admin/css/customize-widgets.css
@@ -261,8 +261,10 @@
 	color: #646970;
 }
 
-#customize-preview {
-	transition: all 0.2s;
+@media (prefers-reduced-motion: no-preference) {
+	#customize-preview {
+		transition: all 0.2s;
+	}
 }
 
 body.adding-widget #available-widgets {
diff --git a/src/wp-admin/css/themes.css b/src/wp-admin/css/themes.css
index d779721e98..bd336f7608 100644
--- a/src/wp-admin/css/themes.css
+++ b/src/wp-admin/css/themes.css
@@ -1648,12 +1648,14 @@ body.full-overlay-active {
 }
 
 /* Animations */
-.wp-full-overlay,
-.wp-full-overlay-sidebar,
-.wp-full-overlay .collapse-sidebar,
-.wp-full-overlay-main {
-	transition-property: left, right, top, bottom, width, margin;
-	transition-duration: 0.2s;
+@media (prefers-reduced-motion: no-preference) {
+	.wp-full-overlay,
+	.wp-full-overlay-sidebar,
+	.wp-full-overlay .collapse-sidebar,
+	.wp-full-overlay-main {
+		transition-property: left, right, top, bottom, width, margin;
+		transition-duration: 0.2s;
+	}
 }
 
 /* Device/preview size toggles */