a11y: Add missing reduce-motion mixin

himanshupathak95 · Dec 25, 2024 · 42463cf · 42463cf
1 parent c3ca59b
commit 42463cf
Show file tree

Hide file tree

Showing 14 changed files with 14 additions and 0 deletions.
diff --git a/packages/block-directory/src/components/downloadable-block-list-item/style.scss b/packages/block-directory/src/components/downloadable-block-list-item/style.scss
@@ -16,6 +16,7 @@
 	border: 0;
 	text-align: left;
 	transition: box-shadow 0.1s linear;
+	@include reduce-motion("transition");
 
 	// The item contains absolutely positioned items.
 	// Set `position: relative` on the parent to prevent overflow issues

diff --git a/packages/block-editor/src/components/block-draggable/style.scss b/packages/block-editor/src/components/block-draggable/style.scss
@@ -60,6 +60,7 @@
 	align-items: center;
 	background-color: transparent;
 	transition: all 0.1s linear 0.1s;
+	@include reduce-motion("transition");
 
 	.block-editor-block-draggable-chip__disabled-icon {
 		width: $grid-unit-50 * 0.5;

diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss
@@ -401,6 +401,7 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .b
 	margin-left: -1px;
 	margin-right: -1px;
 	transition: background-color 0.3s ease;
+	@include reduce-motion("transition");
 	display: flex;
 	align-items: center;
 	justify-content: center;

diff --git a/packages/block-editor/src/components/block-pattern-setup/style.scss b/packages/block-editor/src/components/block-pattern-setup/style.scss
@@ -131,6 +131,7 @@
 				margin: auto;
 				padding: 0;
 				transition: transform 0.5s, z-index 0.5s;
+				@include reduce-motion("transition");
 				z-index: z-index(".block-editor-block-pattern-setup .pattern-slide");
 
 				&.active-slide {

diff --git a/packages/block-editor/src/components/block-switcher/style.scss b/packages/block-editor/src/components/block-switcher/style.scss
@@ -130,6 +130,7 @@
 			height: 100%;
 			border-radius: $radius-small;
 			transition: all 0.05s ease-in-out;
+			@include reduce-motion("transition");
 			position: relative;
 			border: $border-width solid transparent;
 

diff --git a/packages/block-editor/src/components/button-block-appender/content.scss b/packages/block-editor/src/components/button-block-appender/content.scss
@@ -80,6 +80,7 @@
 		box-shadow: inset 0 0 0 $border-width $light-gray-placeholder;
 		color: $light-gray-placeholder;
 		transition: background-color 0.2s ease-in-out;
+		@include reduce-motion("transition");
 
 		@media ( prefers-reduced-motion: reduce ) {
 			transition: none;

diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
@@ -55,6 +55,7 @@
 	transform: scale(1);
 	transition: transform 0.1s ease;
 	will-change: transform;
+	@include reduce-motion("transition");
 
 	&:focus {
 		border: #{ $border-width * 2 } solid $gray-700;

diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss
@@ -6,6 +6,7 @@
 	transform-origin: top center;
 	// Prevents a flash of background color change when entering/exiting zoom out
 	transition: background-color 400ms;
+	@include reduce-motion("transition");
 
 	&.zoom-out-animation {
 		$scroll-top: var(--wp-block-editor-iframe-zoom-out-scroll-top, 0);

diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss
@@ -234,6 +234,7 @@
 		margin: 0;
 		text-decoration: none;
 		transition: box-shadow 0.1s linear;
+		@include reduce-motion("transition");
 
 		.components-modal__content & {
 			padding-left: 0;

diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss
@@ -168,6 +168,7 @@
 		padding: 0;
 		border-radius: 4px;
 		transition: opacity 0.2s ease;
+		@include reduce-motion("transition");
 
 		&:focus-visible {
 			outline: 3px auto rgb(90 90 90 / 25%);

diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
@@ -168,6 +168,7 @@ $navigation-icon-size: 24px;
 		opacity: 0;
 		transition: opacity 0.1s linear;
 		visibility: hidden;
+		@include reduce-motion("transition");
 
 		// Don't take up space when the menu is collapsed.
 		width: 0;

diff --git a/packages/components/src/drop-zone/style.scss b/packages/components/src/drop-zone/style.scss
@@ -47,6 +47,7 @@
 			opacity: 1;
 
 			transition: opacity 0.2s ease-in-out;
+			@include reduce-motion("transition");
 			@media (prefers-reduced-motion) {
 				transition: none;
 			}

diff --git a/packages/edit-site/src/components/editor-canvas-container/style.scss b/packages/edit-site/src/components/editor-canvas-container/style.scss
@@ -27,6 +27,7 @@
 	right: 0;
 	top: 0;
 	transition: all 0.3s; // Match .block-editor-iframe__body transition.
+	@include reduce-motion("transition");
 }
 
 .edit-site-editor-canvas-container__close-button {

diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
@@ -116,6 +116,7 @@
 		.edit-site-resizable-frame__inner-content {
 			box-shadow: $elevation-x-small;
 			transition: border-radius, box-shadow 0.4s;
+			@include reduce-motion("transition");
 			// This ensure the radius work properly.
 			overflow: hidden;