Changeset 50028

Timestamp:

01/27/2021 11:39:50 AM (4 years ago)

Author:

SergeyBiryukov

Message:

Accessibility: Administration: Respect the prefers-reduced-motion media query for update icon spinner animations.

The update icon rotation should not occur when the user has opted to reduce motion, for example by selecting the "Reduce motion" option in macOS' preferences or unselecting "Show animations in Windows" in Windows' preferences.

Follow-up to [47813], [50027].

Props xkon, audrasjb, johnbillion.
Fixes #52263. See #51476.

Location:

trunk/src

Files:

• wp-admin/css/common.css (modified) (1 diff)
• wp-includes/css/admin-bar.css (modified) (1 diff)

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

@@ -1540 +1540 @@
 }
 
+@media (prefers-reduced-motion: reduce) {
+    .updating-message p:before,
+    .import-php .updating-message:before,
+    .button.updating-message:before,
+    .button.installing:before,
+    .plugins .column-auto-updates .dashicons-update.spin,
+    .theme-overlay .theme-autoupdate .dashicons-update.spin {
+        animation: none;
+    }
+}
+
 .theme-overlay .theme-autoupdate .dashicons-update.spin {
     margin-right: 3px;

trunk/src/wp-includes/css/admin-bar.css

@@ -592 +592 @@
     display: inline-block;
     animation: rotation 2s infinite linear;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    #wpadminbar #wp-admin-bar-updates.spin .ab-icon:before {
+        animation: none;
+    }
 }