Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Block Editor]: A11y - Add and Update missing reduce-motion mixing #68417

Draft
wants to merge 1 commit into
base: trunk
Choose a base branch
from
Draft

[Block Editor]: A11y - Add and Update missing reduce-motion mixing #68417

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions packages/block-editor/src/components/block-canvas/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@ iframe[name="editor-canvas"] {
height: 100%;
display: block;
// Handles transitions between device previews
transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96);
@include reduce-motion("transition");
@media not ( prefers-reduced-motion ) {
transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96);
}
background-color: $gray-300;
}
4 changes: 3 additions & 1 deletion packages/block-editor/src/components/block-draggable/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,9 @@
justify-content: center;
align-items: center;
background-color: transparent;
transition: all 0.1s linear 0.1s;
@media not ( prefers-reduced-motion ) {
transition: all 0.1s linear 0.1s;
}

.block-editor-block-draggable-chip__disabled-icon {
width: $grid-unit-50 * 0.5;
Expand Down
31 changes: 19 additions & 12 deletions packages/block-editor/src/components/block-list/content.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,10 +58,12 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .b
background: var(--wp-admin-theme-color);
opacity: 0.4;

// Animate.
animation: selection-overlay__fade-in-animation 0.1s ease-out;
animation-fill-mode: forwards;
@include reduce-motion("animation");
@media not ( prefers-reduced-motion ) {

// Animate.
animation: selection-overlay__fade-in-animation 0.1s ease-out;
animation-fill-mode: forwards;
}

// Show outline in high contrast mode.
outline: 2px solid transparent;
Expand Down Expand Up @@ -271,8 +273,9 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .b
// Spotlight mode. Fade out blocks unless they contain a selected block.
.is-focus-mode .block-editor-block-list__block:not(.has-child-selected) {
opacity: 0.2;
transition: opacity 0.1s linear;
@include reduce-motion("transition");
@media not ( prefers-reduced-motion ) {
transition: opacity 0.1s linear;
}

// Nested blocks should never be faded. If the parent block is already faded
// out, it shouldn't be faded out more. If the parent block in not faded
Expand Down Expand Up @@ -339,9 +342,10 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .b
// Hide the appender that sits at the end of block lists, when inside a nested block,
// unless the block itself, or a parent, is selected.
.wp-block .block-list-appender .block-editor-inserter__toggle {
animation: block-editor-inserter__toggle__fade-in-animation 0.1s ease;
animation-fill-mode: forwards;
@include reduce-motion("animation");
@media not ( prefers-reduced-motion ) {
animation: block-editor-inserter__toggle__fade-in-animation 0.1s ease;
animation-fill-mode: forwards;
}
}

.block-editor-block-list__block:not(.is-selected):not(.has-child-selected) .block-editor-default-block-appender {
Expand All @@ -367,8 +371,9 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .b
font-family: $editor-html-font;
font-size: $text-editor-font-size;
line-height: 1.5;
transition: padding 0.2s linear;
@include reduce-motion("transition");
@media not ( prefers-reduced-motion ) {
transition: padding 0.2s linear;
}

&:focus {
box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
Expand Down Expand Up @@ -400,7 +405,9 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .b
// Additional -1px is required to avoid sub pixel rounding errors allowing background to show.
margin-left: -1px;
margin-right: -1px;
transition: background-color 0.3s ease;
@media not ( prefers-reduced-motion ) {
transition: background-color 0.3s ease;
}
display: flex;
align-items: center;
justify-content: center;
Expand Down
9 changes: 5 additions & 4 deletions packages/block-editor/src/components/block-mover/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,10 +87,11 @@
right: $grid-unit-10;
z-index: -1;

// Animate in.
animation: components-button__appear-animation 0.1s ease;
animation-fill-mode: forwards;
@include reduce-motion("animation");
@media not ( prefers-reduced-motion ) {
// Animate in.
animation: components-button__appear-animation 0.1s ease;
animation-fill-mode: forwards;
}
}

// Don't show the focus inherited by the Button component.
Expand Down
4 changes: 3 additions & 1 deletion packages/block-editor/src/components/block-pattern-setup/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,9 @@
background-color: $white;
margin: auto;
padding: 0;
transition: transform 0.5s, z-index 0.5s;
@media not ( prefers-reduced-motion ) {
transition: transform 0.5s, z-index 0.5s;
}
z-index: z-index(".block-editor-block-pattern-setup .pattern-slide");

&.active-slide {
Expand Down
6 changes: 3 additions & 3 deletions packages/block-editor/src/components/block-patterns-list/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,9 +44,9 @@
outline: $border-width solid rgba($black, 0.1);
outline-offset: -$border-width;
border-radius: $radius-medium;

transition: outline 0.1s linear;
@include reduce-motion("transition");
@media not ( prefers-reduced-motion ) {
transition: outline 0.1s linear;
}
}
}

Expand Down
4 changes: 3 additions & 1 deletion packages/block-editor/src/components/block-switcher/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,9 @@
.block-editor-block-switcher__preview-patterns-container-list__item {
height: 100%;
border-radius: $radius-small;
transition: all 0.05s ease-in-out;
@media not ( prefers-reduced-motion ) {
transition: all 0.05s ease-in-out;
}
position: relative;
border: $border-width solid transparent;

Expand Down
8 changes: 5 additions & 3 deletions packages/block-editor/src/components/block-toolbar/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,11 @@
overflow-y: hidden;
overflow-x: auto;

// Animation
transition: border-color 0.1s linear, box-shadow 0.1s linear;
@include reduce-motion("transition");
@media not ( prefers-reduced-motion ) {

// Animation
transition: border-color 0.1s linear, box-shadow 0.1s linear;
}

@include break-small() {
overflow: inherit;
Expand Down
9 changes: 6 additions & 3 deletions packages/block-editor/src/components/block-tools/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,9 +191,12 @@

.is-dragging-components-draggable & {
opacity: 0;
// 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;
@media not ( prefers-reduced-motion ) {

// 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;
}
}

.block-editor-block-parent-selector {
Expand Down
6 changes: 2 additions & 4 deletions packages/block-editor/src/components/button-block-appender/content.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,10 +79,8 @@
background-color: var(--wp-admin-theme-color);
box-shadow: inset 0 0 0 $border-width $light-gray-placeholder;
color: $light-gray-placeholder;
transition: background-color 0.2s ease-in-out;

@media ( prefers-reduced-motion: reduce ) {
transition: none;
@media not ( prefers-reduced-motion ) {
transition: background-color 0.2s ease-in-out;
}
}
}
5 changes: 3 additions & 2 deletions packages/block-editor/src/components/colors-gradients/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,8 +128,9 @@ $swatch-gap: 12px;
top: $grid-unit;
margin: auto $grid-unit auto;
opacity: 0;
transition: opacity 0.1s ease-in-out;
@include reduce-motion("transition");
@media not ( prefers-reduced-motion ) {
transition: opacity 0.1s ease-in-out;
}

&.block-editor-panel-color-gradient-settings__reset {
border-radius: $radius-small;
Expand Down
4 changes: 3 additions & 1 deletion packages/block-editor/src/components/global-styles/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,9 @@
box-sizing: border-box;

transform: scale(1);
transition: transform 0.1s ease;
@media not ( prefers-reduced-motion ) {
transition: transform 0.1s ease;
}
will-change: transform;

&:focus {
Expand Down
9 changes: 5 additions & 4 deletions packages/block-editor/src/components/grid/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,10 +125,11 @@
right: $grid-unit-10;
z-index: -1;

// Animate in.
animation: components-button__appear-animation 0.1s ease;
animation-fill-mode: forwards;
@include reduce-motion("animation");
@media not ( prefers-reduced-motion ) {
// Animate in.
animation: components-button__appear-animation 0.1s ease;
animation-fill-mode: forwards;
}
}

// Don't show the focus inherited by the Button component.
Expand Down
7 changes: 5 additions & 2 deletions packages/block-editor/src/components/iframe/content.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,11 @@

.block-editor-iframe__html {
transform-origin: top center;
// Prevents a flash of background color change when entering/exiting zoom out
transition: background-color 400ms;

@media not ( prefers-reduced-motion ) {
// Prevents a flash of background color change when entering/exiting zoom out
transition: background-color 400ms;
}

&.zoom-out-animation {
$scroll-top: var(--wp-block-editor-iframe-zoom-out-scroll-top, 0);
Expand Down
15 changes: 9 additions & 6 deletions packages/block-editor/src/components/inserter-list-item/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,9 @@
cursor: pointer;
background: transparent;
word-break: break-word;
transition: all 0.05s ease-in-out;
@include reduce-motion("transition");
@media not ( prefers-reduced-motion ) {
transition: all 0.05s ease-in-out;
}
position: relative;
height: auto;

Expand Down Expand Up @@ -97,17 +98,19 @@
.block-editor-block-types-list__item-icon {
padding: 12px 20px;
color: $gray-900;
transition: all 0.05s ease-in-out;
@include reduce-motion("transition");
@media not ( prefers-reduced-motion ) {
transition: all 0.05s ease-in-out;
}

.block-editor-block-icon {
margin-left: auto;
margin-right: auto;
}

svg {
transition: all 0.15s ease-out;
@include reduce-motion("transition");
@media not ( prefers-reduced-motion ) {
transition: all 0.15s ease-out;
}
}

.block-editor-block-types-list__list-item[draggable="true"] & {
Expand Down
10 changes: 6 additions & 4 deletions packages/block-editor/src/components/inserter/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,8 +83,9 @@ $block-inserter-tabs-height: 44px;
border: none;
outline: none;
padding: 0;
transition: color 0.2s ease;
@include reduce-motion("transition");
@media not ( prefers-reduced-motion ) {
transition: color 0.2s ease;
}
}

.block-editor-inserter__menu {
Expand Down Expand Up @@ -563,8 +564,9 @@ $block-inserter-tabs-height: 44px;
outline-color: var(--wp-admin-theme-color);
outline-width: var(--wp-admin-border-width-focus);
outline-offset: calc((-1 * var(--wp-admin-border-width-focus)));
transition: outline 0.1s linear;
@include reduce-motion("transition");
@media not ( prefers-reduced-motion ) {
transition: outline 0.1s linear;
}
}
}

Expand Down
17 changes: 11 additions & 6 deletions packages/block-editor/src/components/link-control/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -289,8 +289,10 @@ $block-editor-link-control-number-of-actions: 1;
right: 0;
bottom: 0;
border-radius: 100%;
animation: loadingpulse 1s linear infinite;
animation-delay: 0.5s; // avoid animating for fast network responses
@media not ( prefers-reduced-motion ) {
animation: loadingpulse 1s linear infinite;
animation-delay: 0.5s; // avoid animating for fast network responses
}
}
}
}
Expand Down Expand Up @@ -381,16 +383,19 @@ $block-editor-link-control-number-of-actions: 1;
// Point downwards when open (same as list view expander)
&[aria-expanded="true"] svg {
visibility: visible;
transition: transform 0.1s ease;
@media not ( prefers-reduced-motion ) {
transition: transform 0.1s ease;
}
transform: rotate(90deg);
@include reduce-motion("transition");

}
// Point rightwards when closed (same as list view expander)
&[aria-expanded="false"] svg {
visibility: visible;
transform: rotate(0deg);
transition: transform 0.1s ease;
@include reduce-motion("transition");
@media not ( prefers-reduced-motion ) {
transition: transform 0.1s ease;
}
}
}
}
Expand Down
Loading
Loading