Skip to content

Commit

Permalink
Global styles revisions: move focus and active state to list item (#6…
Browse files Browse the repository at this point in the history 
…6780)

* 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 <[email protected]>
Co-authored-by: ntsekouras <[email protected]>
Co-authored-by: jasmussen <[email protected]>
  • Loading branch information
@ramonjd @ntsekouras
4 people authored Nov 7, 2024
1 parent b252874 commit 3e46fe7
Show file tree
Hide file tree
Showing 4 changed files with 50 additions and 57 deletions.
59 changes: 28 additions & 31 deletions packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js
View file
Original file line number Diff line number Diff line change
@@ -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
*/
Expand Down Expand Up @@ -117,10 +112,11 @@ function RevisionsButtons( {
const { datetimeAbbreviated } = getSettings().formats;

return (
<ol
<Composite
orientation="vertical"
className="edit-site-global-styles-screen-revisions__revisions-list"
aria-label={ __( 'Global styles revisions list' ) }
role="group"
role="listbox"
>
{ userRevisions.map( ( revision, index ) => {
const { id, author, modified } = revision;
Expand Down Expand Up @@ -149,28 +145,26 @@ function RevisionsButtons( {
);

return (
<li
className={ clsx(
'edit-site-global-styles-screen-revisions__revision-item',
{
'is-selected': isSelected,
'is-active': areStylesEqual,
'is-reset': isReset,
}
) }
<Composite.Item
key={ id }
className="edit-site-global-styles-screen-revisions__revision-item"
aria-current={ isSelected }
>
<Button
__next40pxDefaultSize
className="edit-site-global-styles-screen-revisions__revision-button"
accessibleWhenDisabled
disabled={ isSelected }
onClick={ () => {
role="option"
onKeyDown={ ( event ) => {
const { keyCode } = event;
if ( keyCode === ENTER || keyCode === SPACE ) {
onChange( revision );
} }
aria-label={ revisionLabel }
>
}
} }
onClick={ ( event ) => {
event.preventDefault();
onChange( revision );
} }
aria-selected={ isSelected }
aria-label={ revisionLabel }
render={ <div /> }
>
<span className="edit-site-global-styles-screen-revisions__revision-item-wrapper">
{ isReset ? (
<span className="edit-site-global-styles-screen-revisions__description">
{ __( 'Default styles' ) }
Expand Down Expand Up @@ -211,7 +205,7 @@ function RevisionsButtons( {
) }
</span>
) }
</Button>
</span>
{ isSelected &&
( areStylesEqual ? (
<p className="edit-site-global-styles-screen-revisions__applied-text">
Expand All @@ -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' ) }
</Button>
) ) }
</li>
</Composite.Item>
);
} ) }
</ol>
</Composite>
);
}

Expand Down
28 changes: 11 additions & 17 deletions packages/edit-site/src/components/global-styles/screen-revisions/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -42,7 +47,7 @@
border: 4px solid transparent;
}

&.is-selected {
&[aria-selected="true"] {
border-radius: $radius-small;

// Only visible in Windows High Contrast mode.
Expand All @@ -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);
}
Expand Down Expand Up @@ -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;
}

Expand Down
2 changes: 1 addition & 1 deletion test/e2e/specs/site-editor/block-style-variations.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 )
Expand Down
18 changes: 10 additions & 8 deletions test/e2e/specs/site-editor/user-global-styles-revisions.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 /,
} );

Expand Down Expand Up @@ -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();

Expand Down Expand Up @@ -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();
} );

Expand Down

1 comment on commit 3e46fe7

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in 3e46fe7.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/11714535481
📝 Reported issues:

Please sign in to comment.