From 42463cf9e617a574e2ef625743aea98c9c53e229 Mon Sep 17 00:00:00 2001 From: himanshupathak95 Date: Wed, 25 Dec 2024 12:50:27 +0530 Subject: [PATCH] a11y: Add missing reduce-motion mixin --- .../src/components/downloadable-block-list-item/style.scss | 1 + packages/block-editor/src/components/block-draggable/style.scss | 1 + packages/block-editor/src/components/block-list/content.scss | 1 + .../block-editor/src/components/block-pattern-setup/style.scss | 1 + packages/block-editor/src/components/block-switcher/style.scss | 1 + .../src/components/button-block-appender/content.scss | 1 + packages/block-editor/src/components/global-styles/style.scss | 1 + packages/block-editor/src/components/iframe/content.scss | 1 + packages/block-editor/src/components/list-view/style.scss | 1 + packages/block-library/src/image/style.scss | 1 + packages/block-library/src/navigation/style.scss | 1 + packages/components/src/drop-zone/style.scss | 1 + .../edit-site/src/components/editor-canvas-container/style.scss | 1 + packages/edit-site/src/components/layout/style.scss | 1 + 14 files changed, 14 insertions(+) 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 index e13e46ef8d8786..77a75e765c9a49 100644 --- 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 index f716f2d32a1d40..139650c644a5ce 100644 --- 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 index cd517fced833ef..1a882eee4d2f5c 100644 --- 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 index 10582a7a2ce496..d5b90a517b47a8 100644 --- 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 index 62a7bebe95d278..1a1950d8941f48 100644 --- 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 index f5486d3f6f6086..8bc746423bea08 100644 --- 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 index e0782fdb01b1d0..5558858ebec050 100644 --- 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 index 05bbdb25c2dc63..d843a0c87fb95c 100644 --- 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 index 3529c27b56e24f..082dd5158a5592 100644 --- 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 index 8ca5795cfd911a..a99311a3ca8151 100644 --- 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 index 5f49eba466a5fd..91bd67079b2300 100644 --- 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 index d66eaee87b8a1f..b2df0cebf4ef77 100644 --- 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 index 07d666fb293c59..ab83b283d3377d 100644 --- 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 index 2c7e6ce1b10c8b..6967c463061451 100644 --- 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;