Small improvements for the sidebars and Close buttons labelling (#49614)

* Better labels for sidebars and close buttons.

* Add back sidebar to the Settings keyboard shortcut description.

docs/explanations/faq.md

@@ -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>

packages/e2e-test-utils-playwright/src/editor/open-document-settings-sidebar.ts

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

packages/e2e-test-utils-playwright/src/editor/site-editor.ts

@@ -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]'

packages/e2e-tests/plugins/plugins-api/annotations-sidebar.js

@@ -94,7 +94,7 @@
 				PluginSidebar,
 				{
 					name: 'annotations-sidebar',
-					title: __( 'Annotations Sidebar' ),
+					title: __( 'Annotations' ),
 				},
 				el( SidebarContents, {} )
 			),
@@ -103,7 +103,7 @@
 				{
 					target: 'annotations-sidebar',
 				},
-				__( 'Annotations Sidebar' )
+				__( 'Annotations' )
 			)
 		);
 	}

packages/e2e-tests/plugins/plugins-api/sidebar.js

@@ -70,7 +70,7 @@
 				PluginSidebar,
 				{
 					name: 'title-sidebar',
-					title: __( 'Plugin sidebar title' ),
+					title: __( 'Plugin title' ),
 				},
 				el( SidebarContents, {} )
 			),
@@ -79,7 +79,7 @@
 				{
 					target: 'title-sidebar',
 				},
-				__( 'Plugin sidebar more menu title' )
+				__( 'Plugin more menu title' )
 			)
 		);
 	}

packages/e2e-tests/specs/editor/plugins/__snapshots__/plugins-api.test.js.snap

@@ -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>"`;

packages/e2e-tests/specs/editor/plugins/annotations.test.js

@@ -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 );
@@ -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 );
 
@@ -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 );
 
@@ -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 );
 

packages/e2e-tests/specs/editor/plugins/plugins-api.test.js

@@ -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',
@@ -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();
@@ -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();
@@ -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',

packages/e2e-tests/specs/editor/various/preferences.test.js

@@ -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 );
 

packages/e2e-tests/specs/site-editor/multi-entity-saving.test.js

@@ -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' );

packages/edit-post/src/components/keyboard-shortcuts/index.js

@@ -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: ',',

packages/edit-post/src/components/sidebar/settings-sidebar/index.js

@@ -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' ) }

packages/edit-site/src/components/keyboard-shortcuts/register.js

@@ -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: ',',

packages/edit-site/src/components/layout/index.js

@@ -252,7 +252,7 @@ export default function Layout() {
 								}
 							>
 								<NavigableRegion
-									ariaLabel={ __( 'Navigation sidebar' ) }
+									ariaLabel={ __( 'Navigation' ) }
 								>
 									<Sidebar />
 								</NavigableRegion>

packages/edit-site/src/components/save-panel/index.js

@@ -66,7 +66,7 @@ export default function SavePanel() {
 			className={ classnames( 'edit-site-layout__actions', {
 				'is-entity-save-view-open': isSaveViewOpen,
 			} ) }
-			ariaLabel={ __( 'Save sidebar' ) }
+			ariaLabel={ __( 'Save panel' ) }
 		>
 			{ isSaveViewOpen ? (
 				entitySavedStates

packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js

@@ -6,7 +6,6 @@ import { Button } from '@wordpress/components';
 import {
 	useFocusOnMount,
 	useFocusReturn,
-	useInstanceId,
 	useMergeRefs,
 } from '@wordpress/compose';
 import { useDispatch } from '@wordpress/data';
@@ -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>

packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js

@@ -56,7 +56,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">

packages/edit-site/src/components/sidebar-edit-mode/index.js

@@ -71,7 +71,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"
 			>

packages/edit-site/src/components/site-hub/index.js

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