From fa1288d20c8312a9f2f6ec99a8aaa914e7fa182e Mon Sep 17 00:00:00 2001
From: Sergey Biryukov <sergeybiryukov@git.wordpress.org>
Date: Wed, 27 Jan 2021 11:39:50 +0000
Subject: [PATCH] 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.

git-svn-id: https://develop.svn.wordpress.org/trunk@50028 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/common.css       | 11 +++++++++++
 src/wp-includes/css/admin-bar.css |  6 ++++++
 2 files changed, 17 insertions(+)

diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
index fc3cdb3072..f2d85623fc 100644
--- a/src/wp-admin/css/common.css
+++ b/src/wp-admin/css/common.css
@@ -1539,6 +1539,17 @@ div.error {
 	animation: rotation 2s infinite linear;
 }
 
+@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;
 }
diff --git a/src/wp-includes/css/admin-bar.css b/src/wp-includes/css/admin-bar.css
index e6422db1cf..3cc47cb0fc 100644
--- a/src/wp-includes/css/admin-bar.css
+++ b/src/wp-includes/css/admin-bar.css
@@ -593,6 +593,12 @@ html:lang(he-il) .rtl #wpadminbar * {
 	animation: rotation 2s infinite linear;
 }
 
+@media (prefers-reduced-motion: reduce) {
+	#wpadminbar #wp-admin-bar-updates.spin .ab-icon:before {
+		animation: none;
+	}
+}
+
 /**
  * Search
  */