Fix site editor region navigation (#36709)

* Implement shortcuts and labels

* Use correct key for body

* Fix focusing navigation sidebar when navigating regions

* Only use detailed region labels when post type has loaded

Author: talldan

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

@@ -26,7 +26,10 @@ import {
 } from '@wordpress/editor';
 import { __ } from '@wordpress/i18n';
 import { PluginArea } from '@wordpress/plugins';
-import { ShortcutProvider } from '@wordpress/keyboard-shortcuts';
+import {
+	ShortcutProvider,
+	store as keyboardShortcutsStore,
+} from '@wordpress/keyboard-shortcuts';
 
 /**
  * Internal dependencies
@@ -62,6 +65,8 @@ function Editor( { initialSettings, onError } ) {
 		template,
 		templateResolved,
 		isNavigationOpen,
+		previousShortcut,
+		nextShortcut,
 	} = useSelect( ( select ) => {
 		const {
 			isInserterOpened,
@@ -98,6 +103,12 @@ function Editor( { initialSettings, onError } ) {
 				: false,
 			entityId: postId,
 			isNavigationOpen: isNavigationOpened(),
+			previousShortcut: select(
+				keyboardShortcutsStore
+			).getAllShortcutKeyCombinations( 'core/edit-site/previous-region' ),
+			nextShortcut: select(
+				keyboardShortcutsStore
+			).getAllShortcutKeyCombinations( 'core/edit-site/next-region' ),
 		};
 	}, [] );
 	const { updateEditorSettings } = useDispatch( editorStore );
@@ -282,6 +293,10 @@ function Editor( { initialSettings, onError } ) {
 													</>
 												}
 												footer={ <BlockBreadcrumb /> }
+												shortcuts={ {
+													previous: previousShortcut,
+													next: nextShortcut,
+												} }
 											/>
 											<WelcomeGuide />
 											<Popover.Slot />

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

@@ -136,6 +136,38 @@ function KeyboardShortcutsRegister() {
 				character: ',',
 			},
 		} );
+
+		registerShortcut( {
+			name: 'core/edit-site/next-region',
+			category: 'global',
+			description: __( 'Navigate to the next part of the editor.' ),
+			keyCombination: {
+				modifier: 'ctrl',
+				character: '`',
+			},
+			aliases: [
+				{
+					modifier: 'access',
+					character: 'n',
+				},
+			],
+		} );
+
+		registerShortcut( {
+			name: 'core/edit-site/previous-region',
+			category: 'global',
+			description: __( 'Navigate to the previous part of the editor.' ),
+			keyCombination: {
+				modifier: 'ctrlShift',
+				character: '`',
+			},
+			aliases: [
+				{
+					modifier: 'access',
+					character: 'p',
+				},
+			],
+		} );
 	}, [ registerShortcut ] );
 
 	return null;

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

@@ -1,25 +1,65 @@
 /**
  * WordPress dependencies
  */
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
 import { InterfaceSkeleton } from '@wordpress/interface';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 
 /**
  * Internal dependencies
  */
+import useRegisterShortcuts from './use-register-shortcuts';
 import Header from './header';
 import NavigationSidebar from '../navigation-sidebar';
 import Table from './table';
 
 export default function List( { templateType } ) {
+	useRegisterShortcuts();
 	const isDesktopViewport = useViewportMatch( 'medium' );
 
+	const { previousShortcut, nextShortcut } = useSelect( ( select ) => {
+		return {
+			previousShortcut: select(
+				keyboardShortcutsStore
+			).getAllShortcutKeyCombinations( 'core/edit-site/previous-region' ),
+			nextShortcut: select(
+				keyboardShortcutsStore
+			).getAllShortcutKeyCombinations( 'core/edit-site/next-region' ),
+		};
+	}, [] );
+
+	const postType = useSelect(
+		( select ) => select( coreStore ).getPostType( templateType ),
+		[ templateType ]
+	);
+
+	// `postType` could load in asynchronously. Only provide the detailed region labels if
+	// the postType has loaded, otherwise `InterfaceSkeleton` will fallback to the defaults.
+	const itemsListLabel = postType?.labels?.items_list;
+	const detailedRegionLabels = postType
+		? {
+				header: sprintf(
+					// translators: %s - the name of the page, 'Header' as in the header area of that page.
+					__( '%s - Header' ),
+					itemsListLabel
+				),
+				body: sprintf(
+					// translators: %s - the name of the page, 'Content' as in the content area of that page.
+					__( '%s - Content' ),
+					itemsListLabel
+				),
+		  }
+		: undefined;
+
 	return (
 		<InterfaceSkeleton
 			className="edit-site-list"
 			labels={ {
 				drawer: __( 'Navigation Sidebar' ),
+				...detailedRegionLabels,
 			} }
 			header={ <Header templateType={ templateType } /> }
 			drawer={
@@ -33,6 +73,10 @@ export default function List( { templateType } ) {
 					<Table templateType={ templateType } />
 				</main>
 			}
+			shortcuts={ {
+				previous: previousShortcut,
+				next: nextShortcut,
+			} }
 		/>
 	);
 }

packages/edit-site/src/components/list/use-register-shortcuts.js

@@ -0,0 +1,45 @@
+/**
+ * WordPress dependencies
+ */
+
+import { useDispatch } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+
+export default function useRegisterShortcuts() {
+	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
+	useEffect( () => {
+		registerShortcut( {
+			name: 'core/edit-site/next-region',
+			category: 'global',
+			description: __( 'Navigate to the next part of the editor.' ),
+			keyCombination: {
+				modifier: 'ctrl',
+				character: '`',
+			},
+			aliases: [
+				{
+					modifier: 'access',
+					character: 'n',
+				},
+			],
+		} );
+
+		registerShortcut( {
+			name: 'core/edit-site/previous-region',
+			category: 'global',
+			description: __( 'Navigate to the previous part of the editor.' ),
+			keyCombination: {
+				modifier: 'ctrlShift',
+				character: '`',
+			},
+			aliases: [
+				{
+					modifier: 'access',
+					character: 'p',
+				},
+			],
+		} );
+	}, [] );
+}

packages/interface/src/components/interface-skeleton/index.js

@@ -83,6 +83,7 @@ function InterfaceSkeleton(
 					className="interface-interface-skeleton__drawer"
 					role="region"
 					aria-label={ mergedLabels.drawer }
+					tabIndex="-1"
 				>
 					{ drawer }
 				</div>