Improve list view focus management first pass.

WordPress · Feb 11, 2025 · 410182d · 410182d
1 parent 9b387c8
commit 410182d
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 8 deletions.
diff --git a/packages/block-editor/src/components/list-view/block-select-button.js b/packages/block-editor/src/components/list-view/block-select-button.js
@@ -44,6 +44,7 @@ function ListViewBlockSelectButton(
 		draggable,
 		isExpanded,
 		ariaDescribedBy,
+		isSelected,
 	},
 	ref
 ) {
@@ -102,6 +103,7 @@ function ListViewBlockSelectButton(
 			href={ `#block-${ clientId }` }
 			aria-describedby={ ariaDescribedBy }
 			aria-expanded={ isExpanded }
+			data-is-selected={ isSelected ? true : undefined }
 		>
 			<ListViewExpander onClick={ onToggleExpanded } />
 			<BlockIcon

diff --git a/packages/editor/src/components/list-view-sidebar/index.js b/packages/editor/src/components/list-view-sidebar/index.js
@@ -60,11 +60,12 @@ export default function ListViewSidebar() {
 
 	// Must merge the refs together so focus can be handled properly in the next function.
 	const listViewContainerRef = useMergeRefs( [
-		focusOnMountRef,
 		listViewRef,
 		setDropZoneElement,
 	] );
 
+	const tabsPanelRef = useMergeRefs( [ focusOnMountRef, tabsRef ] );
+
 	/*
 	 * Callback function to handle list view or outline focus.
 	 *
@@ -77,15 +78,19 @@ export default function ListViewSidebar() {
 		const tabPanelFocus = focus.tabbable.find( tabsRef.current )[ 0 ];
 		// List view tab is selected.
 		if ( currentTab === 'list-view' ) {
-			// Either focus the list view or the tab panel. Must have a fallback because the list view does not render when there are no blocks.
-			const listViewApplicationFocus = focus.tabbable.find(
-				listViewRef.current
-			)[ 0 ];
+			// Either focus the list view or the tab panel. Must have a fallback
+			// because the list view does not render when there are no blocks.
+			const listViewSelectedItem = focus.tabbable
+				.find( listViewRef.current )
+				.filter( ( item ) =>
+					item.hasAttribute( 'data-is-selected' )
+				)[ 0 ];
 			const listViewFocusArea = sidebarRef.current.contains(
-				listViewApplicationFocus
+				listViewSelectedItem
 			)
-				? listViewApplicationFocus
+				? listViewSelectedItem
 				: tabPanelFocus;
+
 			listViewFocusArea.focus();
 			// Outline tab is selected.
 		} else {
@@ -147,7 +152,7 @@ export default function ListViewSidebar() {
 				onClose={ closeListView }
 				onSelect={ ( tabName ) => setTab( tabName ) }
 				defaultTabId="list-view"
-				ref={ tabsRef }
+				ref={ tabsPanelRef }
 				closeButtonLabel={ __( 'Close' ) }
 			/>
 		</div>