Changeset 59989

Timestamp:

03/16/2025 08:25:35 PM (17 months 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;
+        }
 }