From 3e46fe7e222a20b1dff36c1a8f435436e9bc134a Mon Sep 17 00:00:00 2001 From: Ramon Date: Thu, 7 Nov 2024 11:54:46 +1100 Subject: [PATCH] Global styles revisions: move focus and active state to list item (#66780) * This PR removes the button that loads the global revision and moves it up to an accessible list item. The result is that the list item is tabbable and selectable via keyboard, and the focus state wraps the entire item. * Use button border * Fix e2e tests and use composite component Unlinked contributors: jarekmorawski. Co-authored-by: ramonjd Co-authored-by: ntsekouras Co-authored-by: jasmussen --- .../screen-revisions/revisions-buttons.js | 59 +++++++++---------- .../global-styles/screen-revisions/style.scss | 28 ++++----- .../block-style-variations.spec.js | 2 +- .../user-global-styles-revisions.spec.js | 18 +++--- 4 files changed, 50 insertions(+), 57 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js b/packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js index b7ce38857c9461..d6acd711108b5c 100644 --- a/packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js +++ b/packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js @@ -1,18 +1,13 @@ -/** - * External dependencies - */ -import clsx from 'clsx'; - /** * WordPress dependencies */ import { __, sprintf } from '@wordpress/i18n'; -import { Button } from '@wordpress/components'; +import { Button, Composite } from '@wordpress/components'; import { dateI18n, getDate, humanTimeDiff, getSettings } from '@wordpress/date'; import { store as coreStore } from '@wordpress/core-data'; import { useSelect } from '@wordpress/data'; import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; - +import { ENTER, SPACE } from '@wordpress/keycodes'; /** * Internal dependencies */ @@ -117,10 +112,11 @@ function RevisionsButtons( { const { datetimeAbbreviated } = getSettings().formats; return ( -
    { userRevisions.map( ( revision, index ) => { const { id, author, modified } = revision; @@ -149,28 +145,26 @@ function RevisionsButtons( { ); return ( -
  1. - + { isSelected && ( areStylesEqual ? (

    @@ -225,16 +219,19 @@ function RevisionsButtons( { variant="primary" className="edit-site-global-styles-screen-revisions__apply-button" onClick={ onApplyRevision } + aria-label={ __( + 'Apply the selected revision to your site.' + ) } > { isReset ? __( 'Reset to defaults' ) : __( 'Apply' ) } ) ) } -

    2. + ); } ) } -
+ ); } diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/style.scss b/packages/edit-site/src/components/global-styles/screen-revisions/style.scss index 5d0e7cb185137a..1773d1a179b3dd 100644 --- a/packages/edit-site/src/components/global-styles/screen-revisions/style.scss +++ b/packages/edit-site/src/components/global-styles/screen-revisions/style.scss @@ -14,6 +14,11 @@ display: flex; flex-direction: column; + &[role="option"]:active, + &[role="option"]:focus { + @include button-style__focus(); + } + &:hover { background: rgba(var(--wp-admin-theme-color--rgb), 0.04); .edit-site-global-styles-screen-revisions__date { @@ -42,7 +47,7 @@ border: 4px solid transparent; } - &.is-selected { + &[aria-selected="true"] { border-radius: $radius-small; // Only visible in Windows High Contrast mode. @@ -52,10 +57,6 @@ color: var(--wp-admin-theme-color); background: rgba(var(--wp-admin-theme-color--rgb), 0.04); - .edit-site-global-styles-screen-revisions__revision-button { - opacity: 1; - } - .edit-site-global-styles-screen-revisions__date { color: var(--wp-admin-theme-color); } @@ -86,23 +87,16 @@ &:last-child::after { height: $grid-unit-20 + 2; } - - // Nested to override specificity of .components-button. - .edit-site-global-styles-screen-revisions__revision-button { - width: 100%; - height: auto; - display: block; - padding: $grid-unit-15 $grid-unit-15 $grid-unit-05 $grid-unit-50; - z-index: 1; - position: relative; - outline-offset: -2px; - } +} +.edit-site-global-styles-screen-revisions__revision-item-wrapper { + display: block; + padding: $grid-unit-15 $grid-unit-15 $grid-unit-05 $grid-unit-50; } .edit-site-global-styles-screen-revisions__apply-button.is-primary, .edit-site-global-styles-screen-revisions__applied-text { align-self: flex-start; - // Left margin = left padding of .edit-site-global-styles-screen-revisions__revision-button. + // Left margin = left padding of .edit-site-global-styles-screen-revisions__revision-item-wrapper. margin: $grid-unit-05 $grid-unit-15 $grid-unit-15 $grid-unit-50; } diff --git a/test/e2e/specs/site-editor/block-style-variations.spec.js b/test/e2e/specs/site-editor/block-style-variations.spec.js index 3c642ea9d1299e..03fc5398f4a0a5 100644 --- a/test/e2e/specs/site-editor/block-style-variations.spec.js +++ b/test/e2e/specs/site-editor/block-style-variations.spec.js @@ -245,7 +245,7 @@ test.describe( 'Block Style Variations', () => { // Click on previous revision. await page - .getByRole( 'button', { + .getByRole( 'option', { name: /^Changes saved by /, } ) .nth( 1 ) diff --git a/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js b/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js index e0b00fe1e59460..91142d5395640c 100644 --- a/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js +++ b/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js @@ -50,7 +50,7 @@ test.describe( 'Style Revisions', () => { // Now there should be enough revisions to show the revisions UI. await page.getByRole( 'button', { name: 'Revisions' } ).click(); - const revisionButtons = page.getByRole( 'button', { + const revisionButtons = page.getByRole( 'option', { name: /^Changes saved by /, } ); @@ -83,14 +83,14 @@ test.describe( 'Style Revisions', () => { await page.getByRole( 'button', { name: 'Revisions' } ).click(); - const unSavedButton = page.getByRole( 'button', { + const unSavedButton = page.getByRole( 'option', { name: /^Unsaved changes/, } ); await expect( unSavedButton ).toBeVisible(); await page - .getByRole( 'button', { name: /^Changes saved by / } ) + .getByRole( 'option', { name: /^Changes saved by / } ) .last() .click(); @@ -118,14 +118,16 @@ test.describe( 'Style Revisions', () => { await editor.canvas.locator( 'body' ).click(); await userGlobalStylesRevisions.openStylesPanel(); await page.getByRole( 'button', { name: 'Revisions' } ).click(); - const lastRevisionButton = page + const lastRevisionItem = page .getByLabel( 'Global styles revisions list' ) - .getByRole( 'button' ) + .getByRole( 'option' ) .last(); - await expect( lastRevisionButton ).toContainText( 'Default styles' ); - await lastRevisionButton.click(); + await expect( lastRevisionItem ).toContainText( 'Default styles' ); + await lastRevisionItem.click(); await expect( - page.getByRole( 'button', { name: 'Reset to defaults' } ) + page.getByRole( 'button', { + name: 'Apply the selected revision to your site.', + } ) ).toBeVisible(); } );