@wordpress/edit-post 7.3.3 → 7.4.0

package/src/components/secondary-sidebar/list-view-sidebar.js

@@ -14,10 +14,12 @@ import {
 	useMergeRefs,
 } from '@wordpress/compose';
 import { useDispatch } from '@wordpress/data';
+import { focus } from '@wordpress/dom';
+import { useRef, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { closeSmall } from '@wordpress/icons';
+import { useShortcut } from '@wordpress/keyboard-shortcuts';
 import { ESCAPE } from '@wordpress/keycodes';
-import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -31,6 +33,7 @@ export default function ListViewSidebar() {
 	const focusOnMountRef = useFocusOnMount( 'firstElement' );
 	const headerFocusReturnRef = useFocusReturn();
 	const contentFocusReturnRef = useFocusReturn();
+
 	function closeOnEscape( event ) {
 		if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
 			event.preventDefault();
@@ -40,12 +43,63 @@ export default function ListViewSidebar() {
 
 	const [ tab, setTab ] = useState( 'list-view' );
 
+	// This ref refers to the sidebar as a whole.
+	const sidebarRef = useRef();
+	// This ref refers to the list view tab button.
+	const listViewTabRef = useRef();
+	// This ref refers to the outline tab button.
+	const outlineTabRef = useRef();
+	// This ref refers to the list view application area.
+	const listViewRef = useRef();
+
+	/*
+	 * Callback function to handle list view or outline focus.
+	 *
+	 * @param {string} currentTab The current tab. Either list view or outline.
+	 *
+	 * @return void
+	 */
+	function handleSidebarFocus( currentTab ) {
+		// List view tab is selected.
+		if ( currentTab === 'list-view' ) {
+			// Either focus the list view or the list view tab button. Must have a fallback because the list view does not render when there are no blocks.
+			const listViewApplicationFocus = focus.tabbable.find(
+				listViewRef.current
+			)[ 0 ];
+			const listViewFocusArea = sidebarRef.current.contains(
+				listViewApplicationFocus
+			)
+				? listViewApplicationFocus
+				: listViewTabRef.current;
+			listViewFocusArea.focus();
+			// Outline tab is selected.
+		} else {
+			outlineTabRef.current.focus();
+		}
+	}
+
+	// This only fires when the sidebar is open because of the conditional rendering. It is the same shortcut to open but that is defined as a global shortcut and only fires when the sidebar is closed.
+	useShortcut( 'core/edit-post/toggle-list-view', () => {
+		// If the sidebar has focus, it is safe to close.
+		if (
+			sidebarRef.current.contains(
+				sidebarRef.current.ownerDocument.activeElement
+			)
+		) {
+			setIsListViewOpened( false );
+			// If the list view or outline does not have focus, focus should be moved to it.
+		} else {
+			handleSidebarFocus( tab );
+		}
+	} );
+
 	return (
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div
 			aria-label={ __( 'Document Overview' ) }
 			className="edit-post-editor__document-overview-panel"
 			onKeyDown={ closeOnEscape }
+			ref={ sidebarRef }
 		>
 			<div
 				className="edit-post-editor__document-overview-panel-header components-panel__header edit-post-sidebar__panel-tabs"
@@ -59,6 +113,7 @@ export default function ListViewSidebar() {
 				<ul>
 					<li>
 						<Button
+							ref={ listViewTabRef }
 							onClick={ () => {
 								setTab( 'list-view' );
 							} }
@@ -73,6 +128,7 @@ export default function ListViewSidebar() {
 					</li>
 					<li>
 						<Button
+							ref={ outlineTabRef }
 							onClick={ () => {
 								setTab( 'outline' );
 							} }
@@ -91,6 +147,7 @@ export default function ListViewSidebar() {
 				ref={ useMergeRefs( [
 					contentFocusReturnRef,
 					focusOnMountRef,
+					listViewRef,
 				] ) }
 				className="edit-post-editor__list-view-container"
 			>

package/src/editor.js

@@ -139,6 +139,7 @@ function Editor( { postId, postType, settings, initialEdits, ...props } ) {
 	}, [
 		settings,
 		hasFixedToolbar,
+		hasInlineToolbar,
 		focusMode,
 		isDistractionFree,
 		hiddenBlockTypes,