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 ( {