From fef65c8aa063d9de24be92cb2bfcbb1702bc9ffd Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Tue, 12 Dec 2023 15:42:12 -0500
Subject: [PATCH 1/4] implement `Tabs`

---
 .../inspector-controls-tabs/index.js          | 68 +++++++++++--------
 1 file changed, 40 insertions(+), 28 deletions(-)

diff --git a/packages/block-editor/src/components/inspector-controls-tabs/index.js b/packages/block-editor/src/components/inspector-controls-tabs/index.js
index de192050d05cb..04b6f3a35889d 100644
--- a/packages/block-editor/src/components/inspector-controls-tabs/index.js
+++ b/packages/block-editor/src/components/inspector-controls-tabs/index.js
@@ -1,7 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { TabPanel } from '@wordpress/components';
+import {
+	Button,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -11,6 +14,9 @@ import SettingsTab from './settings-tab';
 import StylesTab from './styles-tab';
 import InspectorControls from '../inspector-controls';
 import useIsListViewTabDisabled from './use-is-list-view-tab-disabled';
+import { unlock } from '../../lock-unlock';
+
+const { Tabs } = unlock( componentsPrivateApis );
 
 export default function InspectorControlsTabs( {
 	blockName,
@@ -26,34 +32,40 @@ export default function InspectorControlsTabs( {
 	const initialTabName = ! useIsListViewTabDisabled( blockName )
 		? TAB_LIST_VIEW.name
 		: undefined;
-	return (
-		<TabPanel
-			className="block-editor-block-inspector__tabs"
-			tabs={ tabs }
-			initialTabName={ initialTabName }
-			key={ clientId }
-		>
-			{ ( tab ) => {
-				if ( tab.name === TAB_SETTINGS.name ) {
-					return (
-						<SettingsTab showAdvancedControls={ !! blockName } />
-					);
-				}
 
-				if ( tab.name === TAB_STYLES.name ) {
-					return (
-						<StylesTab
-							blockName={ blockName }
-							clientId={ clientId }
-							hasBlockStyles={ hasBlockStyles }
+	return (
+		<div className="block-editor-block-inspector__tabs">
+			<Tabs initialTabId={ initialTabName } key={ clientId }>
+				<Tabs.TabList>
+					{ tabs.map( ( tab ) => (
+						<Tabs.Tab
+							key={ tab.name }
+							tabId={ tab.name }
+							render={
+								<Button
+									icon={ tab.icon }
+									label={ tab.title }
+									className={ tab.className }
+									showTooltip
+								/>
+							}
 						/>
-					);
-				}
-
-				if ( tab.name === TAB_LIST_VIEW.name ) {
-					return <InspectorControls.Slot group="list" />;
-				}
-			} }
-		</TabPanel>
+					) ) }
+				</Tabs.TabList>
+				<Tabs.TabPanel tabId={ TAB_SETTINGS.name }>
+					<SettingsTab showAdvancedControls={ !! blockName } />
+				</Tabs.TabPanel>
+				<Tabs.TabPanel tabId={ TAB_STYLES.name }>
+					<StylesTab
+						blockName={ blockName }
+						clientId={ clientId }
+						hasBlockStyles={ hasBlockStyles }
+					/>
+				</Tabs.TabPanel>
+				<Tabs.TabPanel tabId={ TAB_LIST_VIEW.name }>
+					<InspectorControls.Slot group="list" />
+				</Tabs.TabPanel>
+			</Tabs>
+		</div>
 	);
 }

From 92e0d6cbd895eb1c3931986157cb71c15b918238 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 13 Dec 2023 18:12:46 -0500
Subject: [PATCH 2/4] focusable false

---
 .../src/components/inspector-controls-tabs/index.js         | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/block-editor/src/components/inspector-controls-tabs/index.js b/packages/block-editor/src/components/inspector-controls-tabs/index.js
index 04b6f3a35889d..13cf097c88a07 100644
--- a/packages/block-editor/src/components/inspector-controls-tabs/index.js
+++ b/packages/block-editor/src/components/inspector-controls-tabs/index.js
@@ -52,17 +52,17 @@ export default function InspectorControlsTabs( {
 						/>
 					) ) }
 				</Tabs.TabList>
-				<Tabs.TabPanel tabId={ TAB_SETTINGS.name }>
+				<Tabs.TabPanel tabId={ TAB_SETTINGS.name } focusable={ false }>
 					<SettingsTab showAdvancedControls={ !! blockName } />
 				</Tabs.TabPanel>
-				<Tabs.TabPanel tabId={ TAB_STYLES.name }>
+				<Tabs.TabPanel tabId={ TAB_STYLES.name } focusable={ false }>
 					<StylesTab
 						blockName={ blockName }
 						clientId={ clientId }
 						hasBlockStyles={ hasBlockStyles }
 					/>
 				</Tabs.TabPanel>
-				<Tabs.TabPanel tabId={ TAB_LIST_VIEW.name }>
+				<Tabs.TabPanel tabId={ TAB_LIST_VIEW.name } focusable={ false }>
 					<InspectorControls.Slot group="list" />
 				</Tabs.TabPanel>
 			</Tabs>

From 13d3bc8640f6af5f232b226a0960e306d6ae9163 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Fri, 15 Dec 2023 11:24:53 -0500
Subject: [PATCH 3/4] add `show-icon-labels` support

---
 .../src/components/inspector-controls-tabs/index.js             | 1 +
 .../src/components/inspector-controls-tabs/style.scss           | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/inspector-controls-tabs/index.js b/packages/block-editor/src/components/inspector-controls-tabs/index.js
index 13cf097c88a07..ad17c59a01cb0 100644
--- a/packages/block-editor/src/components/inspector-controls-tabs/index.js
+++ b/packages/block-editor/src/components/inspector-controls-tabs/index.js
@@ -43,6 +43,7 @@ export default function InspectorControlsTabs( {
 							tabId={ tab.name }
 							render={
 								<Button
+									aria-label={ tab.title }
 									icon={ tab.icon }
 									label={ tab.title }
 									className={ tab.className }
diff --git a/packages/block-editor/src/components/inspector-controls-tabs/style.scss b/packages/block-editor/src/components/inspector-controls-tabs/style.scss
index da83073a45590..6db9395af62ef 100644
--- a/packages/block-editor/src/components/inspector-controls-tabs/style.scss
+++ b/packages/block-editor/src/components/inspector-controls-tabs/style.scss
@@ -1,5 +1,5 @@
 .show-icon-labels {
-	.block-editor-block-inspector__tabs .components-tab-panel__tabs {
+	.block-editor-block-inspector__tabs [role="tablist"] {
 		.components-button.has-icon {
 			// Hide the button icons when labels are set to display...
 			svg {

From ac5468d46a6aa1b35b0ad9720a8746eeaae3cd57 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Tue, 19 Dec 2023 17:48:40 -0500
Subject: [PATCH 4/4] address feedback

---
 .../src/components/inspector-controls-tabs/index.js             | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/block-editor/src/components/inspector-controls-tabs/index.js b/packages/block-editor/src/components/inspector-controls-tabs/index.js
index ad17c59a01cb0..944ce6f322093 100644
--- a/packages/block-editor/src/components/inspector-controls-tabs/index.js
+++ b/packages/block-editor/src/components/inspector-controls-tabs/index.js
@@ -43,11 +43,9 @@ export default function InspectorControlsTabs( {
 							tabId={ tab.name }
 							render={
 								<Button
-									aria-label={ tab.title }
 									icon={ tab.icon }
 									label={ tab.title }
 									className={ tab.className }
-									showTooltip
 								/>
 							}
 						/>