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

Merged
merged 1 commit into from
Jan 31, 2025
+131 −78
Merged

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

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
Original file line number Diff line number Diff line change
@@ -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
Original file line number Diff line number Diff line change
@@ -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;
31 changes: 19 additions & 12 deletions packages/block-editor/src/components/block-list/content.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
@@ -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
@@ -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 {
@@ -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);
@@ -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;
9 changes: 5 additions & 4 deletions packages/block-editor/src/components/block-mover/style.scss
View file
Original file line number Diff line number Diff line change
@@ -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.
4 changes: 3 additions & 1 deletion packages/block-editor/src/components/block-pattern-setup/style.scss
View file
Original file line number Diff line number Diff line change
@@ -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 {
6 changes: 3 additions & 3 deletions packages/block-editor/src/components/block-patterns-list/style.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
}
}
}

4 changes: 3 additions & 1 deletion packages/block-editor/src/components/block-switcher/style.scss
View file
Original file line number Diff line number Diff line change
@@ -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;

8 changes: 5 additions & 3 deletions packages/block-editor/src/components/block-toolbar/style.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
9 changes: 6 additions & 3 deletions packages/block-editor/src/components/block-tools/style.scss
View file
Original file line number Diff line number Diff line change
@@ -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 {
6 changes: 2 additions & 4 deletions packages/block-editor/src/components/button-block-appender/content.scss
View file
Original file line number Diff line number Diff line change
@@ -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
Original file line number Diff line number Diff line change
@@ -129,8 +129,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;
4 changes: 3 additions & 1 deletion packages/block-editor/src/components/global-styles/style.scss
View file
Original file line number Diff line number Diff line change
@@ -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 {
9 changes: 5 additions & 4 deletions packages/block-editor/src/components/grid/style.scss
View file
Original file line number Diff line number Diff line change
@@ -126,10 +126,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.
7 changes: 5 additions & 2 deletions packages/block-editor/src/components/iframe/content.scss
View file
Original file line number Diff line number Diff line change
@@ -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);
15 changes: 9 additions & 6 deletions packages/block-editor/src/components/inserter-list-item/style.scss
View file
Original file line number Diff line number Diff line change
@@ -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;

@@ -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"] & {
10 changes: 6 additions & 4 deletions packages/block-editor/src/components/inserter/style.scss
View file
Original file line number Diff line number Diff line change
@@ -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 {
@@ -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;
}
}
}

17 changes: 11 additions & 6 deletions packages/block-editor/src/components/link-control/style.scss
View file
Original file line number Diff line number Diff line change
@@ -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
}
}
}
}
@@ -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;
}
}
}
}
Loading

Unchanged files with check annotations Beta

View file
test/e2e/specs/site-editor/dataviews-list-layout-keyboard.spec.js
page
.getByRole( 'region', { name: 'Editor content' } )
.getByRole( 'button', { name: 'Edit' } )
).toBeFocused();

Check failure on line 89 in test/e2e/specs/site-editor/dataviews-list-layout-keyboard.spec.js

GitHub Actions / Playwright - 5

[chromium] › site-editor/dataviews-list-layout-keyboard.spec.js:62:2 › Dataviews List Layout › Navigates from items list to preview via TAB 

  1) [chromium] › site-editor/dataviews-list-layout-keyboard.spec.js:62:2 › Dataviews List Layout › Navigates from items list to preview via TAB, and vice versa 
    Error: Timed out 5000ms waiting for expect(locator).toBeFocused()

    Locator: getByRole('region', { name: 'Editor content' }).getByRole('button', { name: 'Edit' })
    Expected: focused
    Received: inactive
    Call log:
      - expect.toBeFocused with timeout 5000ms
      - waiting for getByRole('region', { name: 'Editor content' }).getByRole('button', { name: 'Edit' })
        9 × locator resolved to <iframe tabindex="0" role="button" aria-label="Edit" name="editor-canvas" aria-disabled="false" class="edit-site-visual-editor__editor-canvas" src="blob:http://localhost:8889/ccd5549a-ae5a-42e7-adb4-97cffe17ac9e"></iframe>
          - unexpected value "not focused"


      87 | 				.getByRole( 'region', { name: 'Editor content' } )
      88 | 				.getByRole( 'button', { name: 'Edit' } )
    > 89 | 		).toBeFocused();
         | 		  ^
      90 |
      91 | 		// Go back to the items list using SHIFT+TAB.
      92 | 		await page.keyboard.press( 'Shift+Tab' );
        at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/site-editor/dataviews-list-layout-keyboard.spec.js:89:5
// Go back to the items list using SHIFT+TAB.
await page.keyboard.press( 'Shift+Tab' );