Block Library: Standardize reduced motion handling with media queries (…

…#68315) * A11y: Update animation/transition styles with reduced motion media queries * Ally: Make the media queries consistent for reduce motion preference * Block Library: Standardize reduced motion handling using media queries * A11y: Remove the unnecessary transition to the anchor element Co-authored-by: himanshupathak95 <[email protected]> Co-authored-by: t-hamano <[email protected]>
WordPress · Jan 8, 2025 · c7c09cf · c7c09cf
1 parent ad4da87
commit c7c09cf
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 19 deletions.
diff --git a/packages/block-library/src/freeform/editor.scss b/packages/block-library/src/freeform/editor.scss
@@ -240,12 +240,13 @@
 
 div[data-type="core/freeform"] {
 	&::before {
-		transition: border-color 0.1s linear, box-shadow 0.1s linear;
-		@include reduce-motion("transition");
 		border: $border-width solid $gray-300;
-
 		// Windows High Contrast mode will show this outline.
 		outline: $border-width solid transparent;
+
+		@media not (prefers-reduced-motion) {
+			transition: border-color 0.1s linear, box-shadow 0.1s linear;
+		}
 	}
 
 	&.is-selected::before {

diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss
@@ -137,12 +137,14 @@
 	top: -2px;
 	margin: $grid-unit-10;
 	z-index: z-index(".block-library-gallery-item__inline-menu");
-	transition: box-shadow 0.2s ease-out;
-	@include reduce-motion("transition");
 	border-radius: $radius-small;
 	background: $white;
 	border: $border-width solid $gray-900;
 
+	@media not (prefers-reduced-motion) {
+		transition: box-shadow 0.2s ease-out;
+	}
+
 	&:hover {
 		box-shadow: $elevation-x-small;
 	}

diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss
@@ -11,7 +11,7 @@
 		vertical-align: bottom;
 		box-sizing: border-box;
 
-		@media (prefers-reduced-motion: no-preference) {
+		@media not (prefers-reduced-motion) {
 			&.hide {
 				visibility: hidden;
 			}
@@ -167,7 +167,9 @@
 		text-align: center;
 		padding: 0;
 		border-radius: 4px;
-		transition: opacity 0.2s ease;
+		@media not (prefers-reduced-motion) {
+			transition: opacity 0.2s ease;
+		}
 
 		&:focus-visible {
 			outline: 3px auto rgb(90 90 90 / 25%);
@@ -280,21 +282,29 @@
 	// or faster than the scrim to give a sense of depth.
 	&.active {
 		visibility: visible;
-		animation: both turn-on-visibility 0.25s;
+		@media not (prefers-reduced-motion) {
+			animation: both turn-on-visibility 0.25s;
+		}
 		img {
-			animation: both turn-on-visibility 0.35s;
+			@media not (prefers-reduced-motion) {
+				animation: both turn-on-visibility 0.35s;
+			}
 		}
 	}
 	&.show-closing-animation {
 		&:not(.active) {
-			animation: both turn-off-visibility 0.35s;
+			@media not (prefers-reduced-motion) {
+				animation: both turn-off-visibility 0.35s;
+			}
 			img {
-				animation: both turn-off-visibility 0.25s;
+				@media not (prefers-reduced-motion) {
+					animation: both turn-off-visibility 0.25s;
+				}
 			}
 		}
 	}
 
-	@media (prefers-reduced-motion: no-preference) {
+	@media not (prefers-reduced-motion) {
 		&.zoom {
 			&.active {
 				opacity: 1;

diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
@@ -166,7 +166,9 @@ $navigation-icon-size: 24px;
 
 		// Hide until hover or focus within.
 		opacity: 0;
-		transition: opacity 0.1s linear;
+		@media not (prefers-reduced-motion) {
+			transition: opacity 0.1s linear;
+		}
 		visibility: hidden;
 
 		// Don't take up space when the menu is collapsed.
@@ -502,9 +504,10 @@ button.wp-block-navigation-item__content {
 		background-color: inherit;
 
 		// Animation.
-		animation: overlay-menu__fade-in-animation 0.1s ease-out;
-		animation-fill-mode: forwards;
-		@include reduce-motion("animation");
+		@media not (prefers-reduced-motion) {
+			animation: overlay-menu__fade-in-animation 0.1s ease-out;
+			animation-fill-mode: forwards;
+		}
 
 		// Try to inherit any root paddings set, so the X can align to a top-right aligned menu.
 		padding-top: clamp(1rem, var(--wp--style--root--padding-top), 20rem);

diff --git a/packages/block-library/src/social-links/style.scss b/packages/block-library/src/social-links/style.scss
@@ -70,8 +70,9 @@
 .wp-block-social-link {
 	display: block;
 	border-radius: 9999px; // This makes it pill-shaped instead of oval, in cases where the image fed is not perfectly sized.
-	transition: transform 0.1s ease;
-	@include reduce-motion("transition");
+	@media not (prefers-reduced-motion) {
+		transition: transform 0.1s ease;
+	}
 
 	// Dimensions.
 	height: auto;
@@ -80,7 +81,6 @@
 		align-items: center;
 		display: flex;
 		line-height: 0;
-		transition: transform 0.1s ease;
 	}
 
 	&:hover {