address tab flow race condition

WordPress · Feb 1, 2024 · 6aa6f3f · 6aa6f3f
1 parent 306abfb
commit 6aa6f3f
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 7 deletions.
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/index.js b/packages/edit-site/src/components/sidebar-edit-mode/index.js
@@ -7,7 +7,7 @@ import {
 } from '@wordpress/components';
 import { isRTL, __ } from '@wordpress/i18n';
 import { drawerLeft, drawerRight } from '@wordpress/icons';
-import { useCallback, useContext, useEffect } from '@wordpress/element';
+import { useCallback, useContext, useEffect, useRef } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as interfaceStore } from '@wordpress/interface';
 import { store as blockEditorStore } from '@wordpress/block-editor';
@@ -39,11 +39,38 @@ const FillContents = ( {
 	isEditingPage,
 	supportsGlobalStyles,
 } ) => {
+	const tabListRef = useRef( null );
 	// Because `DefaultSidebar` renders a `ComplementaryArea`, we
 	// need to forward the `Tabs` context so it can be passed through the
 	// underlying slot/fill.
 	const tabsContextValue = useContext( Tabs.Context );
 
+	// This effect addresses a race condition caused by tabbing from the last
+	// block in the editor into the settings sidebar. Without this effect, the
+	// selected tab and browser focus can become separated in an unexpected way.
+	useEffect( () => {
+		const tabsElements = Array.from(
+			tabListRef.current?.querySelectorAll( '[role="tab"]' ) || []
+		);
+		const selectedTabElement = tabsElements.find(
+			// We are purposefully using a custom `data-tab-id` attribute here
+			// because we don't want rely on any assumptions about `Tabs`
+			// component internals.
+			( element ) => element.getAttribute( 'data-tab-id' ) === sidebarName
+		);
+		const activeElement = selectedTabElement?.ownerDocument.activeElement;
+		const tabsHasFocus = tabsElements.some( ( element ) => {
+			return activeElement && activeElement.id === element.id;
+		} );
+		if (
+			tabsHasFocus &&
+			selectedTabElement &&
+			selectedTabElement.id !== activeElement?.id
+		) {
+			selectedTabElement?.focus();
+		}
+	}, [ sidebarName ] );
+
 	return (
 		<>
 			<DefaultSidebar
@@ -53,7 +80,7 @@ const FillContents = ( {
 				closeLabel={ __( 'Close Settings' ) }
 				header={
 					<Tabs.Context.Provider value={ tabsContextValue }>
-						<SettingsHeader />
+						<SettingsHeader ref={ tabListRef } />
 					</Tabs.Context.Provider>
 				}
 				headerClassName="edit-site-sidebar-edit-mode__panel-tabs"

diff --git a/packages/edit-site/src/components/sidebar-edit-mode/settings-header/index.js b/packages/edit-site/src/components/sidebar-edit-mode/settings-header/index.js
@@ -5,6 +5,7 @@ import { privateApis as componentsPrivateApis } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -14,18 +15,30 @@ import { unlock } from '../../../lock-unlock';
 
 const { Tabs } = unlock( componentsPrivateApis );
 
-const SettingsHeader = () => {
+const SettingsHeader = ( _, ref ) => {
 	const postTypeLabel = useSelect(
 		( select ) => select( editorStore ).getPostTypeLabel(),
 		[]
 	);
 
 	return (
-		<Tabs.TabList>
-			<Tabs.Tab tabId={ SIDEBAR_TEMPLATE }>{ postTypeLabel }</Tabs.Tab>
-			<Tabs.Tab tabId={ SIDEBAR_BLOCK }>{ __( 'Block' ) }</Tabs.Tab>
+		<Tabs.TabList ref={ ref }>
+			<Tabs.Tab
+				tabId={ SIDEBAR_TEMPLATE }
+				// Used for focus management in the SettingsSidebar component.
+				data-tab-id={ SIDEBAR_TEMPLATE }
+			>
+				{ postTypeLabel }
+			</Tabs.Tab>
+			<Tabs.Tab
+				tabId={ SIDEBAR_BLOCK }
+				// Used for focus management in the SettingsSidebar component.
+				data-tab-id={ SIDEBAR_BLOCK }
+			>
+				{ __( 'Block' ) }
+			</Tabs.Tab>
 		</Tabs.TabList>
 	);
 };
 
-export default SettingsHeader;
+export default forwardRef( SettingsHeader );