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.

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

Small improvements for the sidebars and Close buttons labelling #49614

Merged
merged 2 commits into from
May 3, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
2 changes: 1 addition & 1 deletion docs/explanations/faq.md
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,7 @@ This is the canonical list of keyboard shortcuts:
<td><kbd>⇧</kbd><kbd>⌘</kbd><kbd>Z</kbd></td>
</tr>
<tr>
<td>Show or hide the settings sidebar.</td>
<td>Show or hide the Settings sidebar.</td>
<td><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>,</kbd></td>
<td><kbd>⇧</kbd><kbd>⌘</kbd><kbd>,</kbd></td>
</tr>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export async function openDocumentSettingsSidebar( this: Editor ) {
await toggleButton.click();
await this.page
.getByRole( 'region', { name: 'Editor settings' } )
.getByRole( 'button', { name: 'Close settings' } )
.getByRole( 'button', { name: 'Close Settings' } )
.waitFor();
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export async function saveSiteEditorEntities( this: Editor ) {
);
// Second Save button in the entities panel.
await this.page.click(
'role=region[name="Save sidebar"i] >> role=button[name="Save"i]'
'role=region[name="Save panel"i] >> role=button[name="Save"i]'
);
await this.page.waitForSelector(
'role=region[name="Editor top bar"i] >> role=button[name="Save"i][disabled]'
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@
PluginSidebar,
{
name: 'annotations-sidebar',
title: __( 'Annotations Sidebar' ),
title: __( 'Annotations' ),
},
el( SidebarContents, {} )
),
Expand All @@ -103,7 +103,7 @@
{
target: 'annotations-sidebar',
},
__( 'Annotations Sidebar' )
__( 'Annotations' )
)
);
}
Expand Down
4 changes: 2 additions & 2 deletions packages/e2e-tests/plugins/plugins-api/sidebar.js
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@
PluginSidebar,
{
name: 'title-sidebar',
title: __( 'Plugin sidebar title' ),
title: __( 'Plugin title' ),
},
el( SidebarContents, {} )
),
Expand All @@ -79,7 +79,7 @@
{
target: 'title-sidebar',
},
__( 'Plugin sidebar more menu title' )
__( 'Plugin more menu title' )
)
);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,6 @@

exports[`Using Plugins API Document Setting Custom Panel Should render a custom panel inside Document Setting sidebar 1`] = `"My Custom Panel"`;

exports[`Using Plugins API Sidebar Medium screen Should open plugins sidebar using More Menu item and render content 1`] = `"<div class="components-panel__header interface-complementary-area-header__small"><span class="interface-complementary-area-header__small-title">(no title)</span><button type="button" class="components-button has-icon" aria-label="Close plugin"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="M12 13.06l3.712 3.713 1.061-1.06L13.061 12l3.712-3.712-1.06-1.06L12 10.938 8.288 7.227l-1.061 1.06L10.939 12l-3.712 3.712 1.06 1.061L12 13.061z"></path></svg></button></div><div class="components-panel__header interface-complementary-area-header" tabindex="-1"><strong>Plugin sidebar title</strong><button type="button" aria-pressed="true" aria-expanded="true" class="components-button interface-complementary-area__pin-unpin-item is-pressed has-icon" aria-label="Unpin from toolbar"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="M11.776 4.454a.25.25 0 01.448 0l2.069 4.192a.25.25 0 00.188.137l4.626.672a.25.25 0 01.139.426l-3.348 3.263a.25.25 0 00-.072.222l.79 4.607a.25.25 0 01-.362.263l-4.138-2.175a.25.25 0 00-.232 0l-4.138 2.175a.25.25 0 01-.363-.263l.79-4.607a.25.25 0 00-.071-.222L4.754 9.881a.25.25 0 01.139-.426l4.626-.672a.25.25 0 00.188-.137l2.069-4.192z"></path></svg></button><button type="button" class="components-button has-icon" aria-label="Close plugin"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="M12 13.06l3.712 3.713 1.061-1.06L13.061 12l3.712-3.712-1.06-1.06L12 10.938 8.288 7.227l-1.061 1.06L10.939 12l-3.712 3.712 1.06 1.061L12 13.061z"></path></svg></button></div><div class="components-panel"><div class="components-panel__body sidebar-title-plugin-panel is-opened"><div class="components-panel__row"><label for="title-plain-text">Title:</label><textarea class="block-editor-plain-text" id="title-plain-text" placeholder="(no title)" rows="1" style="overflow: hidden; overflow-wrap: break-word; resize: none; height: 18px;"></textarea></div><div class="components-panel__row"><button type="button" class="components-button is-primary">Reset</button></div></div></div>"`;
exports[`Using Plugins API Sidebar Medium screen Should open plugins sidebar using More Menu item and render content 1`] = `"<div class="components-panel__header interface-complementary-area-header__small"><span class="interface-complementary-area-header__small-title">(no title)</span><button type="button" class="components-button has-icon" aria-label="Close plugin"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="M12 13.06l3.712 3.713 1.061-1.06L13.061 12l3.712-3.712-1.06-1.06L12 10.938 8.288 7.227l-1.061 1.06L10.939 12l-3.712 3.712 1.06 1.061L12 13.061z"></path></svg></button></div><div class="components-panel__header interface-complementary-area-header" tabindex="-1"><strong>Plugin title</strong><button type="button" aria-pressed="true" aria-expanded="true" class="components-button interface-complementary-area__pin-unpin-item is-pressed has-icon" aria-label="Unpin from toolbar"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="M11.776 4.454a.25.25 0 01.448 0l2.069 4.192a.25.25 0 00.188.137l4.626.672a.25.25 0 01.139.426l-3.348 3.263a.25.25 0 00-.072.222l.79 4.607a.25.25 0 01-.362.263l-4.138-2.175a.25.25 0 00-.232 0l-4.138 2.175a.25.25 0 01-.363-.263l.79-4.607a.25.25 0 00-.071-.222L4.754 9.881a.25.25 0 01.139-.426l4.626-.672a.25.25 0 00.188-.137l2.069-4.192z"></path></svg></button><button type="button" class="components-button has-icon" aria-label="Close plugin"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="M12 13.06l3.712 3.713 1.061-1.06L13.061 12l3.712-3.712-1.06-1.06L12 10.938 8.288 7.227l-1.061 1.06L10.939 12l-3.712 3.712 1.06 1.061L12 13.061z"></path></svg></button></div><div class="components-panel"><div class="components-panel__body sidebar-title-plugin-panel is-opened"><div class="components-panel__row"><label for="title-plain-text">Title:</label><textarea class="block-editor-plain-text" id="title-plain-text" placeholder="(no title)" rows="1" style="overflow: hidden; overflow-wrap: break-word; resize: none; height: 18px;"></textarea></div><div class="components-panel__row"><button type="button" class="components-button is-primary">Reset</button></div></div></div>"`;

exports[`Using Plugins API Sidebar Should open plugins sidebar using More Menu item and render content 1`] = `"<div class="components-panel__header interface-complementary-area-header__small"><span class="interface-complementary-area-header__small-title">(no title)</span><button type="button" class="components-button has-icon" aria-label="Close plugin"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="M12 13.06l3.712 3.713 1.061-1.06L13.061 12l3.712-3.712-1.06-1.06L12 10.938 8.288 7.227l-1.061 1.06L10.939 12l-3.712 3.712 1.06 1.061L12 13.061z"></path></svg></button></div><div class="components-panel__header interface-complementary-area-header" tabindex="-1"><strong>Plugin sidebar title</strong><button type="button" aria-pressed="true" aria-expanded="true" class="components-button interface-complementary-area__pin-unpin-item is-pressed has-icon" aria-label="Unpin from toolbar"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="M11.776 4.454a.25.25 0 01.448 0l2.069 4.192a.25.25 0 00.188.137l4.626.672a.25.25 0 01.139.426l-3.348 3.263a.25.25 0 00-.072.222l.79 4.607a.25.25 0 01-.362.263l-4.138-2.175a.25.25 0 00-.232 0l-4.138 2.175a.25.25 0 01-.363-.263l.79-4.607a.25.25 0 00-.071-.222L4.754 9.881a.25.25 0 01.139-.426l4.626-.672a.25.25 0 00.188-.137l2.069-4.192z"></path></svg></button><button type="button" class="components-button has-icon" aria-label="Close plugin"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="M12 13.06l3.712 3.713 1.061-1.06L13.061 12l3.712-3.712-1.06-1.06L12 10.938 8.288 7.227l-1.061 1.06L10.939 12l-3.712 3.712 1.06 1.061L12 13.061z"></path></svg></button></div><div class="components-panel"><div class="components-panel__body sidebar-title-plugin-panel is-opened"><div class="components-panel__row"><label for="title-plain-text">Title:</label><textarea class="block-editor-plain-text" id="title-plain-text" placeholder="(no title)" rows="1" style="overflow: hidden; overflow-wrap: break-word; resize: none; height: 18px;"></textarea></div><div class="components-panel__row"><button type="button" class="components-button is-primary">Reset</button></div></div></div>"`;
exports[`Using Plugins API Sidebar Should open plugins sidebar using More Menu item and render content 1`] = `"<div class="components-panel__header interface-complementary-area-header__small"><span class="interface-complementary-area-header__small-title">(no title)</span><button type="button" class="components-button has-icon" aria-label="Close plugin"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="M12 13.06l3.712 3.713 1.061-1.06L13.061 12l3.712-3.712-1.06-1.06L12 10.938 8.288 7.227l-1.061 1.06L10.939 12l-3.712 3.712 1.06 1.061L12 13.061z"></path></svg></button></div><div class="components-panel__header interface-complementary-area-header" tabindex="-1"><strong>Plugin title</strong><button type="button" aria-pressed="true" aria-expanded="true" class="components-button interface-complementary-area__pin-unpin-item is-pressed has-icon" aria-label="Unpin from toolbar"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="M11.776 4.454a.25.25 0 01.448 0l2.069 4.192a.25.25 0 00.188.137l4.626.672a.25.25 0 01.139.426l-3.348 3.263a.25.25 0 00-.072.222l.79 4.607a.25.25 0 01-.362.263l-4.138-2.175a.25.25 0 00-.232 0l-4.138 2.175a.25.25 0 01-.363-.263l.79-4.607a.25.25 0 00-.071-.222L4.754 9.881a.25.25 0 01.139-.426l4.626-.672a.25.25 0 00.188-.137l2.069-4.192z"></path></svg></button><button type="button" class="components-button has-icon" aria-label="Close plugin"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="M12 13.06l3.712 3.713 1.061-1.06L13.061 12l3.712-3.712-1.06-1.06L12 10.938 8.288 7.227l-1.061 1.06L10.939 12l-3.712 3.712 1.06 1.061L12 13.061z"></path></svg></button></div><div class="components-panel"><div class="components-panel__body sidebar-title-plugin-panel is-opened"><div class="components-panel__row"><label for="title-plain-text">Title:</label><textarea class="block-editor-plain-text" id="title-plain-text" placeholder="(no title)" rows="1" style="overflow: hidden; overflow-wrap: break-word; resize: none; height: 18px;"></textarea></div><div class="components-panel__row"><button type="button" class="components-button is-primary">Reset</button></div></div></div>"`;
8 changes: 4 additions & 4 deletions packages/e2e-tests/specs/editor/plugins/annotations.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ describe( 'Annotations', () => {
it( 'allows a block to be annotated', async () => {
await page.keyboard.type( 'Title' + '\n' + 'Paragraph to annotate' );

await clickOnMoreMenuItem( 'Annotations Sidebar' );
await clickOnMoreMenuItem( 'Annotations' );

let annotations = await page.$$( ANNOTATIONS_SELECTOR );
expect( annotations ).toHaveLength( 0 );
Expand Down Expand Up @@ -128,7 +128,7 @@ describe( 'Annotations', () => {

it( 'keeps the cursor in the same location when applying annotation', async () => {
await page.keyboard.type( 'Title' + '\n' + 'ABC' );
await clickOnMoreMenuItem( 'Annotations Sidebar' );
await clickOnMoreMenuItem( 'Annotations' );

await annotateFirstBlock( 1, 2 );

Expand All @@ -146,7 +146,7 @@ describe( 'Annotations', () => {

it( 'moves when typing before it', async () => {
await page.keyboard.type( 'Title' + '\n' + 'ABC' );
await clickOnMoreMenuItem( 'Annotations Sidebar' );
await clickOnMoreMenuItem( 'Annotations' );

await annotateFirstBlock( 1, 2 );

Expand All @@ -168,7 +168,7 @@ describe( 'Annotations', () => {

it( 'grows when typing inside it', async () => {
await page.keyboard.type( 'Title' + '\n' + 'ABC' );
await clickOnMoreMenuItem( 'Annotations Sidebar' );
await clickOnMoreMenuItem( 'Annotations' );

await annotateFirstBlock( 1, 2 );

Expand Down
12 changes: 6 additions & 6 deletions packages/e2e-tests/specs/editor/plugins/plugins-api.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -69,10 +69,10 @@ describe( 'Using Plugins API', () => {

describe( 'Sidebar', () => {
const SIDEBAR_PINNED_ITEM_BUTTON =
'.interface-pinned-items button[aria-label="Plugin sidebar title"]';
'.interface-pinned-items button[aria-label="Plugin title"]';
const SIDEBAR_PANEL_SELECTOR = '.sidebar-title-plugin-panel';
it( 'Should open plugins sidebar using More Menu item and render content', async () => {
await clickOnMoreMenuItem( 'Plugin sidebar more menu title' );
await clickOnMoreMenuItem( 'Plugin more menu title' );

const pluginSidebarContent = await page.$eval(
'.edit-post-sidebar',
Expand Down Expand Up @@ -105,7 +105,7 @@ describe( 'Using Plugins API', () => {
await page.reload();
await page.waitForSelector( '.edit-post-layout' );
expect( await page.$( SIDEBAR_PINNED_ITEM_BUTTON ) ).toBeNull();
await clickOnMoreMenuItem( 'Plugin sidebar more menu title' );
await clickOnMoreMenuItem( 'Plugin more menu title' );
await page.click( 'button[aria-label="Pin to toolbar"]' );
expect( await page.$( SIDEBAR_PINNED_ITEM_BUTTON ) ).not.toBeNull();
await page.reload();
Expand All @@ -114,12 +114,12 @@ describe( 'Using Plugins API', () => {
} );

it( 'Should close plugins sidebar using More Menu item', async () => {
await clickOnMoreMenuItem( 'Plugin sidebar more menu title' );
await clickOnMoreMenuItem( 'Plugin more menu title' );

const pluginSidebarOpened = await page.$( '.edit-post-sidebar' );
expect( pluginSidebarOpened ).not.toBeNull();

await clickOnMoreMenuItem( 'Plugin sidebar more menu title' );
await clickOnMoreMenuItem( 'Plugin more menu title' );

const pluginSidebarClosed = await page.$( '.edit-post-sidebar' );
expect( pluginSidebarClosed ).toBeNull();
Expand All @@ -135,7 +135,7 @@ describe( 'Using Plugins API', () => {
} );

it( 'Should open plugins sidebar using More Menu item and render content', async () => {
await clickOnMoreMenuItem( 'Plugin sidebar more menu title' );
await clickOnMoreMenuItem( 'Plugin more menu title' );

const pluginSidebarContent = await page.$eval(
'.edit-post-sidebar',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ describe( 'preferences', () => {

// Dismiss.
await page.click(
'.edit-post-sidebar__panel-tabs [aria-label="Close settings"]'
'.edit-post-sidebar__panel-tabs [aria-label="Close Settings"]'
);
expect( await getActiveSidebarTabText() ).toBe( null );

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -275,7 +275,7 @@ describe( 'Multi-entity save flow', () => {
'//a[contains(@class, "block-editor-list-view-block-select-button")][contains(., "header")]'
);
headerTemplatePartListViewButton.click();
await page.click( 'button[aria-label="Close List View Sidebar"]' );
await page.click( 'button[aria-label="Close"]' );

// Insert something to dirty the editor.
await insertBlock( 'Paragraph' );
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,7 @@ function KeyboardShortcuts() {
registerShortcut( {
name: 'core/edit-post/toggle-sidebar',
category: 'global',
description: __( 'Show or hide the settings sidebar.' ),
description: __( 'Show or hide the Settings sidebar.' ),
keyCombination: {
modifier: 'primaryShift',
character: ',',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ const SettingsSidebar = () => {
<PluginSidebarEditPost
identifier={ sidebarName }
header={ <SettingsHeader sidebarName={ sidebarName } /> }
closeLabel={ __( 'Close settings' ) }
closeLabel={ __( 'Close Settings' ) }
headerClassName="edit-post-sidebar__panel-tabs"
/* translators: button label text should, if possible, be under 16 characters. */
title={ __( 'Settings' ) }
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ function KeyboardShortcutsRegister() {
registerShortcut( {
name: 'core/edit-site/toggle-block-settings-sidebar',
category: 'global',
description: __( 'Show or hide the block settings sidebar.' ),
description: __( 'Show or hide the Settings sidebar.' ),
keyCombination: {
modifier: 'primaryShift',
character: ',',
Expand Down
2 changes: 1 addition & 1 deletion packages/edit-site/src/components/layout/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -248,7 +248,7 @@ export default function Layout() {
}
>
<NavigableRegion
ariaLabel={ __( 'Navigation sidebar' ) }
ariaLabel={ __( 'Navigation' ) }
>
<Sidebar />
</NavigableRegion>
Expand Down
2 changes: 1 addition & 1 deletion packages/edit-site/src/components/save-panel/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ export default function SavePanel() {
className={ classnames( 'edit-site-layout__actions', {
'is-entity-save-view-open': isSaveViewOpen,
} ) }
ariaLabel={ __( 'Save sidebar' ) }
ariaLabel={ __( 'Save panel' ) }
>
{ isSaveViewOpen ? (
<EntitiesSavedStates close={ onClose } />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import { Button } from '@wordpress/components';
import {
useFocusOnMount,
useFocusReturn,
useInstanceId,
useMergeRefs,
} from '@wordpress/compose';
import { useDispatch } from '@wordpress/data';
Expand All @@ -32,24 +31,21 @@ export default function ListViewSidebar() {
}
}

const instanceId = useInstanceId( ListViewSidebar );
const labelId = `edit-site-editor__list-view-panel-label-${ instanceId }`;
const { PrivateListView } = unlock( blockEditorPrivateApis );
return (
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
<div
aria-labelledby={ labelId }
className="edit-site-editor__list-view-panel"
onKeyDown={ closeOnEscape }
>
<div
className="edit-site-editor__list-view-panel-header"
ref={ headerFocusReturnRef }
>
<strong id={ labelId }>{ __( 'List View' ) }</strong>
<strong>{ __( 'List View' ) }</strong>
<Button
icon={ closeSmall }
label={ __( 'Close List View Sidebar' ) }
label={ __( 'Close' ) }
onClick={ () => setIsListViewOpened( false ) }
/>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ export default function GlobalStylesSidebar() {
identifier="edit-site/global-styles"
title={ __( 'Styles' ) }
icon={ styles }
closeLabel={ __( 'Close Styles sidebar' ) }
closeLabel={ __( 'Close Styles' ) }
panelClassName="edit-site-global-styles-sidebar__panel"
header={
<Flex className="edit-site-global-styles-sidebar__header">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ export function SidebarComplementaryAreaFills() {
identifier={ sidebarName }
title={ __( 'Settings' ) }
icon={ isRTL() ? drawerLeft : drawerRight }
closeLabel={ __( 'Close settings' ) }
closeLabel={ __( 'Close Settings' ) }
header={ <SettingsHeader sidebarName={ sidebarName } /> }
headerClassName="edit-site-sidebar-edit-mode__panel-tabs"
>
Expand Down
2 changes: 1 addition & 1 deletion packages/edit-site/src/components/site-hub/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ const SiteHub = forwardRef( ( props, ref ) => {
const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
const { clearSelectedBlock } = useDispatch( blockEditorStore );
const siteIconButtonProps = {
label: __( 'Open Admin Sidebar' ),
label: __( 'Open Navigation' ),
onClick: () => {
if ( canvasMode === 'edit' ) {
clearSelectedBlock();
Expand Down
Loading