From eeddf38c14d6a41eac775dab7cf71d9eec40b883 Mon Sep 17 00:00:00 2001
From: himanshupathak95 <himanshu.pathak@rtcamp.com>
Date: Wed, 25 Dec 2024 12:50:27 +0530
Subject: [PATCH] a11y: Add missing reduce-motion mixin for animations

---
 .../block-editor/src/components/block-tools/style.scss     | 1 +
 .../block-editor/src/components/link-control/style.scss    | 1 +
 packages/block-library/src/image/style.scss                | 7 +++++++
 packages/components/src/animate/style.scss                 | 1 +
 packages/components/src/button/style.scss                  | 6 +-----
 packages/nux/src/components/dot-tip/style.scss             | 1 +
 6 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss
index 35d075c1a99b78..d4c3eb31ecf222 100644
--- a/packages/block-editor/src/components/block-tools/style.scss
+++ b/packages/block-editor/src/components/block-tools/style.scss
@@ -194,6 +194,7 @@
 		// Use a minimal duration to delay hiding the element, see hide-during-dragging animation for more details.
 		// It's essential to hide the toolbar/popover so that `dragEnter` events can pass through them to the underlying elements.
 		animation: hide-during-dragging 1ms linear forwards;
+		@include reduce-motion("animation");
 	}
 
 	.block-editor-block-parent-selector {
diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss
index 16493e1a5aa7f0..b961646ff8c550 100644
--- a/packages/block-editor/src/components/link-control/style.scss
+++ b/packages/block-editor/src/components/link-control/style.scss
@@ -291,6 +291,7 @@ $block-editor-link-control-number-of-actions: 1;
 			border-radius: 100%;
 			animation: loadingpulse 1s linear infinite;
 			animation-delay: 0.5s; // avoid animating for fast network responses
+			@include reduce-motion("animation");
 		}
 	}
 }
diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss
index a99311a3ca8151..890cb1a7a52ec4 100644
--- a/packages/block-library/src/image/style.scss
+++ b/packages/block-library/src/image/style.scss
@@ -18,6 +18,7 @@
 
 			&.show {
 				animation: show-content-image 0.4s;
+				@include reduce-motion("animation");
 			}
 		}
 	}
@@ -282,6 +283,7 @@
 	&.active {
 		visibility: visible;
 		animation: both turn-on-visibility 0.25s;
+		@include reduce-motion("animation");
 		img {
 			animation: both turn-on-visibility 0.35s;
 		}
@@ -289,6 +291,7 @@
 	&.show-closing-animation {
 		&:not(.active) {
 			animation: both turn-off-visibility 0.35s;
+			@include reduce-motion("animation");
 			img {
 				animation: both turn-off-visibility 0.25s;
 			}
@@ -303,6 +306,7 @@
 				animation: none;
 				.lightbox-image-container {
 					animation: lightbox-zoom-in 0.4s;
+					@include reduce-motion("animation");
 					// Override fade animation for image
 					img {
 						animation: none;
@@ -310,6 +314,7 @@
 				}
 				.scrim {
 					animation: turn-on-visibility 0.4s forwards;
+					@include reduce-motion("animation");
 				}
 			}
 			&.show-closing-animation {
@@ -317,6 +322,7 @@
 					animation: none;
 					.lightbox-image-container {
 						animation: lightbox-zoom-out 0.4s;
+						@include reduce-motion("animation");
 						// Override fade animation for image
 						img {
 							animation: none;
@@ -324,6 +330,7 @@
 					}
 					.scrim {
 						animation: turn-off-visibility 0.4s forwards;
+						@include reduce-motion("animation");
 					}
 				}
 			}
diff --git a/packages/components/src/animate/style.scss b/packages/components/src/animate/style.scss
index 1d64423e42f1f0..f7ec41a2b0b682 100644
--- a/packages/components/src/animate/style.scss
+++ b/packages/components/src/animate/style.scss
@@ -50,6 +50,7 @@
 
 .components-animate__loading {
 	animation: components-animate__loading 1.6s ease-in-out infinite;
+	@include reduce-motion("animation");
 }
 
 @keyframes components-animate__loading {
diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
index 460aeaa2781cdf..a31fd87f9f0b7f 100644
--- a/packages/components/src/button/style.scss
+++ b/packages/components/src/button/style.scss
@@ -276,11 +276,7 @@
 	&.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;
-		}
+		@include reduce-motion("animation");
 		background-size: 100px 100%;
 		/* stylelint-disable -- Disable reason: This function call looks nicer when each argument is on its own line. */
 		background-image: linear-gradient(
diff --git a/packages/nux/src/components/dot-tip/style.scss b/packages/nux/src/components/dot-tip/style.scss
index 3ab0c1a540fd5a..720e24b9ad3c18 100644
--- a/packages/nux/src/components/dot-tip/style.scss
+++ b/packages/nux/src/components/dot-tip/style.scss
@@ -13,6 +13,7 @@ $dot-scale: 3;  // How much the pulse animation should scale up by in size
 
 	&::before {
 		animation: nux-pulse 1.6s infinite cubic-bezier(0.17, 0.67, 0.92, 0.62);
+		@include reduce-motion("animation");
 		background: rgba(#00739c, 0.9);
 		opacity: 0.9;
 		height: $dot-size * $dot-scale;