Changeset 59989

Timestamp:

03/16/2025 08:25:35 PM (6 weeks ago)

Author:

joedolson

Message:

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.

Location:

trunk/src/wp-admin/css

Files:

• customize-controls.css (modified) (1 diff)
• customize-nav-menus.css (modified) (1 diff)
• customize-widgets.css (modified) (1 diff)
• themes.css (modified) (1 diff)

trunk/src/wp-admin/css/customize-controls.css

@@ -843 +843 @@
     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;    
+    }
 }
 

trunk/src/wp-admin/css/customize-nav-menus.css

@@ -721 +721 @@
 }
 
-#customize-preview {
-    transition: all 0.2s;
+@media (prefers-reduced-motion: no-preference) {
+    #customize-preview {
+        transition: all 0.2s;
+    }
 }
 

trunk/src/wp-admin/css/customize-widgets.css

@@ -262 +262 @@
 }
 
-#customize-preview {
-    transition: all 0.2s;
+@media (prefers-reduced-motion: no-preference) {
+    #customize-preview {
+        transition: all 0.2s;
+    }
 }
 

trunk/src/wp-admin/css/themes.css

@@ -1649 +1649 @@
 
 /* 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;
+    }
 }