diff --git a/packages/components/src/tabs/test/index.tsx b/packages/components/src/tabs/test/index.tsx
index f8a40b3704a34e..3c006cf6c96786 100644
--- a/packages/components/src/tabs/test/index.tsx
+++ b/packages/components/src/tabs/test/index.tsx
@@ -14,7 +14,6 @@ import { useEffect, useState } from '@wordpress/element';
*/
import Tabs from '..';
import type { TabsProps } from '../types';
-import { act } from 'react-dom/test-utils';
type Tab = {
tabId: string;
@@ -1174,79 +1173,32 @@ describe( 'Tabs', () => {
} );
} );
describe( 'When `selectedId` is changed by the controlling component', () => {
- describe.each( [ true, false ] )(
- 'When `selectOnMove` is `%s`',
- ( selectOnMove ) => {
- it( 'should move focus to the newly selected tab if the previously selected tab was focused', async () => {
- const { rerender } = render(
-
- );
-
- // Tab key should focus the currently selected tab, which is Beta.
- await press.Tab();
- expect( await getSelectedTab() ).toHaveTextContent(
- 'Beta'
- );
- expect( await getSelectedTab() ).toHaveFocus();
-
- rerender(
-
- );
-
- // When the selected tab is changed, it should automatically receive focus.
- expect( await getSelectedTab() ).toHaveTextContent(
- 'Gamma'
- );
- expect( await getSelectedTab() ).toHaveFocus();
- } );
- it( 'should not move focus to the newly selected tab if the previously selected tab was not focused', async () => {
- const { rerender } = render(
-
- );
-
- expect( await getSelectedTab() ).toHaveTextContent(
- 'Beta'
- );
-
- // Tab key should focus the currently selected tab, which is Beta.
- await press.Tab();
- expect( await getSelectedTab() ).toHaveFocus();
- // Focus Alpha, which is not the currently selected tab
- // (not the most elegant way, but it does the job).
- act( () =>
- screen.getByRole( 'tab', { name: 'Alpha' } ).focus()
- );
-
- rerender(
-
- );
-
- // When the selected tab is changed, it should not automatically receive focus.
- expect( await getSelectedTab() ).toHaveTextContent(
- 'Gamma'
- );
- expect(
- screen.getByRole( 'tab', { name: 'Alpha' } )
- ).toHaveFocus();
- } );
- }
- );
+ it( 'should continue to handle arrow key navigation properly', async () => {
+ const { rerender } = render(
+
+ );
+
+ // Tab key should focus the currently selected tab, which is Beta.
+ await press.Tab();
+ expect( await getSelectedTab() ).toHaveTextContent( 'Beta' );
+ expect( await getSelectedTab() ).toHaveFocus();
+
+ rerender(
+
+ );
+
+ // When the selected tab is changed, it should not automatically receive focus.
+ expect( await getSelectedTab() ).toHaveTextContent( 'Gamma' );
+ expect(
+ screen.getByRole( 'tab', { name: 'Beta' } )
+ ).toHaveFocus();
+
+ // Arrow keys should move focus to the next tab, which is Gamma
+ await press.ArrowRight();
+ expect(
+ screen.getByRole( 'tab', { name: 'Gamma' } )
+ ).toHaveFocus();
+ } );
} );
describe( 'When `selectOnMove` is `true`', () => {
diff --git a/test/e2e/specs/editor/various/keyboard-navigable-blocks.spec.js b/test/e2e/specs/editor/various/keyboard-navigable-blocks.spec.js
index 84536c88227ce9..6b55f68897cbd0 100644
--- a/test/e2e/specs/editor/various/keyboard-navigable-blocks.spec.js
+++ b/test/e2e/specs/editor/various/keyboard-navigable-blocks.spec.js
@@ -75,7 +75,7 @@ test.describe( 'Order of block keyboard navigation', () => {
);
await page.keyboard.press( 'Tab' );
- await KeyboardNavigableBlocks.expectLabelToHaveFocus( 'Post' );
+ await KeyboardNavigableBlocks.expectLabelToHaveFocus( 'Block' );
} );
test( 'allows tabbing in navigation mode if no block is selected (reverse)', async ( {