From 88e443cd13a5e3d97e56cf00c81e48037be46dae Mon Sep 17 00:00:00 2001 From: chad1008 <13856531+chad1008@users.noreply.github.com> Date: Wed, 29 Nov 2023 17:20:26 -0500 Subject: [PATCH 1/9] link browser focus to selected tab changes in controlled mode --- packages/components/src/tabs/index.tsx | 38 ++++++++++++++++++++++---- 1 file changed, 33 insertions(+), 5 deletions(-) diff --git a/packages/components/src/tabs/index.tsx b/packages/components/src/tabs/index.tsx index 12dd0b4fcc83f..ebdd74ddaf9a0 100644 --- a/packages/components/src/tabs/index.tsx +++ b/packages/components/src/tabs/index.tsx @@ -42,10 +42,20 @@ function Tabs( { selectedId: selectedTabId && `${ instanceId }-${ selectedTabId }`, } ); - const isControlled = selectedTabId !== undefined; + const isControlled = useMemo( + () => selectedTabId !== undefined, + [ selectedTabId ] + ); const { items, selectedId } = store.useState(); - const { setSelectedId } = store; + const { setSelectedId, move } = store; + + const tabsRef = useRef< HTMLDivElement >( null ); + const tabsHasFocus = + !! tabsRef.current?.ownerDocument.activeElement && + items + .map( ( item ) => item.id ) + .includes( tabsRef.current?.ownerDocument.activeElement.id ); // Keep track of whether tabs have been populated. This is used to prevent // certain effects from firing too early while tab data and relevant @@ -154,6 +164,22 @@ function Tabs( { setSelectedId, ] ); + // In controlled mode, make sure browser focus follows the selected tab if + // the selection is changed while a tab is already being focused. + useLayoutEffect( () => { + if ( ! isControlled ) { + return; + } + + if ( + tabsHasFocus && + tabsRef.current?.ownerDocument.activeElement !== null && + selectedId !== tabsRef.current?.ownerDocument.activeElement.id + ) { + move( selectedId ); + } + }, [ isControlled, move, selectedId, tabsHasFocus ] ); + const contextValue = useMemo( () => ( { store, @@ -163,9 +189,11 @@ function Tabs( { ); return ( - - { children } - +
+ + { children } + +
); } From 85c4090ea76b240ac7e63b19312b297f761a1171 Mon Sep 17 00:00:00 2001 From: chad1008 <13856531+chad1008@users.noreply.github.com> Date: Thu, 30 Nov 2023 14:34:46 -0500 Subject: [PATCH 2/9] remove unnecessary memoization --- packages/components/src/tabs/index.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/components/src/tabs/index.tsx b/packages/components/src/tabs/index.tsx index ebdd74ddaf9a0..129caebb05798 100644 --- a/packages/components/src/tabs/index.tsx +++ b/packages/components/src/tabs/index.tsx @@ -42,10 +42,7 @@ function Tabs( { selectedId: selectedTabId && `${ instanceId }-${ selectedTabId }`, } ); - const isControlled = useMemo( - () => selectedTabId !== undefined, - [ selectedTabId ] - ); + const isControlled = selectedTabId !== undefined; const { items, selectedId } = store.useState(); const { setSelectedId, move } = store; From 8f92beb7cd27b7bc47f47ae5892bdc1a7d5b6e6f Mon Sep 17 00:00:00 2001 From: chad1008 <13856531+chad1008@users.noreply.github.com> Date: Thu, 30 Nov 2023 14:39:16 -0500 Subject: [PATCH 3/9] remove duplicate condition --- packages/components/src/tabs/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/components/src/tabs/index.tsx b/packages/components/src/tabs/index.tsx index 129caebb05798..7dd70c518dd98 100644 --- a/packages/components/src/tabs/index.tsx +++ b/packages/components/src/tabs/index.tsx @@ -170,7 +170,6 @@ function Tabs( { if ( tabsHasFocus && - tabsRef.current?.ownerDocument.activeElement !== null && selectedId !== tabsRef.current?.ownerDocument.activeElement.id ) { move( selectedId ); From b86bbd10a511c0e3a7b0bd57a6b3094923e998ab Mon Sep 17 00:00:00 2001 From: chad1008 <13856531+chad1008@users.noreply.github.com> Date: Thu, 30 Nov 2023 14:57:51 -0500 Subject: [PATCH 4/9] dont apply when selectOnMove is false --- packages/components/src/tabs/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/tabs/index.tsx b/packages/components/src/tabs/index.tsx index 7dd70c518dd98..f35090584755a 100644 --- a/packages/components/src/tabs/index.tsx +++ b/packages/components/src/tabs/index.tsx @@ -164,7 +164,7 @@ function Tabs( { // In controlled mode, make sure browser focus follows the selected tab if // the selection is changed while a tab is already being focused. useLayoutEffect( () => { - if ( ! isControlled ) { + if ( ! isControlled || ! selectOnMove ) { return; } @@ -174,7 +174,7 @@ function Tabs( { ) { move( selectedId ); } - }, [ isControlled, move, selectedId, tabsHasFocus ] ); + }, [ isControlled, move, selectOnMove, selectedId, tabsHasFocus ] ); const contextValue = useMemo( () => ( { From 62b5f67461a34c4fa1b9a622054b5ef326a7b321 Mon Sep 17 00:00:00 2001 From: chad1008 <13856531+chad1008@users.noreply.github.com> Date: Fri, 1 Dec 2023 11:09:01 -0500 Subject: [PATCH 5/9] use `items` to find active element, instead of a ref --- packages/components/src/tabs/index.tsx | 25 +++++++++++-------------- 1 file changed, 11 insertions(+), 14 deletions(-) diff --git a/packages/components/src/tabs/index.tsx b/packages/components/src/tabs/index.tsx index f35090584755a..7f738cb9f08a9 100644 --- a/packages/components/src/tabs/index.tsx +++ b/packages/components/src/tabs/index.tsx @@ -47,13 +47,6 @@ function Tabs( { const { items, selectedId } = store.useState(); const { setSelectedId, move } = store; - const tabsRef = useRef< HTMLDivElement >( null ); - const tabsHasFocus = - !! tabsRef.current?.ownerDocument.activeElement && - items - .map( ( item ) => item.id ) - .includes( tabsRef.current?.ownerDocument.activeElement.id ); - // Keep track of whether tabs have been populated. This is used to prevent // certain effects from firing too early while tab data and relevant // variables are undefined during the initial render. @@ -167,14 +160,20 @@ function Tabs( { if ( ! isControlled || ! selectOnMove ) { return; } + const currentItem = items.find( ( item ) => item.id === selectedId ); + const activeElement = currentItem?.element?.ownerDocument.activeElement; + const tabsHasFocus = items.some( ( item ) => { + return activeElement && activeElement === item.element; + } ); if ( + activeElement && tabsHasFocus && - selectedId !== tabsRef.current?.ownerDocument.activeElement.id + selectedId !== activeElement.id ) { move( selectedId ); } - }, [ isControlled, move, selectOnMove, selectedId, tabsHasFocus ] ); + }, [ isControlled, items, move, selectOnMove, selectedId ] ); const contextValue = useMemo( () => ( { @@ -185,11 +184,9 @@ function Tabs( { ); return ( -
- - { children } - -
+ + { children } + ); } From 0450da7308c8a5bb46de5ce49f6a7caf40447818 Mon Sep 17 00:00:00 2001 From: chad1008 <13856531+chad1008@users.noreply.github.com> Date: Fri, 1 Dec 2023 12:07:37 -0500 Subject: [PATCH 6/9] CHANGELOG --- packages/components/CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index c4153503fd798..ae1951685f68e 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -16,6 +16,10 @@ - `ToggleGroupControl`: react correctly to external controlled updates ([#56678](https://github.com/WordPress/gutenberg/pull/56678)). - `ToolsPanel`: fix a performance issue ([#56770](https://github.com/WordPress/gutenberg/pull/56770)). +### Experimental + +- `Tabs`: improve focus handling in controlled mode ([#56658](https://github.com/WordPress/gutenberg/pull/56658)). + ## 25.13.0 (2023-11-29) ### Enhancements From dc04a47e21fb2c5b86cad6ffda9d43c0d6dc66f4 Mon Sep 17 00:00:00 2001 From: chad1008 <13856531+chad1008@users.noreply.github.com> Date: Mon, 4 Dec 2023 13:18:45 -0500 Subject: [PATCH 7/9] add `selectOnMove` unit tests --- packages/components/src/tabs/test/index.tsx | 214 +++++++++++++++++++- 1 file changed, 213 insertions(+), 1 deletion(-) diff --git a/packages/components/src/tabs/test/index.tsx b/packages/components/src/tabs/test/index.tsx index f923dc455fd7b..2508e2518b139 100644 --- a/packages/components/src/tabs/test/index.tsx +++ b/packages/components/src/tabs/test/index.tsx @@ -7,7 +7,7 @@ import { press, click } from '@ariakit/test'; /** * WordPress dependencies */ -import { useState } from '@wordpress/element'; +import { useEffect, useState } from '@wordpress/element'; /** * Internal dependencies @@ -102,6 +102,10 @@ const ControlledTabs = ( { string | undefined | null >( props.selectedTabId ); + useEffect( () => { + setSelectedTabId( props.selectedTabId ); + }, [ props.selectedTabId ] ); + return ( { } ); } ); + describe( 'When `selectOnMove` is `true`', () => { + it( 'should automatically select a newly focused tab', async () => { + const user = userEvent.setup(); + + render( ); + + // Tab should focus the currently selected tab, which is Alpha. + await user.keyboard( '[Tab]' ); + expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' ); + expect( await getSelectedTab() ).toHaveFocus(); + + // Arrow keys should select and move focus to the next tab. + await user.keyboard( '[ArrowRight]' ); + expect( await getSelectedTab() ).toHaveTextContent( 'Beta' ); + expect( await getSelectedTab() ).toHaveFocus(); + } ); + } ); + + describe( 'When `selectOnMove` is `false`', () => { + it( 'should apply focus without automatically changing the selected tab', async () => { + const user = userEvent.setup(); + + render( + + ); + + // Tab should focus the currently selected tab, which is Alpha. + await user.keyboard( '[Tab]' ); + expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' ); + expect( await getSelectedTab() ).toHaveFocus(); + + // Arrow key should move focus but not automatically change the selected tab. + await user.keyboard( '[ArrowRight]' ); + expect( + screen.getByRole( 'tab', { name: 'Beta' } ) + ).toHaveFocus(); + expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' ); + + // Pressing the spacebar should select the focused tab. + await user.keyboard( '[Space]' ); + expect( await getSelectedTab() ).toHaveTextContent( 'Beta' ); + + // Arrow key should move focus but not automatically change the selected tab. + await user.keyboard( '[ArrowRight]' ); + expect( + screen.getByRole( 'tab', { name: 'Gamma' } ) + ).toHaveFocus(); + expect( await getSelectedTab() ).toHaveTextContent( 'Beta' ); + + // Pressing the enter/return should select the focused tab. + await user.keyboard( '[Enter]' ); + expect( await getSelectedTab() ).toHaveTextContent( 'Gamma' ); + } ); + } ); + describe( 'Disabled tab', () => { it( 'should disable the tab when `disabled` is `true`', async () => { const mockOnSelect = jest.fn(); @@ -1168,5 +1227,158 @@ describe( 'Tabs', () => { ).not.toBeInTheDocument(); } ); } ); + + describe( 'When `selectOnMove` is `true`', () => { + it( 'should automatically select a newly focused tab', async () => { + const user = userEvent.setup(); + + render( ); + + // This assertion ensures the component has had time to fully + // render, preventing flakiness. + // see https://github.com/WordPress/gutenberg/pull/55950 + await waitFor( async () => + expect( + await screen.findByRole( 'tab', { name: 'Beta' } ) + ).toHaveAttribute( 'aria-selected', 'true' ) + ); + + await user.keyboard( '[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 user.keyboard( '[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 user = userEvent.setup(); + + const { rerender } = render( + + ); + + // This assertion ensures the component has had time to fully + // render, preventing flakiness. + // see https://github.com/WordPress/gutenberg/pull/55950 + await waitFor( async () => + expect( + await screen.findByRole( 'tab', { name: 'Beta' } ) + ).toHaveAttribute( 'aria-selected', 'true' ) + ); + + // Tab key should focus the currently selected tab, which is Beta. + await user.keyboard( '[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(); + } ); + } ); + describe( 'When `selectOnMove` is `false`', () => { + it( 'should apply focus without automatically changing the selected tab', async () => { + const user = userEvent.setup(); + + render( + + ); + + // This assertion ensures the component has had time to fully + // render, preventing flakiness. + // see https://github.com/WordPress/gutenberg/pull/55950 + await waitFor( async () => + expect( + await screen.findByRole( 'tab', { name: 'Beta' } ) + ).toHaveAttribute( 'aria-selected', 'true' ) + ); + + expect( await getSelectedTab() ).toHaveTextContent( 'Beta' ); + + // Tab key should focus the currently selected tab, which is Beta. + await user.keyboard( '[Tab]' ); + expect( + await screen.findByRole( 'tab', { name: 'Beta' } ) + ).toHaveFocus(); + + // Arrow key should move focus but not automatically change the selected tab. + await user.keyboard( '[ArrowRight]' ); + expect( + screen.getByRole( 'tab', { name: 'Gamma' } ) + ).toHaveFocus(); + expect( await getSelectedTab() ).toHaveTextContent( 'Beta' ); + + // Pressing the spacebar should select the focused tab. + await user.keyboard( '[Space]' ); + expect( await getSelectedTab() ).toHaveTextContent( 'Gamma' ); + + // Arrow key should move focus but not automatically change the selected tab. + await user.keyboard( '[ArrowRight]' ); + expect( + screen.getByRole( 'tab', { name: 'Alpha' } ) + ).toHaveFocus(); + expect( await getSelectedTab() ).toHaveTextContent( 'Gamma' ); + + // Pressing the enter/return should select the focused tab. + await user.keyboard( '[Enter]' ); + expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' ); + } ); + it( 'should not automatically update focus when the selected tab is changed by the controlling component', async () => { + const user = userEvent.setup(); + + const { rerender } = render( + + ); + + // This assertion ensures the component has had time to fully + // render, preventing flakiness. + // see https://github.com/WordPress/gutenberg/pull/55950 + await waitFor( async () => + expect( + await screen.findByRole( 'tab', { name: 'Beta' } ) + ).toHaveAttribute( 'aria-selected', 'true' ) + ); + + expect( await getSelectedTab() ).toHaveTextContent( 'Beta' ); + + // Tab key should focus the currently selected tab, which is Beta. + await user.keyboard( '[Tab]' ); + expect( await getSelectedTab() ).toHaveFocus(); + + rerender( + + ); + + // When the selected tab is changed, it should not automatically receive focus. + expect( await getSelectedTab() ).toHaveTextContent( 'Gamma' ); + // `waitFor` is needed here to prevent testing library from + // throwing a 'not wrapped in `act()`' error. + await waitFor( () => + expect( + screen.getByRole( 'tab', { name: 'Beta' } ) + ).toHaveFocus() + ); + } ); + } ); } ); } ); From 0738fd7b04e32455b1420d5a98f0e636beee889e Mon Sep 17 00:00:00 2001 From: chad1008 <13856531+chad1008@users.noreply.github.com> Date: Thu, 7 Dec 2023 11:15:51 -0500 Subject: [PATCH 8/9] convert new tests to ariakit/test --- packages/components/src/tabs/test/index.tsx | 90 +++++---------------- 1 file changed, 19 insertions(+), 71 deletions(-) diff --git a/packages/components/src/tabs/test/index.tsx b/packages/components/src/tabs/test/index.tsx index 2508e2518b139..fcdad3fecb44c 100644 --- a/packages/components/src/tabs/test/index.tsx +++ b/packages/components/src/tabs/test/index.tsx @@ -801,17 +801,15 @@ describe( 'Tabs', () => { describe( 'When `selectOnMove` is `true`', () => { it( 'should automatically select a newly focused tab', async () => { - const user = userEvent.setup(); - render( ); // Tab should focus the currently selected tab, which is Alpha. - await user.keyboard( '[Tab]' ); + await press.Tab(); expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' ); expect( await getSelectedTab() ).toHaveFocus(); // Arrow keys should select and move focus to the next tab. - await user.keyboard( '[ArrowRight]' ); + await press.ArrowRight(); expect( await getSelectedTab() ).toHaveTextContent( 'Beta' ); expect( await getSelectedTab() ).toHaveFocus(); } ); @@ -819,37 +817,35 @@ describe( 'Tabs', () => { describe( 'When `selectOnMove` is `false`', () => { it( 'should apply focus without automatically changing the selected tab', async () => { - const user = userEvent.setup(); - render( ); // Tab should focus the currently selected tab, which is Alpha. - await user.keyboard( '[Tab]' ); + await press.Tab(); expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' ); expect( await getSelectedTab() ).toHaveFocus(); // Arrow key should move focus but not automatically change the selected tab. - await user.keyboard( '[ArrowRight]' ); + await press.ArrowRight(); expect( screen.getByRole( 'tab', { name: 'Beta' } ) ).toHaveFocus(); expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' ); // Pressing the spacebar should select the focused tab. - await user.keyboard( '[Space]' ); + await press.Space(); expect( await getSelectedTab() ).toHaveTextContent( 'Beta' ); // Arrow key should move focus but not automatically change the selected tab. - await user.keyboard( '[ArrowRight]' ); + await press.ArrowRight(); expect( screen.getByRole( 'tab', { name: 'Gamma' } ) ).toHaveFocus(); expect( await getSelectedTab() ).toHaveTextContent( 'Beta' ); // Pressing the enter/return should select the focused tab. - await user.keyboard( '[Enter]' ); + await press.Enter(); expect( await getSelectedTab() ).toHaveTextContent( 'Gamma' ); } ); } ); @@ -1230,48 +1226,26 @@ describe( 'Tabs', () => { describe( 'When `selectOnMove` is `true`', () => { it( 'should automatically select a newly focused tab', async () => { - const user = userEvent.setup(); - render( ); - // This assertion ensures the component has had time to fully - // render, preventing flakiness. - // see https://github.com/WordPress/gutenberg/pull/55950 - await waitFor( async () => - expect( - await screen.findByRole( 'tab', { name: 'Beta' } ) - ).toHaveAttribute( 'aria-selected', 'true' ) - ); - - await user.keyboard( '[Tab]' ); + 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 user.keyboard( '[ArrowRight]' ); + 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 user = userEvent.setup(); - const { rerender } = render( ); - // This assertion ensures the component has had time to fully - // render, preventing flakiness. - // see https://github.com/WordPress/gutenberg/pull/55950 - await waitFor( async () => - expect( - await screen.findByRole( 'tab', { name: 'Beta' } ) - ).toHaveAttribute( 'aria-selected', 'true' ) - ); - // Tab key should focus the currently selected tab, which is Beta. - await user.keyboard( '[Tab]' ); + await press.Tab(); expect( await getSelectedTab() ).toHaveTextContent( 'Beta' ); expect( await getSelectedTab() ).toHaveFocus(); @@ -1286,8 +1260,6 @@ describe( 'Tabs', () => { } ); describe( 'When `selectOnMove` is `false`', () => { it( 'should apply focus without automatically changing the selected tab', async () => { - const user = userEvent.setup(); - render( { /> ); - // This assertion ensures the component has had time to fully - // render, preventing flakiness. - // see https://github.com/WordPress/gutenberg/pull/55950 - await waitFor( async () => - expect( - await screen.findByRole( 'tab', { name: 'Beta' } ) - ).toHaveAttribute( 'aria-selected', 'true' ) - ); - expect( await getSelectedTab() ).toHaveTextContent( 'Beta' ); // Tab key should focus the currently selected tab, which is Beta. - await user.keyboard( '[Tab]' ); + await press.Tab(); expect( await screen.findByRole( 'tab', { name: 'Beta' } ) ).toHaveFocus(); // Arrow key should move focus but not automatically change the selected tab. - await user.keyboard( '[ArrowRight]' ); + await press.ArrowRight(); expect( screen.getByRole( 'tab', { name: 'Gamma' } ) ).toHaveFocus(); expect( await getSelectedTab() ).toHaveTextContent( 'Beta' ); // Pressing the spacebar should select the focused tab. - await user.keyboard( '[Space]' ); + await press.Space(); expect( await getSelectedTab() ).toHaveTextContent( 'Gamma' ); // Arrow key should move focus but not automatically change the selected tab. - await user.keyboard( '[ArrowRight]' ); + 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 user.keyboard( '[Enter]' ); + 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 user = userEvent.setup(); - const { rerender } = render( { /> ); - // This assertion ensures the component has had time to fully - // render, preventing flakiness. - // see https://github.com/WordPress/gutenberg/pull/55950 - await waitFor( async () => - expect( - await screen.findByRole( 'tab', { name: 'Beta' } ) - ).toHaveAttribute( 'aria-selected', 'true' ) - ); - expect( await getSelectedTab() ).toHaveTextContent( 'Beta' ); // Tab key should focus the currently selected tab, which is Beta. - await user.keyboard( '[Tab]' ); + await press.Tab(); expect( await getSelectedTab() ).toHaveFocus(); rerender( @@ -1371,13 +1323,9 @@ describe( 'Tabs', () => { // When the selected tab is changed, it should not automatically receive focus. expect( await getSelectedTab() ).toHaveTextContent( 'Gamma' ); - // `waitFor` is needed here to prevent testing library from - // throwing a 'not wrapped in `act()`' error. - await waitFor( () => - expect( - screen.getByRole( 'tab', { name: 'Beta' } ) - ).toHaveFocus() - ); + expect( + screen.getByRole( 'tab', { name: 'Beta' } ) + ).toHaveFocus(); } ); } ); } ); From e4a28c00e2799ecbe025b765a8b0ec41b559b998 Mon Sep 17 00:00:00 2001 From: chad1008 <13856531+chad1008@users.noreply.github.com> Date: Fri, 8 Dec 2023 11:11:36 -0500 Subject: [PATCH 9/9] remove redundant tests --- packages/components/src/tabs/test/index.tsx | 51 --------------------- 1 file changed, 51 deletions(-) diff --git a/packages/components/src/tabs/test/index.tsx b/packages/components/src/tabs/test/index.tsx index fcdad3fecb44c..0f7b9271b450a 100644 --- a/packages/components/src/tabs/test/index.tsx +++ b/packages/components/src/tabs/test/index.tsx @@ -799,57 +799,6 @@ describe( 'Tabs', () => { } ); } ); - describe( 'When `selectOnMove` is `true`', () => { - it( 'should automatically select a newly focused tab', async () => { - render( ); - - // Tab should focus the currently selected tab, which is Alpha. - await press.Tab(); - expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' ); - expect( await getSelectedTab() ).toHaveFocus(); - - // Arrow keys should select and move focus to the next tab. - await press.ArrowRight(); - expect( await getSelectedTab() ).toHaveTextContent( 'Beta' ); - expect( await getSelectedTab() ).toHaveFocus(); - } ); - } ); - - describe( 'When `selectOnMove` is `false`', () => { - it( 'should apply focus without automatically changing the selected tab', async () => { - render( - - ); - - // Tab should focus the currently selected tab, which is Alpha. - await press.Tab(); - expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' ); - expect( await getSelectedTab() ).toHaveFocus(); - - // Arrow key should move focus but not automatically change the selected tab. - await press.ArrowRight(); - expect( - screen.getByRole( 'tab', { name: 'Beta' } ) - ).toHaveFocus(); - expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' ); - - // Pressing the spacebar should select the focused tab. - await press.Space(); - expect( await getSelectedTab() ).toHaveTextContent( 'Beta' ); - - // 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 enter/return should select the focused tab. - await press.Enter(); - expect( await getSelectedTab() ).toHaveTextContent( 'Gamma' ); - } ); - } ); - describe( 'Disabled tab', () => { it( 'should disable the tab when `disabled` is `true`', async () => { const mockOnSelect = jest.fn();