@automattic/charts 4.12.0 → 4.13.0

package/src/charts/conversion-funnel-chart/private/use-roving-step-focus.ts

@@ -0,0 +1,83 @@
+import { useCallback, useRef, useState } from 'react';
+
+const getTargetIndex = (
+	key: string,
+	index: number,
+	count: number,
+	isRtl: boolean
+): number | undefined => {
+	const nextKey = isRtl ? 'ArrowLeft' : 'ArrowRight';
+	const previousKey = isRtl ? 'ArrowRight' : 'ArrowLeft';
+
+	switch ( key ) {
+		case nextKey:
+			return Math.min( index + 1, count - 1 );
+		case previousKey:
+			return Math.max( index - 1, 0 );
+		case 'Home':
+			return 0;
+		case 'End':
+			return count - 1;
+		default:
+			return undefined;
+	}
+};
+
+/**
+ * Roving tabindex for the funnel steps: one Tab stop, and arrow keys, Home and End move focus between steps.
+ *
+ * @param stepIds        - Step ids in visual order.
+ * @param selectedStepId - The selected step, which holds the Tab stop until any step has taken focus.
+ * @return Tab index, element registration, focus and key handlers for each step.
+ */
+export const useRovingStepFocus = ( stepIds: string[], selectedStepId: string | null ) => {
+	const [ focusedStepId, setFocusedStepId ] = useState< string | null >( null );
+	const stepElements = useRef( new Map< string, HTMLElement >() );
+
+	const tabStopId =
+		[ focusedStepId, selectedStepId ].find( id => id !== null && stepIds.includes( id ) ) ??
+		stepIds[ 0 ];
+
+	const getTabIndex = useCallback(
+		( stepId: string ) => ( stepId === tabStopId ? 0 : -1 ),
+		[ tabStopId ]
+	);
+
+	const setStepElement = useCallback( ( stepId: string, element: HTMLElement | null ) => {
+		if ( element ) {
+			stepElements.current.set( stepId, element );
+		} else {
+			stepElements.current.delete( stepId );
+		}
+	}, [] );
+
+	const handleStepFocus = useCallback( ( stepId: string ) => {
+		setFocusedStepId( stepId );
+	}, [] );
+
+	const handleNavigationKey = useCallback(
+		( stepId: string, event: React.KeyboardEvent< HTMLElement > ) => {
+			if ( event.altKey || event.ctrlKey || event.metaKey ) {
+				return false;
+			}
+
+			const isRtl = getComputedStyle( event.currentTarget ).direction === 'rtl';
+			const targetIndex = getTargetIndex(
+				event.key,
+				stepIds.indexOf( stepId ),
+				stepIds.length,
+				isRtl
+			);
+			if ( targetIndex === undefined ) {
+				return false;
+			}
+
+			event.preventDefault();
+			stepElements.current.get( stepIds[ targetIndex ] )?.focus();
+			return true;
+		},
+		[ stepIds ]
+	);
+
+	return { getTabIndex, setStepElement, handleStepFocus, handleNavigationKey };
+};

package/src/charts/conversion-funnel-chart/test/conversion-funnel-chart.test.tsx

@@ -1,7 +1,7 @@
-import { render, screen } from '@testing-library/react';
+import { act, isInaccessible, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import ConversionFunnelChart from '../conversion-funnel-chart';
-import type { FunnelStep } from '../types';
+import type { ConversionFunnelChartProps, FunnelStep } from '../types';
 
 let mockChartHeight = 0;
 jest.mock( '../../../hooks/use-element-size', () => ( {
@@ -46,6 +46,36 @@ const renderWithoutTheme = ( component: React.ReactElement ) => {
 	return render( component );
 };
 
+// jsdom's window never has focus, so without this the funnel never sees focus leave it.
+beforeEach( () => {
+	jest.spyOn( document, 'hasFocus' ).mockReturnValue( true );
+} );
+
+afterEach( () => {
+	jest.restoreAllMocks();
+} );
+
+const focus = ( element: HTMLElement ) => act( () => element.focus() );
+
+const stepName = ( label: string ) => new RegExp( `^${ label }, ` );
+
+/**
+ * Shows a step's position and id.
+ *
+ * @param step  - The step.
+ * @param index - Its position.
+ * @return The tooltip content.
+ */
+function getTooltipContent( step: FunnelStep, index: number ) {
+	return { value: `#${ index }`, rows: [ { label: 'Id', value: step.id } ] };
+}
+
+const getEmptyTooltipContent = () => ( {} );
+
+const renderNamedTooltip = ( { step }: { step: FunnelStep } ) => (
+	<span>Custom tooltip: { step.label }</span>
+);
+
 describe( 'ConversionFunnelChart', () => {
 	afterEach( () => {
 		mockChartHeight = 0;
@@ -159,58 +189,36 @@ describe( 'ConversionFunnelChart', () => {
 			const user = userEvent.setup();
 			renderWithoutTheme( <ConversionFunnelChart { ...defaultProps } /> );
 
-			const cartBar = screen.getByRole( 'button', { name: /cart/i } );
+			const cartBar = screen.getByRole( 'option', { name: /cart/i } );
 			await user.click( cartBar );
 
-			// Check that the component still renders correctly after click
-			// After clicking, there will be multiple 'Cart' texts (header + tooltip)
-			expect( screen.getAllByText( 'Cart' ) ).toHaveLength( 2 );
-			// Rate appears once in header, and in tooltip it's combined with count text
-			expect( screen.getByText( '71.1%' ) ).toBeInTheDocument();
-			expect( screen.getByText( /71\.1% • .* items/ ) ).toBeInTheDocument();
-		} );
-
-		it( 'handles keyboard navigation with Enter key', async () => {
-			const user = userEvent.setup();
-			renderWithoutTheme( <ConversionFunnelChart { ...defaultProps } /> );
-
-			const cartBar = screen.getByRole( 'button', { name: /cart/i } );
-			cartBar.focus();
-			await user.keyboard( '{Enter}' );
-
-			// Check that component still works after keyboard interaction
-			// Keyboard navigation now shows tooltip, so label appears twice
-			expect( screen.getAllByText( 'Cart' ) ).toHaveLength( 2 );
+			expect( screen.getByTestId( 'funnel-tooltip' ) ).toHaveTextContent(
+				'Cart7,110 itemsConversion rate71.1%'
+			);
 		} );
 
-		it( 'handles keyboard navigation with Space key', async () => {
-			const user = userEvent.setup();
+		it( 'selects a step and shows its tooltip when the step takes focus', () => {
 			renderWithoutTheme( <ConversionFunnelChart { ...defaultProps } /> );
 
-			const cartBar = screen.getByRole( 'button', { name: /cart/i } );
-			cartBar.focus();
-			await user.keyboard( ' ' );
+			focus( screen.getByRole( 'option', { name: stepName( 'Cart' ) } ) );
 
-			// Check that component still works after keyboard interaction
-			// Keyboard navigation now shows tooltip, so label appears twice
-			expect( screen.getAllByText( 'Cart' ) ).toHaveLength( 2 );
+			expect(
+				screen.getByRole( 'option', { name: stepName( 'Cart' ), selected: true } )
+			).toBeInTheDocument();
+			expect( screen.getByTestId( 'funnel-tooltip' ) ).toHaveTextContent( 'Cart' );
 		} );
 
-		it( 'maintains component state after bar interactions', async () => {
+		it.each( [ '{Enter}', ' ' ] )( 'selects the focused step again with %s', async key => {
 			const user = userEvent.setup();
 			renderWithoutTheme( <ConversionFunnelChart { ...defaultProps } /> );
 
-			const cartBar = screen.getByRole( 'button', { name: /cart/i } );
-			await user.click( cartBar );
-
-			// Check that all bars are still accessible
-			const sessionsBar = screen.getByRole( 'button', { name: /sessions/i } );
-			const checkoutBar = screen.getByRole( 'button', { name: /checkout/i } );
-			const purchaseBar = screen.getByRole( 'button', { name: /purchase/i } );
+			focus( screen.getByRole( 'option', { name: stepName( 'Cart' ) } ) );
+			await user.keyboard( `{Escape}${ key }` );
 
-			expect( sessionsBar ).toBeInTheDocument();
-			expect( checkoutBar ).toBeInTheDocument();
-			expect( purchaseBar ).toBeInTheDocument();
+			expect(
+				screen.getByRole( 'option', { name: stepName( 'Cart' ), selected: true } )
+			).toBeInTheDocument();
+			expect( screen.getByTestId( 'funnel-tooltip' ) ).toBeInTheDocument();
 		} );
 
 		it( 'allows multiple bar interactions', async () => {
@@ -218,10 +226,10 @@ describe( 'ConversionFunnelChart', () => {
 			renderWithoutTheme( <ConversionFunnelChart { ...defaultProps } /> );
 
 			// Click on different bars in sequence
-			const cartBar = screen.getByRole( 'button', { name: /cart/i } );
+			const cartBar = screen.getByRole( 'option', { name: /cart/i } );
 			await user.click( cartBar );
 
-			const sessionsBar = screen.getByRole( 'button', { name: /sessions/i } );
+			const sessionsBar = screen.getByRole( 'option', { name: /sessions/i } );
 			await user.click( sessionsBar );
 
 			// Component should still render correctly
@@ -236,7 +244,7 @@ describe( 'ConversionFunnelChart', () => {
 			renderWithoutTheme( <ConversionFunnelChart { ...defaultProps } /> );
 
 			// First, click on a bar to select it
-			const cartBar = screen.getByRole( 'button', { name: /cart/i } );
+			const cartBar = screen.getByRole( 'option', { name: /cart/i } );
 			await user.click( cartBar );
 
 			// Verify the bar is selected (tooltip appears, so label appears twice)
@@ -254,7 +262,7 @@ describe( 'ConversionFunnelChart', () => {
 			renderWithoutTheme( <ConversionFunnelChart { ...defaultProps } /> );
 
 			// First, click on a bar to select it
-			const cartBar = screen.getByRole( 'button', { name: /cart/i } );
+			const cartBar = screen.getByRole( 'option', { name: /cart/i } );
 			await user.click( cartBar );
 
 			// Verify the bar is selected (tooltip appears, so label appears twice)
@@ -268,48 +276,250 @@ describe( 'ConversionFunnelChart', () => {
 			expect( screen.getAllByText( 'Cart' ) ).toHaveLength( 1 );
 		} );
 
-		it( 'toggles selection when clicking the same bar', async () => {
+		it( 'keeps the step selected when it is clicked again', async () => {
 			const user = userEvent.setup();
 			renderWithoutTheme( <ConversionFunnelChart { ...defaultProps } /> );
 
-			// First, click on a bar to select it
-			const cartBar = screen.getByRole( 'button', { name: /cart/i } );
+			const cartBar = screen.getByRole( 'option', { name: /cart/i } );
 			await user.click( cartBar );
-
-			// Verify the bar is selected (tooltip appears, so label appears twice)
-			expect( screen.getAllByText( 'Cart' ) ).toHaveLength( 2 );
-
-			// Click the same bar again to deselect
 			await user.click( cartBar );
 
-			// Verify selection is cleared (tooltip disappears, so only one label remains)
-			expect( screen.getAllByText( 'Cart' ) ).toHaveLength( 1 );
+			expect(
+				screen.getByRole( 'option', { name: stepName( 'Cart' ), selected: true } )
+			).toBeInTheDocument();
 		} );
 	} );
 
 	describe( 'Accessibility', () => {
-		it( 'has proper ARIA roles for interactive elements', () => {
+		it( 'lists the steps as options of a horizontal listbox, named with their rates', () => {
 			renderWithoutTheme( <ConversionFunnelChart { ...defaultProps } /> );
 
-			// Should have 4 bars as interactive elements
-			const allButtons = screen.getAllByRole( 'button' );
-			expect( allButtons ).toHaveLength( 4 ); // 4 bars
+			const listbox = screen.getByRole( 'listbox', { name: 'Funnel steps' } );
+			expect( listbox ).toHaveAttribute( 'aria-orientation', 'horizontal' );
+			expect(
+				screen.getAllByRole( 'option' ).map( option => option.getAttribute( 'aria-label' ) )
+			).toEqual( [ 'Sessions, 100%', 'Cart, 71.1%', 'Checkout, 52.5%', 'Purchase, 10.3%' ] );
+		} );
 
-			// Each bar should have button role
-			mockSteps.forEach( step => {
-				const bar = screen.getByRole( 'button', { name: new RegExp( step.label, 'i' ) } );
-				expect( bar ).toBeInTheDocument();
-			} );
+		it( 'hides the visible step labels and rates, so the listbox holds only its options', () => {
+			renderWithoutTheme( <ConversionFunnelChart { ...defaultProps } /> );
+
+			expect( isInaccessible( screen.getByText( 'Cart' ) ) ).toBe( true );
+			expect( isInaccessible( screen.getByText( '71.1%' ) ) ).toBe( true );
 		} );
 
-		it( 'has proper tabIndex for keyboard navigation', () => {
+		it( 'describes the selected step with its tooltip, leaving out the name', () => {
+			renderWithoutTheme(
+				<ConversionFunnelChart
+					mainRate={ 50 }
+					steps={ [ ...mockSteps.slice( 0, 2 ), { id: 'none', label: 'None', rate: 50 } ] }
+				/>
+			);
+
+			const cart = screen.getByRole( 'option', { name: stepName( 'Cart' ) } );
+			focus( cart );
+			expect( cart ).toHaveAccessibleDescription( '7,110 items Conversion rate 71.1%' );
+
+			const none = screen.getByRole( 'option', { name: stepName( 'None' ) } );
+			focus( none );
+			expect( none ).toHaveAccessibleDescription( 'Conversion rate 50%' );
+			expect( cart ).not.toHaveAttribute( 'aria-describedby' );
+		} );
+
+		it( 'shows and describes each step with getTooltipContent when given', () => {
+			renderWithoutTheme(
+				<ConversionFunnelChart { ...defaultProps } getTooltipContent={ getTooltipContent } />
+			);
+
+			const cart = screen.getByRole( 'option', { name: stepName( 'Cart' ) } );
+			focus( cart );
+
+			expect( cart ).toHaveAccessibleDescription( '#1 Id cart' );
+			expect( screen.getByTestId( 'funnel-tooltip' ) ).toHaveTextContent( 'Cart#1Idcart' );
+		} );
+
+		it( 'leaves a step undescribed when its tooltip content is empty', () => {
+			renderWithoutTheme(
+				<ConversionFunnelChart { ...defaultProps } getTooltipContent={ getEmptyTooltipContent } />
+			);
+
+			const cart = screen.getByRole( 'option', { name: stepName( 'Cart' ) } );
+			focus( cart );
+
+			expect( cart ).not.toHaveAttribute( 'aria-describedby' );
+		} );
+
+		it( 'describes the selected step with the whole custom tooltip', () => {
+			renderWithoutTheme(
+				<ConversionFunnelChart { ...defaultProps } renderTooltip={ renderNamedTooltip } />
+			);
+
+			const cart = screen.getByRole( 'option', { name: stepName( 'Cart' ) } );
+			focus( cart );
+
+			expect( cart ).toHaveAccessibleDescription( 'Custom tooltip: Cart' );
+		} );
+
+		it( 'hides the tooltip itself from screen readers', () => {
 			renderWithoutTheme( <ConversionFunnelChart { ...defaultProps } /> );
 
-			// Bars should be focusable
-			mockSteps.forEach( step => {
-				const bar = screen.getByRole( 'button', { name: new RegExp( step.label, 'i' ) } );
-				expect( bar ).toHaveAttribute( 'tabIndex', '0' );
+			focus( screen.getByRole( 'option', { name: stepName( 'Cart' ) } ) );
+
+			expect( screen.getByTestId( 'funnel-tooltip' ) ).toHaveAttribute( 'aria-hidden', 'true' );
+		} );
+
+		it( 'marks only the selected step as selected', async () => {
+			const user = userEvent.setup();
+			renderWithoutTheme( <ConversionFunnelChart { ...defaultProps } /> );
+
+			await user.click( screen.getByRole( 'option', { name: stepName( 'Cart' ) } ) );
+
+			expect(
+				screen.getByRole( 'option', { name: stepName( 'Cart' ), selected: true } )
+			).toBeInTheDocument();
+			expect( screen.getAllByRole( 'option', { selected: false } ) ).toHaveLength( 3 );
+		} );
+	} );
+
+	describe( 'Keyboard navigation', () => {
+		const renderBetweenButtons = ( props: Partial< ConversionFunnelChartProps > = {} ) =>
+			renderWithoutTheme(
+				<>
+					<button>Before</button>
+					<ConversionFunnelChart { ...defaultProps } { ...props } />
+					<button>After</button>
+				</>
+			);
+
+		it( 'enters the funnel on the first step and leaves it on the next Tab', async () => {
+			const user = userEvent.setup();
+			renderBetweenButtons();
+
+			screen.getByRole( 'button', { name: 'Before' } ).focus();
+			await user.tab();
+			expect( screen.getByRole( 'option', { name: stepName( 'Sessions' ) } ) ).toHaveFocus();
+
+			await user.tab();
+			expect( screen.getByRole( 'button', { name: 'After' } ) ).toHaveFocus();
+		} );
+
+		it( 'returns to the last focused step', async () => {
+			const user = userEvent.setup();
+			renderBetweenButtons();
+
+			focus( screen.getByRole( 'option', { name: stepName( 'Sessions' ) } ) );
+			await user.keyboard( '{ArrowRight}{ArrowRight}' );
+			await user.tab();
+			await user.tab( { shift: true } );
+
+			expect( screen.getByRole( 'option', { name: stepName( 'Checkout' ) } ) ).toHaveFocus();
+		} );
+
+		it( 'selects the step on focus after a press that ended off the step', async () => {
+			const user = userEvent.setup();
+			renderBetweenButtons();
+
+			const cart = screen.getByRole( 'option', { name: stepName( 'Cart' ) } );
+			focus( cart );
+			await user.pointer( { keys: '[MouseLeft>]', target: cart } );
+			await user.pointer( { keys: '[/MouseLeft]', target: document.body } );
+			await user.click( screen.getByRole( 'button', { name: 'After' } ) );
+			await user.tab( { shift: true } );
+
+			expect(
+				screen.getByRole( 'option', { name: stepName( 'Cart' ), selected: true } )
+			).toHaveFocus();
+		} );
+
+		it( 'waits for the click to select a step pressed from another step', async () => {
+			const user = userEvent.setup();
+			renderWithoutTheme( <ConversionFunnelChart { ...defaultProps } /> );
+
+			await user.click( screen.getByRole( 'option', { name: stepName( 'Sessions' ) } ) );
+			await user.pointer( {
+				keys: '[MouseLeft>]',
+				target: screen.getByRole( 'option', { name: stepName( 'Cart' ) } ),
 			} );
+
+			expect(
+				screen.getByRole( 'option', { name: stepName( 'Sessions' ), selected: true } )
+			).toBeInTheDocument();
+		} );
+
+		it( 'clears the selection when focus leaves the funnel', async () => {
+			const user = userEvent.setup();
+			renderBetweenButtons();
+
+			focus( screen.getByRole( 'option', { name: stepName( 'Cart' ) } ) );
+			await user.tab();
+
+			expect( screen.getAllByRole( 'option', { selected: false } ) ).toHaveLength( 4 );
+			expect( screen.queryByTestId( 'funnel-tooltip' ) ).not.toBeInTheDocument();
+		} );
+
+		it( 'moves the selection and its tooltip with the arrow keys', async () => {
+			const user = userEvent.setup();
+			renderWithoutTheme( <ConversionFunnelChart { ...defaultProps } /> );
+
+			focus( screen.getByRole( 'option', { name: stepName( 'Cart' ) } ) );
+			await user.keyboard( '{ArrowRight}' );
+
+			expect(
+				screen.getByRole( 'option', { name: stepName( 'Checkout' ), selected: true } )
+			).toHaveFocus();
+			expect( screen.getByTestId( 'funnel-tooltip' ) ).toHaveTextContent( 'Checkout' );
+		} );
+
+		it.each( [
+			[ 'Sessions', '{End}', 'Purchase' ],
+			[ 'Purchase', '{Home}', 'Sessions' ],
+			[ 'Purchase', '{ArrowRight}', 'Purchase' ],
+			[ 'Sessions', '{ArrowLeft}', 'Sessions' ],
+		] )( 'from %s, %s focuses %s', async ( from, keys, to ) => {
+			const user = userEvent.setup();
+			renderWithoutTheme( <ConversionFunnelChart { ...defaultProps } /> );
+
+			focus( screen.getByRole( 'option', { name: stepName( from ) } ) );
+			await user.keyboard( keys );
+
+			expect( screen.getByRole( 'option', { name: stepName( to ) } ) ).toHaveFocus();
+		} );
+
+		it( 'swaps Left and Right in a right-to-left layout', async () => {
+			const user = userEvent.setup();
+			renderWithoutTheme(
+				<ConversionFunnelChart { ...defaultProps } style={ { direction: 'rtl' } } />
+			);
+
+			focus( screen.getByRole( 'option', { name: stepName( 'Sessions' ) } ) );
+			await user.keyboard( '{ArrowLeft}' );
+
+			expect( screen.getByRole( 'option', { name: stepName( 'Cart' ) } ) ).toHaveFocus();
+		} );
+
+		it( 'clears the selection on Escape and keeps focus on the step', async () => {
+			const user = userEvent.setup();
+			renderWithoutTheme( <ConversionFunnelChart { ...defaultProps } /> );
+
+			const cart = screen.getByRole( 'option', { name: stepName( 'Cart' ) } );
+			focus( cart );
+			await user.keyboard( '{Escape}' );
+
+			expect( cart ).toHaveFocus();
+			expect( screen.getAllByRole( 'option', { selected: false } ) ).toHaveLength( 4 );
+		} );
+
+		it( 'leaves Escape to the page when no step is selected', async () => {
+			const user = userEvent.setup();
+			const isPrevented = jest.fn( ( event: KeyboardEvent ) => event.defaultPrevented );
+			document.addEventListener( 'keydown', isPrevented );
+			renderWithoutTheme( <ConversionFunnelChart { ...defaultProps } /> );
+
+			focus( screen.getByRole( 'option', { name: stepName( 'Cart' ) } ) );
+			await user.keyboard( '{Escape}{Escape}' );
+			document.removeEventListener( 'keydown', isPrevented );
+
+			expect( isPrevented.mock.results.map( result => result.value ) ).toEqual( [ true, false ] );
 		} );
 	} );
 
@@ -337,13 +547,10 @@ describe( 'ConversionFunnelChart', () => {
 				<ConversionFunnelChart mainRate={ 50 } steps={ stepsWithLargeCounts } />
 			);
 
-			const bar = screen.getByRole( 'button', { name: /test/i } );
+			const bar = screen.getByRole( 'option', { name: /test/i } );
 			await user.click( bar );
 
-			// Check that component renders correctly with large numbers
-			// After clicking, there will be multiple 'Test' texts (header + tooltip)
-			expect( screen.getAllByText( 'Test' ) ).toHaveLength( 2 );
-			expect( screen.getAllByText( '50%' ) ).toHaveLength( 2 );
+			expect( screen.getByTestId( 'funnel-tooltip' ) ).toHaveTextContent( '1,234,567 items' );
 		} );
 
 		it( 'handles steps without count in tooltip', async () => {
@@ -352,7 +559,7 @@ describe( 'ConversionFunnelChart', () => {
 
 			renderWithoutTheme( <ConversionFunnelChart mainRate={ 75 } steps={ stepsWithoutCount } /> );
 
-			const bar = screen.getByRole( 'button', { name: /test/i } );
+			const bar = screen.getByRole( 'option', { name: /test/i } );
 			await user.click( bar );
 
 			// Should show rate in tooltip, but we have multiple 75% (main + step)
@@ -439,7 +646,7 @@ describe( 'ConversionFunnelChart', () => {
 				<ConversionFunnelChart { ...defaultProps } renderTooltip={ customRenderTooltip } />
 			);
 
-			const cartBar = screen.getByRole( 'button', { name: /cart/i } );
+			const cartBar = screen.getByRole( 'option', { name: /cart/i } );
 			await user.click( cartBar );
 
 			expect( screen.getByTestId( 'custom-tooltip' ) ).toBeInTheDocument();
@@ -447,27 +654,22 @@ describe( 'ConversionFunnelChart', () => {
 			expect( customRenderTooltip ).toHaveBeenCalledWith( {
 				step: expect.objectContaining( { id: 'cart', label: 'Cart' } ),
 				index: 1,
+				content: {
+					value: '7,110 items',
+					rows: [ { label: 'Conversion rate', value: '71.1%' } ],
+				},
 				top: expect.any( Number ),
 				left: expect.any( Number ),
 			} );
 		} );
 
-		it( 'exposes the tooltip content with role="tooltip"', async () => {
-			const user = userEvent.setup();
-			renderWithoutTheme( <ConversionFunnelChart { ...defaultProps } /> );
-
-			await user.click( screen.getByRole( 'button', { name: /cart/i } ) );
-
-			expect( screen.getByRole( 'tooltip' ) ).toHaveTextContent( 'Cart' );
-		} );
-
 		it( 'merges tooltipStyle onto the tooltip box', async () => {
 			const user = userEvent.setup();
 			renderWithoutTheme(
 				<ConversionFunnelChart { ...defaultProps } tooltipStyle={ { background: 'purple' } } />
 			);
 
-			await user.click( screen.getByRole( 'button', { name: /cart/i } ) );
+			await user.click( screen.getByRole( 'option', { name: /cart/i } ) );
 
 			expect( screen.getByTestId( 'bounded-tooltip' ) ).toHaveStyle( { background: 'purple' } );
 		} );
@@ -480,11 +682,12 @@ describe( 'ConversionFunnelChart', () => {
 				<ConversionFunnelChart { ...defaultProps } renderTooltip={ customRenderTooltip } />
 			);
 
-			const cartBar = screen.getByRole( 'button', { name: /cart/i } );
+			const cartBar = screen.getByRole( 'option', { name: /cart/i } );
 			await user.click( cartBar );
 
 			// Should only have one 'Cart' text (header only, no tooltip)
 			expect( screen.getAllByText( 'Cart' ) ).toHaveLength( 1 );
+			expect( cartBar ).not.toHaveAttribute( 'aria-describedby' );
 			expect( customRenderTooltip ).toHaveBeenCalled();
 		} );
 
@@ -536,16 +739,12 @@ const mockRects = () =>
 	} );
 
 describe( 'ConversionFunnelChart tooltip position', () => {
-	afterEach( () => {
-		jest.restoreAllMocks();
-	} );
-
 	it( 'places the box relative to the chart root, at the click plus the offsets', async () => {
 		mockRects();
 		const user = userEvent.setup();
 		renderWithoutTheme( <ConversionFunnelChart { ...defaultProps } /> );
 
-		const bar = screen.getAllByRole( 'button' )[ 0 ];
+		const bar = screen.getAllByRole( 'option' )[ 0 ];
 		await user.pointer( [
 			{ target: bar, coords: { clientX: 180, clientY: 140 } },
 			{ keys: '[MouseLeft]', target: bar, coords: { clientX: 180, clientY: 140 } },
@@ -559,4 +758,25 @@ describe( 'ConversionFunnelChart tooltip position', () => {
 			transform: 'translate(90px, 90px)',
 		} );
 	} );
+
+	it( 'keeps the selection and its place when the window loses focus and gets it back', async () => {
+		mockRects();
+		const user = userEvent.setup();
+		renderWithoutTheme( <ConversionFunnelChart { ...defaultProps } /> );
+
+		const bar = screen.getAllByRole( 'option' )[ 0 ];
+		await user.pointer( [
+			{ target: bar, coords: { clientX: 180, clientY: 140 } },
+			{ keys: '[MouseLeft]', target: bar, coords: { clientX: 180, clientY: 140 } },
+		] );
+		const hasFocus = jest.spyOn( document, 'hasFocus' ).mockReturnValue( false );
+		act( () => bar.blur() );
+		hasFocus.mockReturnValue( true );
+		focus( bar );
+
+		expect( bar ).toHaveAttribute( 'aria-selected', 'true' );
+		expect( screen.getByTestId( 'bounded-tooltip' ) ).toHaveStyle( {
+			transform: 'translate(90px, 90px)',
+		} );
+	} );
 } );