Improve Button saving state accessibility. (#55547)

* Make saving buttons honor prefers-reduced-motion. * Fix edit site save hub button color contrast. * Add changelog entry. * Add inline comment.
WordPress · Nov 24, 2023 · 1fb0d7b · 1fb0d7b
1 parent 4d99bc2
commit 1fb0d7b
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 0 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -57,6 +57,7 @@
 ### Bug Fix
 
 -   `Autocomplete`: Add `aria-live` announcements for Mac and IOS Voiceover to fix lack of support for `aria-owns` ([#54902](https://github.com/WordPress/gutenberg/pull/54902)).
+-   Improve Button saving state accessibility. ([#55547](https://github.com/WordPress/gutenberg/pull/55547))
 
 ### Internal
 

diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
@@ -245,6 +245,11 @@
 	&.is-secondary.is-busy:disabled,
 	&.is-secondary.is-busy[aria-disabled="true"] {
 		animation: components-button__busy-animation 2500ms infinite linear;
+		// This should be refactored to use the reduce-motion("animation") mixin
+		// as soon as https://github.com/WordPress/gutenberg/issues/55566 is closed.
+		@media (prefers-reduced-motion: reduce) {
+			animation-duration: 0s;
+		}
 		opacity: 1;
 		background-size: 100px 100%;
 		// Disable reason: This function call looks nicer when each argument is on its own line.

diff --git a/packages/edit-site/src/components/save-hub/style.scss b/packages/edit-site/src/components/save-hub/style.scss
@@ -18,4 +18,11 @@
 	&[aria-disabled="true"]:hover {
 		color: inherit;
 	}
+
+	&:not(.is-primary) {
+		&.is-busy,
+		&.is-busy[aria-disabled="true"]:hover {
+			color: $gray-900;
+		}
+	}
 }