From 8423bcbe84c249f98d72a4e02b39718c96399653 Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Fri, 8 Sep 2023 11:07:06 -0500
Subject: [PATCH 1/7] Add consistent accessible name to command palette button

---
 .../src/components/header-edit-mode/document-actions/index.js    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/edit-site/src/components/header-edit-mode/document-actions/index.js b/packages/edit-site/src/components/header-edit-mode/document-actions/index.js
index 058dd1d054aed5..8b72f4905e6c0d 100644
--- a/packages/edit-site/src/components/header-edit-mode/document-actions/index.js
+++ b/packages/edit-site/src/components/header-edit-mode/document-actions/index.js
@@ -173,6 +173,7 @@ function BaseDocumentActions( { className, icon, children, onBack } ) {
 			<Button
 				className="edit-site-document-actions__command"
 				onClick={ () => openCommandCenter() }
+				aria-label={ __( 'Command Palette' ) }
 			>
 				<HStack
 					className="edit-site-document-actions__title"

From fccf1da05bdd461eea6684ec75ecab1ce576240c Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Fri, 8 Sep 2023 11:12:56 -0500
Subject: [PATCH 2/7] Switch h1 within command palette button to span

---
 .../components/header-edit-mode/document-actions/index.js   | 6 +++++-
 .../components/header-edit-mode/document-actions/style.scss | 4 ++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/edit-site/src/components/header-edit-mode/document-actions/index.js b/packages/edit-site/src/components/header-edit-mode/document-actions/index.js
index 8b72f4905e6c0d..f76eedb221a1d2 100644
--- a/packages/edit-site/src/components/header-edit-mode/document-actions/index.js
+++ b/packages/edit-site/src/components/header-edit-mode/document-actions/index.js
@@ -181,7 +181,11 @@ function BaseDocumentActions( { className, icon, children, onBack } ) {
 					justify="center"
 				>
 					<BlockIcon icon={ icon } />
-					<Text size="body" as="h1">
+					<Text
+						className="edit-site-document-actions__text"
+						size="body"
+						as="span"
+					>
 						{ children }
 					</Text>
 				</HStack>
diff --git a/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss b/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
index be34a9696a3fde..8f5f2e3fa79f80 100644
--- a/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
+++ b/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
@@ -37,7 +37,7 @@
 	&.is-synced-entity {
 		.edit-site-document-actions__title {
 			color: var(--wp-block-synced-color);
-			h1 {
+			.edit-site-document-actions__text {
 				color: var(--wp-block-synced-color);
 			}
 		}
@@ -68,7 +68,7 @@
 		flex-shrink: 0;
 	}
 
-	h1 {
+	.edit-site-document-actions__text {
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;

From 4228383d12c0470a2340328ec987eed18808ac68 Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Fri, 8 Sep 2023 12:56:52 -0500
Subject: [PATCH 3/7] Add stable h1 to site editor edit mode

---
 .../header-edit-mode/document-actions/index.js   | 11 -----------
 .../src/components/header-edit-mode/index.js     | 16 ++++++++++++++++
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/packages/edit-site/src/components/header-edit-mode/document-actions/index.js b/packages/edit-site/src/components/header-edit-mode/document-actions/index.js
index f76eedb221a1d2..c0beac2ed2218b 100644
--- a/packages/edit-site/src/components/header-edit-mode/document-actions/index.js
+++ b/packages/edit-site/src/components/header-edit-mode/document-actions/index.js
@@ -10,7 +10,6 @@ import { __, isRTL } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	Button,
-	VisuallyHidden,
 	__experimentalText as Text,
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
@@ -33,13 +32,6 @@ import { store as coreStore } from '@wordpress/core-data';
 import useEditedEntityRecord from '../../use-edited-entity-record';
 import { store as editSiteStore } from '../../../store';
 
-const typeLabels = {
-	wp_block: __( 'Editing pattern:' ),
-	wp_navigation: __( 'Editing navigation menu:' ),
-	wp_template: __( 'Editing template:' ),
-	wp_template_part: __( 'Editing template part:' ),
-};
-
 export default function DocumentActions() {
 	const isPage = useSelect(
 		( select ) => select( editSiteStore ).isPage(),
@@ -144,9 +136,6 @@ function TemplateDocumentActions( { className, onBack } ) {
 			icon={ typeIcon }
 			onBack={ onBack }
 		>
-			<VisuallyHidden as="span">
-				{ typeLabels[ record.type ] ?? typeLabels.wp_template }
-			</VisuallyHidden>
 			{ getTitle() }
 		</BaseDocumentActions>
 	);
diff --git a/packages/edit-site/src/components/header-edit-mode/index.js b/packages/edit-site/src/components/header-edit-mode/index.js
index da682e995defd3..107351260b30c9 100644
--- a/packages/edit-site/src/components/header-edit-mode/index.js
+++ b/packages/edit-site/src/components/header-edit-mode/index.js
@@ -46,6 +46,7 @@ import {
 } from '../editor-canvas-container';
 import { unlock } from '../../lock-unlock';
 import { FOCUSABLE_ENTITIES } from '../../utils/constants';
+import useEditedEntityRecord from '../use-edited-entity-record';
 
 const { useShouldContextualToolbarShow } = unlock( blockEditorPrivateApis );
 
@@ -53,6 +54,13 @@ const preventDefault = ( event ) => {
 	event.preventDefault();
 };
 
+const typeLabels = {
+	wp_block: __( 'Editing pattern:' ),
+	wp_navigation: __( 'Editing navigation menu:' ),
+	wp_template: __( 'Editing template:' ),
+	wp_template_part: __( 'Editing template part:' ),
+};
+
 export default function HeaderEditMode() {
 	const inserterButton = useRef();
 	const {
@@ -116,6 +124,7 @@ export default function HeaderEditMode() {
 		};
 	}, [] );
 
+	const { record, getTitle } = useEditedEntityRecord();
 	const {
 		__experimentalSetPreviewDeviceType: setPreviewDeviceType,
 		setIsInserterOpened,
@@ -183,12 +192,19 @@ export default function HeaderEditMode() {
 		ease: 'easeOut',
 	};
 
+	const title = hasDefaultEditorCanvasView
+		? `${
+				typeLabels[ record.type ] ?? typeLabels.wp_template
+		  } ${ getTitle() }`
+		: getEditorCanvasContainerTitle( editorCanvasView );
+
 	return (
 		<div
 			className={ classnames( 'edit-site-header-edit-mode', {
 				'show-icon-labels': showIconLabels,
 			} ) }
 		>
+			<VisuallyHidden as="h1">{ title }</VisuallyHidden>
 			{ hasDefaultEditorCanvasView && (
 				<NavigableToolbar
 					as={ motion.div }

From b098da633dbb8182fe037e67869f0974dc807d4f Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Fri, 8 Sep 2023 13:06:10 -0500
Subject: [PATCH 4/7] Correct color for document action title on page

---
 .../src/components/header-edit-mode/document-actions/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss b/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
index 8f5f2e3fa79f80..bb981a9291c087 100644
--- a/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
+++ b/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
@@ -78,7 +78,7 @@
 	.edit-site-document-actions.is-page & {
 		color: $gray-800;
 
-		h1 {
+		.edit-site-document-actions__text {
 			color: $gray-800;
 		}
 	}

From 5891a2ad303a7255bb56328565b904b10ec87f31 Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Fri, 8 Sep 2023 15:15:18 -0500
Subject: [PATCH 5/7] Use Command Palette as accessible name for Edit Template
 from Post Editor

---
 .../src/components/header/document-actions/index.js       | 8 +++++++-
 .../src/components/header/document-actions/style.scss     | 2 +-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/edit-post/src/components/header/document-actions/index.js b/packages/edit-post/src/components/header/document-actions/index.js
index 52df978e2cd5b3..573d41a6cf5563 100644
--- a/packages/edit-post/src/components/header/document-actions/index.js
+++ b/packages/edit-post/src/components/header/document-actions/index.js
@@ -60,6 +60,7 @@ function DocumentActions() {
 			<Button
 				className="edit-post-document-actions__command"
 				onClick={ () => openCommandCenter() }
+				aria-label={ __( 'Command Palette' ) }
 			>
 				<HStack
 					className="edit-post-document-actions__title"
@@ -67,7 +68,12 @@ function DocumentActions() {
 					justify="center"
 				>
 					<BlockIcon icon={ layout } />
-					<Text size="body" as="h1">
+					<Text
+						className="edit-post-document-actions__text"
+						size="body"
+						as="span"
+						color={ undefined }
+					>
 						<VisuallyHidden as="span">
 							{ __( 'Editing template: ' ) }
 						</VisuallyHidden>
diff --git a/packages/edit-post/src/components/header/document-actions/style.scss b/packages/edit-post/src/components/header/document-actions/style.scss
index 7eb77f9c0bd88c..d9ab2574be584a 100644
--- a/packages/edit-post/src/components/header/document-actions/style.scss
+++ b/packages/edit-post/src/components/header/document-actions/style.scss
@@ -40,7 +40,7 @@
 		flex-shrink: 0;
 	}
 
-	h1 {
+	.edit-post-document-actions__text {
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;

From d9810b493d4298e862a370c05bd4aa0c3db26ed1 Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Mon, 11 Sep 2023 10:04:12 -0500
Subject: [PATCH 6/7] Add aria-expanded and aria-haspopup states to command
 center button

---
 .../header/document-actions/index.js          | 24 ++++++++++++-------
 .../document-actions/index.js                 |  8 +++++++
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/packages/edit-post/src/components/header/document-actions/index.js b/packages/edit-post/src/components/header/document-actions/index.js
index 573d41a6cf5563..86e6b812c39956 100644
--- a/packages/edit-post/src/components/header/document-actions/index.js
+++ b/packages/edit-post/src/components/header/document-actions/index.js
@@ -20,16 +20,20 @@ import { displayShortcut } from '@wordpress/keycodes';
 import { store as editPostStore } from '../../../store';
 
 function DocumentActions() {
-	const { template, isEditing } = useSelect( ( select ) => {
-		const { isEditingTemplate, getEditedPostTemplate } =
-			select( editPostStore );
-		const _isEditing = isEditingTemplate();
+	const { template, isCommandCenterOpen, isEditing } = useSelect(
+		( select ) => {
+			const { isEditingTemplate, getEditedPostTemplate } =
+				select( editPostStore );
+			const _isEditing = isEditingTemplate();
 
-		return {
-			template: _isEditing ? getEditedPostTemplate() : null,
-			isEditing: _isEditing,
-		};
-	}, [] );
+			return {
+				template: _isEditing ? getEditedPostTemplate() : null,
+				isEditing: _isEditing,
+				isCommandCenterOpen: select( commandsStore ).isOpen(),
+			};
+		},
+		[]
+	);
 	const { clearSelectedBlock } = useDispatch( blockEditorStore );
 	const { setIsEditingTemplate } = useDispatch( editPostStore );
 	const { open: openCommandCenter } = useDispatch( commandsStore );
@@ -61,6 +65,8 @@ function DocumentActions() {
 				className="edit-post-document-actions__command"
 				onClick={ () => openCommandCenter() }
 				aria-label={ __( 'Command Palette' ) }
+				aria-haspopup="dialog"
+				aria-expanded={ isCommandCenterOpen }
 			>
 				<HStack
 					className="edit-post-document-actions__title"
diff --git a/packages/edit-site/src/components/header-edit-mode/document-actions/index.js b/packages/edit-site/src/components/header-edit-mode/document-actions/index.js
index c0beac2ed2218b..5d5785e342f4fb 100644
--- a/packages/edit-site/src/components/header-edit-mode/document-actions/index.js
+++ b/packages/edit-site/src/components/header-edit-mode/document-actions/index.js
@@ -142,6 +142,12 @@ function TemplateDocumentActions( { className, onBack } ) {
 }
 
 function BaseDocumentActions( { className, icon, children, onBack } ) {
+	const { isCommandCenterOpen } = useSelect( ( select ) => {
+		return {
+			isCommandCenterOpen: select( commandsStore ).isOpen(),
+		};
+	}, [] );
+
 	const { open: openCommandCenter } = useDispatch( commandsStore );
 	return (
 		<div
@@ -163,6 +169,8 @@ function BaseDocumentActions( { className, icon, children, onBack } ) {
 				className="edit-site-document-actions__command"
 				onClick={ () => openCommandCenter() }
 				aria-label={ __( 'Command Palette' ) }
+				aria-haspopup="dialog"
+				aria-expanded={ isCommandCenterOpen }
 			>
 				<HStack
 					className="edit-site-document-actions__title"

From f60434cefa7cd5eb74cebc6e105f2fe1485fe4e7 Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Mon, 11 Sep 2023 10:15:26 -0500
Subject: [PATCH 7/7] Add Command Palette (ctrl + k) tooltip

---
 .../src/components/header/document-actions/index.js          | 5 ++++-
 .../components/header-edit-mode/document-actions/index.js    | 5 ++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/edit-post/src/components/header/document-actions/index.js b/packages/edit-post/src/components/header/document-actions/index.js
index 86e6b812c39956..968ff7bb690fbf 100644
--- a/packages/edit-post/src/components/header/document-actions/index.js
+++ b/packages/edit-post/src/components/header/document-actions/index.js
@@ -64,9 +64,12 @@ function DocumentActions() {
 			<Button
 				className="edit-post-document-actions__command"
 				onClick={ () => openCommandCenter() }
-				aria-label={ __( 'Command Palette' ) }
 				aria-haspopup="dialog"
 				aria-expanded={ isCommandCenterOpen }
+				label={ `${ __(
+					'Command Palette'
+				) } ${ displayShortcut.primary( 'k' ) }` }
+				showTooltip
 			>
 				<HStack
 					className="edit-post-document-actions__title"
diff --git a/packages/edit-site/src/components/header-edit-mode/document-actions/index.js b/packages/edit-site/src/components/header-edit-mode/document-actions/index.js
index 5d5785e342f4fb..8b0b396462f8dc 100644
--- a/packages/edit-site/src/components/header-edit-mode/document-actions/index.js
+++ b/packages/edit-site/src/components/header-edit-mode/document-actions/index.js
@@ -168,9 +168,12 @@ function BaseDocumentActions( { className, icon, children, onBack } ) {
 			<Button
 				className="edit-site-document-actions__command"
 				onClick={ () => openCommandCenter() }
-				aria-label={ __( 'Command Palette' ) }
 				aria-haspopup="dialog"
 				aria-expanded={ isCommandCenterOpen }
+				label={ `${ __(
+					'Command Palette'
+				) } ${ displayShortcut.primary( 'k' ) }` }
+				showTooltip
 			>
 				<HStack
 					className="edit-site-document-actions__title"