From 410182df90353587534a8bf7215ac7050ffa8205 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Tue, 11 Feb 2025 16:39:28 +0100
Subject: [PATCH] Improve list view focus management first pass.

---
 .../list-view/block-select-button.js          |  2 ++
 .../src/components/list-view-sidebar/index.js | 21 ++++++++++++-------
 2 files changed, 15 insertions(+), 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
index 3afbf3f5b5bc1..1775798852d5e 100644
--- 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
index c90479c23ec70..651151a13232f 100644
--- 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>