@wordpress/components 25.13.0 → 25.15.1-next.79a6196f.0

package/src/tabs/test/index.tsx

@@ -2,12 +2,12 @@
  * External dependencies
  */
 import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { press, click } from '@ariakit/test';
 
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
+import { useEffect, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -16,7 +16,7 @@ import Tabs from '..';
 import type { TabsProps } from '../types';
 
 type Tab = {
-	id: string;
+	tabId: string;
 	title: string;
 	content: React.ReactNode;
 	tab: {
@@ -30,19 +30,19 @@ type Tab = {
 
 const TABS: Tab[] = [
 	{
-		id: 'alpha',
+		tabId: 'alpha',
 		title: 'Alpha',
 		content: 'Selected tab: Alpha',
 		tab: { className: 'alpha-class' },
 	},
 	{
-		id: 'beta',
+		tabId: 'beta',
 		title: 'Beta',
 		content: 'Selected tab: Beta',
 		tab: { className: 'beta-class' },
 	},
 	{
-		id: 'gamma',
+		tabId: 'gamma',
 		title: 'Gamma',
 		content: 'Selected tab: Gamma',
 		tab: { className: 'gamma-class' },
@@ -52,7 +52,7 @@ const TABS: Tab[] = [
 const TABS_WITH_DELTA: Tab[] = [
 	...TABS,
 	{
-		id: 'delta',
+		tabId: 'delta',
 		title: 'Delta',
 		content: 'Selected tab: Delta',
 		tab: { className: 'delta-class' },
@@ -70,8 +70,8 @@ const UncontrolledTabs = ( {
 			<Tabs.TabList>
 				{ tabs.map( ( tabObj ) => (
 					<Tabs.Tab
-						key={ tabObj.id }
-						id={ tabObj.id }
+						key={ tabObj.tabId }
+						tabId={ tabObj.tabId }
 						className={ tabObj.tab.className }
 						disabled={ tabObj.tab.disabled }
 					>
@@ -81,8 +81,8 @@ const UncontrolledTabs = ( {
 			</Tabs.TabList>
 			{ tabs.map( ( tabObj ) => (
 				<Tabs.TabPanel
-					key={ tabObj.id }
-					id={ tabObj.id }
+					key={ tabObj.tabId }
+					tabId={ tabObj.tabId }
 					focusable={ tabObj.tabpanel?.focusable }
 				>
 					{ tabObj.content }
@@ -102,6 +102,10 @@ const ControlledTabs = ( {
 		string | undefined | null
 	>( props.selectedTabId );
 
+	useEffect( () => {
+		setSelectedTabId( props.selectedTabId );
+	}, [ props.selectedTabId ] );
+
 	return (
 		<Tabs
 			{ ...props }
@@ -114,8 +118,8 @@ const ControlledTabs = ( {
 			<Tabs.TabList>
 				{ tabs.map( ( tabObj ) => (
 					<Tabs.Tab
-						key={ tabObj.id }
-						id={ tabObj.id }
+						key={ tabObj.tabId }
+						tabId={ tabObj.tabId }
 						className={ tabObj.tab.className }
 						disabled={ tabObj.tab.disabled }
 					>
@@ -124,7 +128,7 @@ const ControlledTabs = ( {
 				) ) }
 			</Tabs.TabList>
 			{ tabs.map( ( tabObj ) => (
-				<Tabs.TabPanel key={ tabObj.id } id={ tabObj.id }>
+				<Tabs.TabPanel key={ tabObj.tabId } tabId={ tabObj.tabId }>
 					{ tabObj.content }
 				</Tabs.TabPanel>
 			) ) }
@@ -184,28 +188,24 @@ describe( 'Tabs', () => {
 	} );
 	describe( 'Focus Behavior', () => {
 		it( 'should focus on the related TabPanel when pressing the Tab key', async () => {
-			const user = userEvent.setup();
-
 			render( <UncontrolledTabs tabs={ TABS } /> );
 
 			const selectedTabPanel = await screen.findByRole( 'tabpanel' );
 
 			// Tab should initially focus the first tab in the tablist, which
 			// is Alpha.
-			await user.keyboard( '[Tab]' );
+			await press.Tab();
 			expect(
 				await screen.findByRole( 'tab', { name: 'Alpha' } )
 			).toHaveFocus();
 
 			// By default the tabpanel should receive focus
-			await user.keyboard( '[Tab]' );
+			await press.Tab();
 			expect( selectedTabPanel ).toHaveFocus();
 		} );
 		it( 'should not focus on the related TabPanel when pressing the Tab key if `focusable: false` is set', async () => {
-			const user = userEvent.setup();
-
 			const TABS_WITH_ALPHA_FOCUSABLE_FALSE = TABS.map( ( tabObj ) =>
-				tabObj.id === 'alpha'
+				tabObj.tabId === 'alpha'
 					? {
 							...tabObj,
 							content: (
@@ -229,13 +229,13 @@ describe( 'Tabs', () => {
 
 			// Tab should initially focus the first tab in the tablist, which
 			// is Alpha.
-			await user.keyboard( '[Tab]' );
+			await press.Tab();
 			expect(
 				await screen.findByRole( 'tab', { name: 'Alpha' } )
 			).toHaveFocus();
 			// Because the alpha tabpanel is set to `focusable: false`, pressing
 			// the Tab key should focus the button, not the tabpanel
-			await user.keyboard( '[Tab]' );
+			await press.Tab();
 			expect( alphaButton ).toHaveFocus();
 		} );
 	} );
@@ -258,7 +258,6 @@ describe( 'Tabs', () => {
 
 	describe( 'Tab Activation', () => {
 		it( 'defaults to automatic tab activation (pointer clicks)', async () => {
-			const user = userEvent.setup();
 			const mockOnSelect = jest.fn();
 
 			render(
@@ -273,7 +272,7 @@ describe( 'Tabs', () => {
 			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'alpha' );
 
 			// Click on Beta, make sure beta is the selected tab
-			await user.click( screen.getByRole( 'tab', { name: 'Beta' } ) );
+			await click( screen.getByRole( 'tab', { name: 'Beta' } ) );
 
 			expect( await getSelectedTab() ).toHaveTextContent( 'Beta' );
 			expect(
@@ -282,7 +281,7 @@ describe( 'Tabs', () => {
 			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'beta' );
 
 			// Click on Alpha, make sure beta is the selected tab
-			await user.click( screen.getByRole( 'tab', { name: 'Alpha' } ) );
+			await click( screen.getByRole( 'tab', { name: 'Alpha' } ) );
 
 			expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
 			expect(
@@ -292,7 +291,6 @@ describe( 'Tabs', () => {
 		} );
 
 		it( 'defaults to automatic tab activation (arrow keys)', async () => {
-			const user = userEvent.setup();
 			const mockOnSelect = jest.fn();
 
 			render(
@@ -307,12 +305,12 @@ describe( 'Tabs', () => {
 			// Tab to focus the tablist. Make sure alpha is focused.
 			expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
 			expect( await getSelectedTab() ).not.toHaveFocus();
-			await user.keyboard( '[Tab]' );
+			await press.Tab();
 			expect( await getSelectedTab() ).toHaveFocus();
 
 			// Navigate forward with arrow keys and make sure the Beta tab is
 			// selected automatically.
-			await user.keyboard( '[ArrowRight]' );
+			await press.ArrowRight();
 			expect( await getSelectedTab() ).toHaveTextContent( 'Beta' );
 			expect( await getSelectedTab() ).toHaveFocus();
 			expect( mockOnSelect ).toHaveBeenCalledTimes( 2 );
@@ -320,7 +318,7 @@ describe( 'Tabs', () => {
 
 			// Navigate backwards with arrow keys. Make sure alpha is
 			// selected automatically.
-			await user.keyboard( '[ArrowLeft]' );
+			await press.ArrowLeft();
 			expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
 			expect( await getSelectedTab() ).toHaveFocus();
 			expect( mockOnSelect ).toHaveBeenCalledTimes( 3 );
@@ -328,7 +326,6 @@ describe( 'Tabs', () => {
 		} );
 
 		it( 'wraps around the last/first tab when using arrow keys', async () => {
-			const user = userEvent.setup();
 			const mockOnSelect = jest.fn();
 
 			render(
@@ -341,12 +338,12 @@ describe( 'Tabs', () => {
 			// Tab to focus the tablist. Make sure Alpha is focused.
 			expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
 			expect( await getSelectedTab() ).not.toHaveFocus();
-			await user.keyboard( '[Tab]' );
+			await press.Tab();
 			expect( await getSelectedTab() ).toHaveFocus();
 
 			// Navigate backwards with arrow keys and make sure that the Gamma tab
 			// (the last tab) is selected automatically.
-			await user.keyboard( '[ArrowLeft]' );
+			await press.ArrowLeft();
 			expect( await getSelectedTab() ).toHaveTextContent( 'Gamma' );
 			expect( await getSelectedTab() ).toHaveFocus();
 			expect( mockOnSelect ).toHaveBeenCalledTimes( 2 );
@@ -354,7 +351,7 @@ describe( 'Tabs', () => {
 
 			// Navigate forward with arrow keys. Make sure alpha (the first tab) is
 			// selected automatically.
-			await user.keyboard( '[ArrowRight]' );
+			await press.ArrowRight();
 			expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
 			expect( await getSelectedTab() ).toHaveFocus();
 			expect( mockOnSelect ).toHaveBeenCalledTimes( 3 );
@@ -362,7 +359,6 @@ describe( 'Tabs', () => {
 		} );
 
 		it( 'should not move tab selection when pressing the up/down arrow keys, unless the orientation is changed to `vertical`', async () => {
-			const user = userEvent.setup();
 			const mockOnSelect = jest.fn();
 
 			const { rerender } = render(
@@ -377,18 +373,18 @@ describe( 'Tabs', () => {
 			// Tab to focus the tablist. Make sure alpha is focused.
 			expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
 			expect( await getSelectedTab() ).not.toHaveFocus();
-			await user.keyboard( '[Tab]' );
+			await press.Tab();
 			expect( await getSelectedTab() ).toHaveFocus();
 
 			// Press the arrow up key, nothing happens.
-			await user.keyboard( '[ArrowUp]' );
+			await press.ArrowUp();
 			expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
 			expect( await getSelectedTab() ).toHaveFocus();
 			expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
 			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'alpha' );
 
 			// Press the arrow down key, nothing happens
-			await user.keyboard( '[ArrowDown]' );
+			await press.ArrowDown();
 			expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
 			expect( await getSelectedTab() ).toHaveFocus();
 			expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
@@ -415,7 +411,7 @@ describe( 'Tabs', () => {
 
 			// Navigate forward with arrow keys and make sure the Beta tab is
 			// selected automatically.
-			await user.keyboard( '[ArrowDown]' );
+			await press.ArrowDown();
 			expect( await getSelectedTab() ).toHaveTextContent( 'Beta' );
 			expect( await getSelectedTab() ).toHaveFocus();
 			expect( mockOnSelect ).toHaveBeenCalledTimes( 2 );
@@ -423,7 +419,7 @@ describe( 'Tabs', () => {
 
 			// Navigate backwards with arrow keys. Make sure alpha is
 			// selected automatically.
-			await user.keyboard( '[ArrowUp]' );
+			await press.ArrowUp();
 			expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
 			expect( await getSelectedTab() ).toHaveFocus();
 			expect( mockOnSelect ).toHaveBeenCalledTimes( 3 );
@@ -431,7 +427,7 @@ describe( 'Tabs', () => {
 
 			// Navigate backwards with arrow keys. Make sure alpha is
 			// selected automatically.
-			await user.keyboard( '[ArrowUp]' );
+			await press.ArrowUp();
 			expect( await getSelectedTab() ).toHaveTextContent( 'Gamma' );
 			expect( await getSelectedTab() ).toHaveFocus();
 			expect( mockOnSelect ).toHaveBeenCalledTimes( 4 );
@@ -439,7 +435,7 @@ describe( 'Tabs', () => {
 
 			// Navigate backwards with arrow keys. Make sure alpha is
 			// selected automatically.
-			await user.keyboard( '[ArrowDown]' );
+			await press.ArrowDown();
 			expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
 			expect( await getSelectedTab() ).toHaveFocus();
 			expect( mockOnSelect ).toHaveBeenCalledTimes( 5 );
@@ -447,11 +443,10 @@ describe( 'Tabs', () => {
 		} );
 
 		it( 'should move focus on a tab even if disabled with arrow key, but not with pointer clicks', async () => {
-			const user = userEvent.setup();
 			const mockOnSelect = jest.fn();
 
 			const TABS_WITH_DELTA_DISABLED = TABS_WITH_DELTA.map( ( tabObj ) =>
-				tabObj.id === 'delta'
+				tabObj.tabId === 'delta'
 					? {
 							...tabObj,
 							tab: {
@@ -477,7 +472,7 @@ describe( 'Tabs', () => {
 			// Tab to focus the tablist. Make sure Alpha is focused.
 			expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
 			expect( await getSelectedTab() ).not.toHaveFocus();
-			await user.keyboard( '[Tab]' );
+			await press.Tab();
 			expect( await getSelectedTab() ).toHaveFocus();
 			// Confirm onSelect has not been re-called
 			expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
@@ -487,7 +482,9 @@ describe( 'Tabs', () => {
 			//   it was the tab that was last selected before delta. Therefore, the
 			//   `mockOnSelect` function gets called only twice (and not three times)
 			// - it will receive focus, when using arrow keys
-			await user.keyboard( '[ArrowRight][ArrowRight][ArrowRight]' );
+			await press.ArrowRight();
+			await press.ArrowRight();
+			await press.ArrowRight();
 			expect( await getSelectedTab() ).toHaveTextContent( 'Gamma' );
 			expect(
 				screen.getByRole( 'tab', { name: 'Delta' } )
@@ -498,7 +495,7 @@ describe( 'Tabs', () => {
 			// Navigate backwards with arrow keys. The gamma tab receives focus.
 			// The `mockOnSelect` callback doesn't fire, since the gamma tab was
 			// already selected.
-			await user.keyboard( '[ArrowLeft]' );
+			await press.ArrowLeft();
 			expect( await getSelectedTab() ).toHaveTextContent( 'Gamma' );
 			expect( await getSelectedTab() ).toHaveFocus();
 			expect( mockOnSelect ).toHaveBeenCalledTimes( 3 );
@@ -506,37 +503,26 @@ describe( 'Tabs', () => {
 			// Click on the disabled tab. Compared to using arrow keys to move the
 			// focus, disabled tabs ignore pointer clicks — and therefore, they don't
 			// receive focus, nor they cause the `mockOnSelect` function to fire.
-			await user.click( screen.getByRole( 'tab', { name: 'Delta' } ) );
+			await click( screen.getByRole( 'tab', { name: 'Delta' } ) );
 			expect( await getSelectedTab() ).toHaveTextContent( 'Gamma' );
 			expect( await getSelectedTab() ).toHaveFocus();
 			expect( mockOnSelect ).toHaveBeenCalledTimes( 3 );
 		} );
 
 		it( 'should not focus the next tab when the Tab key is pressed', async () => {
-			const user = userEvent.setup();
-
 			render( <UncontrolledTabs tabs={ TABS } /> );
 
 			// Tab should initially focus the first tab in the tablist, which
 			// is Alpha.
-			await user.keyboard( '[Tab]' );
+			await press.Tab();
 			expect(
 				await screen.findByRole( 'tab', { name: 'Alpha' } )
 			).toHaveFocus();
 
-			// This assertion ensures the component has had time to fully
-			// render, preventing flakiness.
-			// see https://github.com/WordPress/gutenberg/pull/55950
-			await waitFor( () =>
-				expect(
-					screen.getByRole( 'tab', { name: 'Beta' } )
-				).toHaveAttribute( 'tabindex', '-1' )
-			);
-
 			// Because all other tabs should have `tabindex=-1`, pressing Tab
 			// should NOT move the focus to the next tab, which is Beta.
 			// Instead, focus should go to the currently selected tabpanel (alpha).
-			await user.keyboard( '[Tab]' );
+			await press.Tab();
 			expect(
 				await screen.findByRole( 'tabpanel', {
 					name: 'Alpha',
@@ -545,7 +531,6 @@ describe( 'Tabs', () => {
 		} );
 
 		it( 'switches to manual tab activation when the `selectOnMove` prop is set to `false`', async () => {
-			const user = userEvent.setup();
 			const mockOnSelect = jest.fn();
 
 			render(
@@ -563,7 +548,7 @@ describe( 'Tabs', () => {
 
 			// Click on Alpha and make sure it is selected.
 			// onSelect shouldn't fire since the selected tab didn't change.
-			await user.click( screen.getByRole( 'tab', { name: 'Alpha' } ) );
+			await click( screen.getByRole( 'tab', { name: 'Alpha' } ) );
 			expect(
 				await screen.findByRole( 'tab', { name: 'Alpha' } )
 			).toHaveFocus();
@@ -574,13 +559,13 @@ describe( 'Tabs', () => {
 			// that the tab selection happens only when pressing the spacebar
 			// or enter key. onSelect shouldn't fire since the selected tab
 			// didn't change.
-			await user.keyboard( '[ArrowRight]' );
+			await press.ArrowRight();
 			expect(
 				await screen.findByRole( 'tab', { name: 'Beta' } )
 			).toHaveFocus();
 			expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
 
-			await user.keyboard( '[Enter]' );
+			await press.Enter();
 			expect( mockOnSelect ).toHaveBeenCalledTimes( 2 );
 			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'beta' );
 
@@ -588,7 +573,7 @@ describe( 'Tabs', () => {
 			// focused, but that tab selection happens only when pressing the
 			// spacebar or enter key. onSelect shouldn't fire since the selected
 			// tab didn't change.
-			await user.keyboard( '[ArrowRight]' );
+			await press.ArrowRight();
 			expect(
 				await screen.findByRole( 'tab', { name: 'Gamma' } )
 			).toHaveFocus();
@@ -597,7 +582,7 @@ describe( 'Tabs', () => {
 				screen.getByRole( 'tab', { name: 'Gamma' } )
 			).toHaveFocus();
 
-			await user.keyboard( '[Space]' );
+			await press.Space();
 			expect( mockOnSelect ).toHaveBeenCalledTimes( 3 );
 			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'gamma' );
 		} );
@@ -623,7 +608,7 @@ describe( 'Tabs', () => {
 			} );
 			it( 'should not load any tab if the active tab is removed and there are no enabled tabs', async () => {
 				const TABS_WITH_BETA_GAMMA_DISABLED = TABS.map( ( tabObj ) =>
-					tabObj.id !== 'alpha'
+					tabObj.tabId !== 'alpha'
 						? {
 								...tabObj,
 								tab: {
@@ -700,7 +685,6 @@ describe( 'Tabs', () => {
 			} );
 
 			it( 'should fall back to the tab associated to `initialTabId` if the currently active tab is removed', async () => {
-				const user = userEvent.setup();
 				const mockOnSelect = jest.fn();
 
 				const { rerender } = render(
@@ -713,9 +697,7 @@ describe( 'Tabs', () => {
 
 				expect( await getSelectedTab() ).toHaveTextContent( 'Gamma' );
 
-				await user.click(
-					screen.getByRole( 'tab', { name: 'Alpha' } )
-				);
+				await click( screen.getByRole( 'tab', { name: 'Alpha' } ) );
 				expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
 				expect( mockOnSelect ).toHaveBeenLastCalledWith( 'alpha' );
 
@@ -731,7 +713,6 @@ describe( 'Tabs', () => {
 			} );
 
 			it( 'should fall back to the tab associated to `initialTabId` if the currently active tab becomes disabled', async () => {
-				const user = userEvent.setup();
 				const mockOnSelect = jest.fn();
 
 				const { rerender } = render(
@@ -744,14 +725,12 @@ describe( 'Tabs', () => {
 
 				expect( await getSelectedTab() ).toHaveTextContent( 'Gamma' );
 
-				await user.click(
-					screen.getByRole( 'tab', { name: 'Alpha' } )
-				);
+				await click( screen.getByRole( 'tab', { name: 'Alpha' } ) );
 				expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
 				expect( mockOnSelect ).toHaveBeenLastCalledWith( 'alpha' );
 
 				const TABS_WITH_ALPHA_DISABLED = TABS.map( ( tabObj ) =>
-					tabObj.id === 'alpha'
+					tabObj.tabId === 'alpha'
 						? {
 								...tabObj,
 								tab: {
@@ -822,12 +801,11 @@ describe( 'Tabs', () => {
 
 		describe( 'Disabled tab', () => {
 			it( 'should disable the tab when `disabled` is `true`', async () => {
-				const user = userEvent.setup();
 				const mockOnSelect = jest.fn();
 
 				const TABS_WITH_DELTA_DISABLED = TABS_WITH_DELTA.map(
 					( tabObj ) =>
-						tabObj.id === 'delta'
+						tabObj.tabId === 'delta'
 							? {
 									...tabObj,
 									tab: {
@@ -853,20 +831,15 @@ describe( 'Tabs', () => {
 				expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
 				expect( mockOnSelect ).toHaveBeenLastCalledWith( 'alpha' );
 
+				// Move focus to the tablist, make sure alpha is focused.
+				await press.Tab();
+				expect(
+					screen.getByRole( 'tab', { name: 'Alpha' } )
+				).toHaveFocus();
+
 				// onSelect should not be called since the disabled tab is
 				// highlighted, but not selected.
-				await user.keyboard( '[Tab]' );
-
-				// This assertion ensures focus has time to move to the first
-				// tab before the test proceeds, preventing flakiness.
-				// see https://github.com/WordPress/gutenberg/pull/55950
-				await waitFor( () =>
-					expect(
-						screen.getByRole( 'tab', { name: 'Alpha' } )
-					).toHaveFocus()
-				);
-
-				await user.keyboard( '[ArrowLeft]' );
+				await press.ArrowLeft();
 				expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
 
 				// Delta (which is disabled) has focus
@@ -880,7 +853,7 @@ describe( 'Tabs', () => {
 
 			it( 'should select first enabled tab when the initial tab is disabled', async () => {
 				const TABS_WITH_ALPHA_DISABLED = TABS.map( ( tabObj ) =>
-					tabObj.id === 'alpha'
+					tabObj.tabId === 'alpha'
 						? {
 								...tabObj,
 								tab: {
@@ -909,7 +882,7 @@ describe( 'Tabs', () => {
 
 			it( 'should select first enabled tab when the tab associated to `initialTabId` is disabled', async () => {
 				const TABS_ONLY_GAMMA_ENABLED = TABS.map( ( tabObj ) =>
-					tabObj.id !== 'gamma'
+					tabObj.tabId !== 'gamma'
 						? {
 								...tabObj,
 								tab: {
@@ -951,7 +924,7 @@ describe( 'Tabs', () => {
 				expect( mockOnSelect ).toHaveBeenLastCalledWith( 'alpha' );
 
 				const TABS_WITH_ALPHA_DISABLED = TABS.map( ( tabObj ) =>
-					tabObj.id === 'alpha'
+					tabObj.tabId === 'alpha'
 						? {
 								...tabObj,
 								tab: {
@@ -998,7 +971,7 @@ describe( 'Tabs', () => {
 				expect( await getSelectedTab() ).toHaveTextContent( 'Gamma' );
 
 				const TABS_WITH_GAMMA_DISABLED = TABS.map( ( tabObj ) =>
-					tabObj.id === 'gamma'
+					tabObj.tabId === 'gamma'
 						? {
 								...tabObj,
 								tab: {
@@ -1067,14 +1040,10 @@ describe( 'Tabs', () => {
 				/>
 			);
 
-			// No tab should be selected i.e. it doesn't fall back to first tab.
-			// `waitFor` is needed here to prevent testing library from
-			// throwing a 'not wrapped in `act()`' error.
-			await waitFor( () =>
-				expect(
-					screen.queryByRole( 'tab', { selected: true } )
-				).not.toBeInTheDocument()
-			);
+			expect(
+				screen.queryByRole( 'tab', { selected: true } )
+			).not.toBeInTheDocument();
+
 			// No tabpanel should be rendered either
 			expect( screen.queryByRole( 'tabpanel' ) ).not.toBeInTheDocument();
 		} );
@@ -1086,7 +1055,7 @@ describe( 'Tabs', () => {
 			// Remove beta
 			rerender(
 				<ControlledTabs
-					tabs={ TABS.filter( ( tab ) => tab.id !== 'beta' ) }
+					tabs={ TABS.filter( ( tab ) => tab.tabId !== 'beta' ) }
 					selectedTabId="beta"
 				/>
 			);
@@ -1120,7 +1089,7 @@ describe( 'Tabs', () => {
 			it( 'should not render any tab if `selectedTabId` refers to a disabled tab', async () => {
 				const TABS_WITH_DELTA_WITH_BETA_DISABLED = TABS_WITH_DELTA.map(
 					( tabObj ) =>
-						tabObj.id === 'beta'
+						tabObj.tabId === 'beta'
 							? {
 									...tabObj,
 									tab: {
@@ -1157,7 +1126,7 @@ describe( 'Tabs', () => {
 				expect( await getSelectedTab() ).toHaveTextContent( 'Beta' );
 
 				const TABS_WITH_BETA_DISABLED = TABS.map( ( tabObj ) =>
-					tabObj.id === 'beta'
+					tabObj.tabId === 'beta'
 						? {
 								...tabObj,
 								tab: {
@@ -1203,5 +1172,166 @@ describe( 'Tabs', () => {
 				).not.toBeInTheDocument();
 			} );
 		} );
+
+		describe( 'When `selectOnMove` is `true`', () => {
+			it( 'should automatically select a newly focused tab', async () => {
+				render( <ControlledTabs tabs={ TABS } selectedTabId="beta" /> );
+
+				await press.Tab();
+
+				// Tab key should focus the currently selected tab, which is Beta.
+				expect( await getSelectedTab() ).toHaveTextContent( 'Beta' );
+				expect( await getSelectedTab() ).toHaveFocus();
+
+				// Arrow keys should select and move focus to the next tab.
+				await press.ArrowRight();
+				expect( await getSelectedTab() ).toHaveTextContent( 'Gamma' );
+				expect( await getSelectedTab() ).toHaveFocus();
+			} );
+			it( 'should automatically update focus when the selected tab is changed by the controlling component', async () => {
+				const { rerender } = render(
+					<ControlledTabs tabs={ TABS } selectedTabId="beta" />
+				);
+
+				// Tab key should focus the currently selected tab, which is Beta.
+				await press.Tab();
+				expect( await getSelectedTab() ).toHaveTextContent( 'Beta' );
+				expect( await getSelectedTab() ).toHaveFocus();
+
+				rerender(
+					<ControlledTabs tabs={ TABS } selectedTabId="gamma" />
+				);
+
+				// When the selected tab is changed, it should automatically receive focus.
+				expect( await getSelectedTab() ).toHaveTextContent( 'Gamma' );
+				expect( await getSelectedTab() ).toHaveFocus();
+			} );
+		} );
+		describe( 'When `selectOnMove` is `false`', () => {
+			it( 'should apply focus without automatically changing the selected tab', async () => {
+				render(
+					<ControlledTabs
+						tabs={ TABS }
+						selectedTabId="beta"
+						selectOnMove={ false }
+					/>
+				);
+
+				expect( await getSelectedTab() ).toHaveTextContent( 'Beta' );
+
+				// Tab key should focus the currently selected tab, which is Beta.
+				await press.Tab();
+				expect(
+					await screen.findByRole( 'tab', { name: 'Beta' } )
+				).toHaveFocus();
+
+				// Arrow key should move focus but not automatically change the selected tab.
+				await press.ArrowRight();
+				expect(
+					screen.getByRole( 'tab', { name: 'Gamma' } )
+				).toHaveFocus();
+				expect( await getSelectedTab() ).toHaveTextContent( 'Beta' );
+
+				// Pressing the spacebar should select the focused tab.
+				await press.Space();
+				expect( await getSelectedTab() ).toHaveTextContent( 'Gamma' );
+
+				// Arrow key should move focus but not automatically change the selected tab.
+				await press.ArrowRight();
+				expect(
+					screen.getByRole( 'tab', { name: 'Alpha' } )
+				).toHaveFocus();
+				expect( await getSelectedTab() ).toHaveTextContent( 'Gamma' );
+
+				// Pressing the enter/return should select the focused tab.
+				await press.Enter();
+				expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
+			} );
+			it( 'should not automatically update focus when the selected tab is changed by the controlling component', async () => {
+				const { rerender } = render(
+					<ControlledTabs
+						tabs={ TABS }
+						selectedTabId="beta"
+						selectOnMove={ false }
+					/>
+				);
+
+				expect( await getSelectedTab() ).toHaveTextContent( 'Beta' );
+
+				// Tab key should focus the currently selected tab, which is Beta.
+				await press.Tab();
+				expect( await getSelectedTab() ).toHaveFocus();
+
+				rerender(
+					<ControlledTabs
+						tabs={ TABS }
+						selectedTabId="gamma"
+						selectOnMove={ false }
+					/>
+				);
+
+				// When the selected tab is changed, it should not automatically receive focus.
+				expect( await getSelectedTab() ).toHaveTextContent( 'Gamma' );
+				expect(
+					screen.getByRole( 'tab', { name: 'Beta' } )
+				).toHaveFocus();
+			} );
+		} );
+	} );
+	it( 'should associate each `Tab` with the correct `TabPanel`, even if they are not rendered in the same order', async () => {
+		const TABS_WITH_DELTA_REVERSED = [ ...TABS_WITH_DELTA ].reverse();
+
+		render(
+			<Tabs>
+				<Tabs.TabList>
+					{ TABS_WITH_DELTA.map( ( tabObj ) => (
+						<Tabs.Tab
+							key={ tabObj.tabId }
+							tabId={ tabObj.tabId }
+							className={ tabObj.tab.className }
+							disabled={ tabObj.tab.disabled }
+						>
+							{ tabObj.title }
+						</Tabs.Tab>
+					) ) }
+				</Tabs.TabList>
+				{ TABS_WITH_DELTA_REVERSED.map( ( tabObj ) => (
+					<Tabs.TabPanel
+						key={ tabObj.tabId }
+						tabId={ tabObj.tabId }
+						focusable={ tabObj.tabpanel?.focusable }
+					>
+						{ tabObj.content }
+					</Tabs.TabPanel>
+				) ) }
+			</Tabs>
+		);
+
+		// Alpha is the initially selected tab,and should render the correct tabpanel
+		expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
+		expect( screen.getByRole( 'tabpanel' ) ).toHaveTextContent(
+			'Selected tab: Alpha'
+		);
+
+		// Select Beta, make sure the correct tabpanel is rendered
+		await click( screen.getByRole( 'tab', { name: 'Beta' } ) );
+		expect( await getSelectedTab() ).toHaveTextContent( 'Beta' );
+		expect( screen.getByRole( 'tabpanel' ) ).toHaveTextContent(
+			'Selected tab: Beta'
+		);
+
+		// Select Gamma, make sure the correct tabpanel is rendered
+		await click( screen.getByRole( 'tab', { name: 'Gamma' } ) );
+		expect( await getSelectedTab() ).toHaveTextContent( 'Gamma' );
+		expect( screen.getByRole( 'tabpanel' ) ).toHaveTextContent(
+			'Selected tab: Gamma'
+		);
+
+		// Select Delta, make sure the correct tabpanel is rendered
+		await click( screen.getByRole( 'tab', { name: 'Delta' } ) );
+		expect( await getSelectedTab() ).toHaveTextContent( 'Delta' );
+		expect( screen.getByRole( 'tabpanel' ) ).toHaveTextContent(
+			'Selected tab: Delta'
+		);
 	} );
 } );