@automattic/charts 4.1.1 → 4.3.0

package/src/components/legend/test/legend.test.tsx

@@ -9,6 +9,7 @@ import {
 	useChartRegistration,
 	useGlobalChartsContext,
 } from '../../../providers';
+import { useChartLegendItems } from '../hooks/use-chart-legend-items';
 import { Legend } from '../legend';
 import { BaseLegend } from '../private/base-legend';
 import type { ChartType } from '../../../types';
@@ -49,6 +50,26 @@ describe( 'BaseLegend', () => {
 		expect( markers[ 1 ] ).toHaveAttribute( 'fill', '#00ff00' );
 	} );
 
+	test( 'preserves each duplicate label, color, and following item', () => {
+		render(
+			<BaseLegend
+				items={ [
+					{ label: 'Views', color: '#ff0000' },
+					{ label: 'Views', color: '#00ff00', interactive: false },
+					{ label: 'Visitors', color: '#0000ff' },
+				] }
+				shape={ TestShape }
+				labelFormat={ label => `Metric: ${ label }` }
+			/>
+		);
+		expect( screen.getAllByText( 'Metric: Views' ) ).toHaveLength( 2 );
+		expect( screen.getByText( 'Metric: Visitors' ) ).toBeInTheDocument();
+		const markers = screen.getAllByTestId( 'legend-marker' );
+		expect( markers[ 0 ] ).toHaveAttribute( 'fill', '#ff0000' );
+		expect( markers[ 1 ] ).toHaveAttribute( 'fill', '#00ff00' );
+		expect( markers[ 2 ] ).toHaveAttribute( 'fill', '#0000ff' );
+	} );
+
 	test( 'handles empty items array', () => {
 		render( <BaseLegend items={ [] } orientation="horizontal" /> );
 		const legendItems = screen.queryAllByRole( 'listitem' );
@@ -754,6 +775,69 @@ describe( 'BaseLegend', () => {
 			expect( screen.getByTestId( 'views-prev' ) ).toHaveTextContent( 'true' );
 		} );
 
+		it( 'keeps an item with interactive: false static inside an interactive legend', async () => {
+			const user = userEvent.setup();
+			const items = [
+				{ label: 'Views', color: '#0000ff' },
+				{ label: 'Comparison period', color: '#0000ff', interactive: false },
+			];
+
+			render(
+				<GlobalChartsProvider>
+					<BaseLegend items={ items } interactive={ true } chartId="test-chart" />
+				</GlobalChartsProvider>
+			);
+
+			expect( screen.getAllByRole( 'button' ) ).toHaveLength( 1 );
+			const staticItem = screen.getAllByTestId( 'legend-item' )[ 1 ];
+			expect( staticItem ).toHaveTextContent( 'Comparison period' );
+			expect( staticItem ).not.toHaveAttribute( 'role' );
+			expect( staticItem ).not.toHaveAttribute( 'tabindex' );
+			expect( staticItem ).not.toHaveAttribute( 'aria-pressed' );
+
+			await user.click( staticItem );
+
+			expect( screen.getByRole( 'button' ) ).toHaveAttribute( 'aria-pressed', 'true' );
+			expect( staticItem ).not.toHaveClass( 'legend-item--inactive' );
+		} );
+
+		it( 'keeps a comparison item distinct when its label collides', async () => {
+			const user = userEvent.setup();
+			const Example = () => {
+				const items = useChartLegendItems(
+					[
+						{
+							label: 'Comparison period',
+							group: 'metric',
+							data: [ { label: 'Mon', value: 10 } ],
+						},
+						{
+							label: 'Previous metric',
+							group: 'metric',
+							options: { type: 'comparison' },
+							data: [ { label: 'Mon', value: 5 } ],
+						},
+					],
+					{ collapseGroups: true, comparisonItem: true },
+					'line'
+				);
+				return <BaseLegend items={ items } interactive chartId="test-chart" />;
+			};
+			render(
+				<GlobalChartsProvider>
+					<Example />
+				</GlobalChartsProvider>
+			);
+			expect( screen.getAllByTestId( 'legend-item' ) ).toHaveLength( 2 );
+			const staticItem = screen.getAllByTestId( 'legend-item' )[ 1 ];
+			expect( staticItem ).not.toHaveAttribute( 'role' );
+			await user.click( screen.getByRole( 'button' ) );
+			expect( screen.getByRole( 'button' ) ).toHaveAttribute( 'aria-pressed', 'false' );
+			expect( staticItem ).not.toHaveClass( 'legend-item--inactive' );
+			await user.click( staticItem );
+			expect( screen.getByRole( 'button' ) ).toHaveAttribute( 'aria-pressed', 'false' );
+		} );
+
 		it( 'falls back to the item label when seriesLabels is an empty array', async () => {
 			const user = userEvent.setup();
 

package/src/components/legend/types.ts

@@ -61,4 +61,6 @@ export type BaseLegendItem = {
 	 * the interactive legend to toggle a whole group's visibility from one item.
 	 */
 	seriesLabels?: string[];
+	/** Set to false for a static item that cannot be toggled or dimmed. */
+	interactive?: boolean;
 };

package/src/components/legend/utils/index.ts

@@ -1,3 +1,2 @@
 export { valueOrIdentity, valueOrIdentityString } from './value-or-identity';
-export { labelTransformFactory } from './label-transform-factory';
 export type { ValueOrIdentity } from './value-or-identity';

package/src/components/tooltip/accessible-tooltip.tsx

@@ -1,6 +1,8 @@
 import { TooltipContext } from '@visx/xychart';
 import clsx from 'clsx';
 import { useContext, useEffect, useCallback, useMemo, useRef } from 'react';
+import { ChartInstanceContext } from '../../charts/private/chart-instance-context';
+import { useGlobalChartsContext } from '../../providers/chart-context/hooks/use-global-charts-context';
 import { CATALOG_POINTERS } from '../../providers/chart-context/private/catalog-pointers';
 import { useChartScopeElement, useStandaloneScopeClass } from '../../providers/chart-scope';
 import { resolveCssVariable } from '../../utils';
@@ -18,8 +20,10 @@ export type FlattenedTooltipData = {
 };
 
 // Enhanced tooltip with keyboard navigation and accessibility
-interface AccessibleTooltipProps
-	extends Omit< XyChartTooltipProps< DataPointDate >, 'renderTooltip' > {
+interface AccessibleTooltipProps extends Omit<
+	XyChartTooltipProps< DataPointDate >,
+	'renderTooltip'
+> {
 	renderTooltip?: ( params: RenderTooltipParams< DataPointDate > ) => ReactNode;
 	selectedIndex?: number | undefined;
 	tooltipRef?: ( element: HTMLDivElement | null ) => void;
@@ -98,6 +102,40 @@ export const AccessibleTooltip: React.FC< AccessibleTooltipProps > = ( {
 	// Tracks whether this effect opened a tooltip, so it only closes its own.
 	const hasKeyboardSelection = useRef( false );
 
+	// visx's own `hideTooltip` is debounced by 400ms, long enough for a stale datum to be
+	// repainted against a changed series list. This is the undebounced close it wraps.
+	const closeTooltipNow = useCallback( () => {
+		tooltipContext?.updateTooltip( {
+			tooltipOpen: false,
+			tooltipLeft: undefined,
+			tooltipTop: undefined,
+			tooltipData: undefined,
+		} );
+		// Don't include tooltipContext in the dependency array to avoid loop.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [] );
+
+	const chartId = useContext( ChartInstanceContext )?.chartId;
+	const { getHiddenSeries } = useGlobalChartsContext();
+	const hiddenSeriesKey = chartId
+		? JSON.stringify( [ ...getHiddenSeries( chartId ) ].sort() )
+		: undefined;
+	const lastHiddenSeriesKey = useRef( hiddenSeriesKey );
+
+	// Hiding a series re-points every tooltip index at a different series, so a tooltip opened by
+	// the pointer would keep showing a datum that is no longer on the chart. Nothing else closes
+	// it: the pointer has not moved, so visx never fires the leave that would.
+	useEffect( () => {
+		const changed = lastHiddenSeriesKey.current !== hiddenSeriesKey;
+		lastHiddenSeriesKey.current = hiddenSeriesKey;
+
+		// A keyboard selection is reconciled by `useKeyboardNavigation` instead, which either
+		// re-shows the tooltip at a valid index or clears the selection for the branch below.
+		if ( changed && selectedIndex === undefined ) {
+			closeTooltipNow();
+		}
+	}, [ hiddenSeriesKey, selectedIndex, closeTooltipNow ] );
+
 	// Handle tooltip highlighting for keyboard navigation
 	useEffect( () => {
 		if ( selectedIndex === undefined ) {
@@ -106,7 +144,7 @@ export const AccessibleTooltip: React.FC< AccessibleTooltipProps > = ( {
 			// mid-navigation and closes the tooltip the user is reading.
 			if ( hasKeyboardSelection.current ) {
 				hasKeyboardSelection.current = false;
-				tooltipContext?.hideTooltip();
+				closeTooltipNow();
 			}
 			return;
 		}
@@ -134,7 +172,7 @@ export const AccessibleTooltip: React.FC< AccessibleTooltipProps > = ( {
 				tooltipContext?.showTooltip( {
 					datum: tooltipItem.datum,
 					key: tooltipItem.seriesLabel,
-					index: tooltipItem.seriesIndex,
+					index: tooltipItem.dataPointIndex,
 				} );
 			}
 		}
@@ -201,6 +239,12 @@ interface UseKeyboardNavigationProps {
 	 */
 	onActivate?: ( index: number ) => void;
 	preventTooltipScroll?: boolean;
+	/**
+	 * Identity of the series the navigation indexes run over, for charts whose index space depends
+	 * on which series are visible. Swapping one hidden series for another of the same length leaves
+	 * `totalPoints` unchanged, so the count alone cannot detect it.
+	 */
+	visibleSeriesKey?: string;
 }
 
 export const useKeyboardNavigation = ( {
@@ -212,21 +256,78 @@ export const useKeyboardNavigation = ( {
 	totalPoints,
 	onActivate,
 	preventTooltipScroll = false,
+	visibleSeriesKey,
 }: UseKeyboardNavigationProps ) => {
+	// `chartRef` sits inside the focusable grid, so the grid is what focus returns to and is measured against.
+	const getChartRoot = useCallback(
+		(): HTMLElement | null =>
+			chartRef.current?.closest< HTMLElement >( '[role="grid"]' ) ?? chartRef.current,
+		[ chartRef ]
+	);
+
+	const focusWithoutScrollIfNeeded = useCallback(
+		( element: HTMLElement | null | undefined ) => {
+			if ( preventTooltipScroll ) {
+				element?.focus( { preventScroll: true } );
+			} else {
+				element?.focus();
+			}
+		},
+		[ preventTooltipScroll ]
+	);
+
 	// Focus the tooltip as soon as it is rendered
 	const tooltipRef = useCallback(
 		( element: HTMLDivElement | null ) => {
 			if ( element && selectedIndex !== undefined ) {
-				if ( preventTooltipScroll ) {
-					element.focus( { preventScroll: true } );
-				} else {
-					element.focus();
-				}
+				focusWithoutScrollIfNeeded( element );
 			}
 		},
-		[ preventTooltipScroll, selectedIndex ]
+		[ focusWithoutScrollIfNeeded, selectedIndex ]
 	);
 
+	const previousTotalPoints = useRef( totalPoints );
+	const previousVisibleSeriesKey = useRef( visibleSeriesKey );
+
+	// Hiding or showing a series moves every index onto a different bar. The count alone misses a
+	// swap that keeps it the same, such as hiding one series while revealing another of equal length.
+	// Clear rather than clamp once focus has left the chart: a new tooltip would pull focus back.
+	useEffect( () => {
+		const countChanged = previousTotalPoints.current !== totalPoints;
+		const seriesChanged = previousVisibleSeriesKey.current !== visibleSeriesKey;
+		previousTotalPoints.current = totalPoints;
+		previousVisibleSeriesKey.current = visibleSeriesKey;
+
+		if ( ( ! countChanged && ! seriesChanged ) || selectedIndex === undefined ) {
+			return;
+		}
+
+		const { activeElement } = document;
+		const focusIsInChart = activeElement !== null && !! getChartRoot()?.contains( activeElement );
+
+		// A swap that leaves the count alone gives the same index a different series, so unlike a
+		// count change there is no shorter range to clamp into.
+		if ( totalPoints === 0 || ! focusIsInChart || ! countChanged ) {
+			setSelectedIndex( undefined );
+			setIsNavigating( false );
+			// Clearing unmounts the focused tooltip, which would drop focus to the body.
+			if ( focusIsInChart ) {
+				focusWithoutScrollIfNeeded( getChartRoot() );
+			}
+			return;
+		}
+
+		setSelectedIndex( Math.min( selectedIndex, totalPoints - 1 ) );
+	}, [
+		selectedIndex,
+		totalPoints,
+		visibleSeriesKey,
+		setSelectedIndex,
+		setIsNavigating,
+		getChartRoot,
+		focusWithoutScrollIfNeeded,
+	] );
+
 	// Returning focus from the tooltip must not restore the selection Escape just cleared.
 	const onChartFocus = useCallback(
 		( event: React.FocusEvent< HTMLDivElement > ) => {
@@ -247,46 +348,32 @@ export const useKeyboardNavigation = ( {
 
 	const onChartKeyDown = useCallback(
 		( event: React.KeyboardEvent< HTMLDivElement > ) => {
-			if ( totalPoints === 0 ) return;
-
-			const focusChart = () => {
-				if ( preventTooltipScroll ) {
-					chartRef.current?.focus( { preventScroll: true } );
-				} else {
-					chartRef.current?.focus();
+			if ( event.key === 'Tab' || event.key === 'Escape' ) {
+				// Consuming Escape with nothing open would swallow the first Escape of a surrounding Modal.
+				if ( event.key === 'Escape' && selectedIndex !== undefined ) {
+					event.preventDefault();
 				}
-			};
-
-			// Keep focus on the chart if tab is pressed
-			if ( event.key === 'Tab' ) {
-				focusChart();
+				focusWithoutScrollIfNeeded( getChartRoot() );
 				setSelectedIndex( undefined );
 				setIsNavigating( false );
 				return;
 			}
 
-			const currentSelectedIndex = selectedIndex === undefined ? -1 : selectedIndex;
-
-			if ( currentSelectedIndex + 1 >= totalPoints && [ 'ArrowRight' ].includes( event.key ) ) {
-				focusChart();
-				setSelectedIndex( undefined );
-				setIsNavigating( false );
-				return;
-			}
+			if ( totalPoints === 0 ) return;
 
-			event.preventDefault();
+			const currentSelectedIndex = selectedIndex === undefined ? -1 : selectedIndex;
 
-			if ( [ 'ArrowRight' ].includes( event.key ) ) {
+			// WAI-ARIA grid: arrows stop at the first and last cell.
+			if ( event.key === 'ArrowRight' ) {
+				event.preventDefault();
 				setIsNavigating( true );
-				setSelectedIndex( ( currentSelectedIndex + 1 ) % totalPoints );
-			} else if ( [ 'ArrowLeft' ].includes( event.key ) ) {
+				setSelectedIndex( Math.min( currentSelectedIndex + 1, totalPoints - 1 ) );
+			} else if ( event.key === 'ArrowLeft' ) {
+				event.preventDefault();
 				setIsNavigating( true );
-				setSelectedIndex( ( currentSelectedIndex - 1 + totalPoints ) % totalPoints );
-			} else if ( event.key === 'Escape' ) {
-				setSelectedIndex( undefined );
-				setIsNavigating( false );
-				focusChart();
+				setSelectedIndex( Math.max( currentSelectedIndex - 1, 0 ) );
 			} else if ( ( event.key === 'Enter' || event.key === ' ' ) && selectedIndex !== undefined ) {
+				event.preventDefault();
 				onActivate?.( selectedIndex );
 			}
 		},
@@ -295,9 +382,9 @@ export const useKeyboardNavigation = ( {
 			selectedIndex,
 			setSelectedIndex,
 			setIsNavigating,
-			chartRef,
+			getChartRoot,
+			focusWithoutScrollIfNeeded,
 			onActivate,
-			preventTooltipScroll,
 		]
 	);
 

package/src/components/tooltip/base-tooltip.module.scss

@@ -1,3 +1,5 @@
+// `.surface` is the look alone, for a chart that positions the box itself.
+.surface,
 .tooltip {
 	padding: var(--wpds-dimension-padding-sm);
 	// No WPDS token fits a translucent dark tooltip surface:
@@ -9,7 +11,10 @@
 	border-radius: var(--wpds-border-radius-md);
 	font-size: var(--wpds-typography-font-size-md);
 	box-shadow: var(--a8c-charts-elevation-sm, 0 1px 2px 0 #0000000d, 0 2px 3px 0 #0000000a, 0 6px 6px 0 #00000008, 0 8px 8px 0 #00000005);
-	position: absolute;
 	pointer-events: none;
+}
+
+.tooltip {
+	position: absolute;
 	transform: translate(-50%, -100%);
 }

package/src/components/tooltip/private/bounded-tooltip.tsx

@@ -14,6 +14,9 @@ export type BoundedTooltipProps = Omit< TooltipProps, 'left' | 'top' | 'applyPos
 };
 
 const DEFAULT_OFFSET = 10;
+// Above anything else layered inside a chart, such as the zoom reset button (2).
+// Chart wrappers isolate their stacking context, so it never reaches page chrome.
+export const TOOLTIP_Z_INDEX = 3;
 const POINTER_HEIGHT = 6;
 
 const clamp = ( position: number, min: number, max: number, size: number ) =>
@@ -41,7 +44,8 @@ const findClippingAncestor = ( wrapper: Element ): Element | null => {
 /**
  * Where the box goes, in wrapper coordinates. Automatic placement flips to
  * the side that clips less, then clamps inside `bounds`; below-axis placement
- * is centered on the anchor and clamped horizontally.
+ * is centered on the anchor and clamped horizontally; beside placement preserves
+ * the anchor's y and only flips horizontally before bounds clamping.
  *
  * The flip measures against the visible part of the wrapper, its intersection
  * with `bounds`. Only the clamp is bound by the page: a box that fits inside the
@@ -55,7 +59,7 @@ const findClippingAncestor = ( wrapper: Element ): Element | null => {
  * @param params.offsetTop  - Gap between the anchor and the box, vertically.
  * @param params.box        - Rendered size of the box.
  * @param params.wrapper    - The wrapper's own edges, in wrapper coordinates.
- * @param params.placement  - Fixed below-axis placement or automatic flipping.
+ * @param params.placement  - Below-axis, beside without vertical flipping, or automatic flipping.
  * @param params.bounds     - Edges the box must keep inside, in wrapper coordinates.
  * @return The box's top-left corner; fixed placement preserves the axis's subpixel y.
  */
@@ -103,7 +107,10 @@ export const getBoundedPosition = ( {
 	const upY = top - offsetTop - box.height;
 	const downOverflow = downY + box.height - fit.bottom;
 	const upOverflow = fit.top - upY;
-	let y = downOverflow > 0 && downOverflow > upOverflow ? upY : downY;
+	let y = top;
+	if ( placement !== 'beside' ) {
+		y = downOverflow > 0 && downOverflow > upOverflow ? upY : downY;
+	}
 
 	x = clamp( x, bounds.left, bounds.right, box.width );
 	y = clamp( y, bounds.top, bounds.bottom, box.height );
@@ -122,8 +129,7 @@ export const getBoundedPosition = ( {
  * alone would let the box spill into an `overflow: hidden` card and be cut off.
  *
  * Re-measures on every render, so a box whose content changes width between
- * two hovers is placed for its current size. See `getBoundedPosition` for the
- * below-axis exception.
+ * two hovers is placed for its current size.
  *
  * @param props            - visx `Tooltip` props.
  * @param props.left       - Anchor x, in wrapper coordinates.
@@ -133,7 +139,7 @@ export const getBoundedPosition = ( {
  * @param props.style      - Box styles; visx's defaults unless `unstyled`.
  * @param props.unstyled   - Skip `style` and leave the box bare.
  * @param props.children   - Box content.
- * @param props.placement  - Fixed below-axis placement or automatic flipping.
+ * @param props.placement  - Below-axis, beside without vertical flipping, or automatic flipping.
  * @return The tooltip box.
  */
 export const BoundedTooltip = ( {

package/src/components/tooltip/test/accessible-tooltip.test.tsx

@@ -1,8 +1,10 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { useRef, useState } from 'react';
 import { LineChartUnresponsive } from '../../../charts/line-chart/line-chart';
 import { GlobalChartsProvider } from '../../../providers';
 import { ChartScopeContext } from '../../../providers/chart-scope';
+import { useKeyboardNavigation } from '../accessible-tooltip';
 import type { ReactNode } from 'react';
 
 // A real chart is the harness rather than the subject: the crosshairs render only once visx has a data context and an open tooltip. The unresponsive export is what lets the test own the scope element — `withResponsive` otherwise provides its own wrapper as the scope.
@@ -124,3 +126,129 @@ describe( 'AccessibleTooltip', () => {
 		await expect( openTooltip() ).resolves.toHaveAttribute( 'stroke', '#dbdbdb' );
 	} );
 } );
+
+// Mirrors the charts' markup: the focusable grid wraps the element `chartRef` points at.
+const NavigationHarness = ( { totalPoints }: { totalPoints: number } ) => {
+	const [ selectedIndex, setSelectedIndex ] = useState< number | undefined >();
+	const [ isNavigating, setIsNavigating ] = useState( false );
+	const chartRef = useRef< HTMLDivElement >( null );
+	const { onChartKeyDown } = useKeyboardNavigation( {
+		selectedIndex,
+		setSelectedIndex,
+		isNavigating,
+		setIsNavigating,
+		chartRef,
+		totalPoints,
+	} );
+
+	return (
+		<>
+			<div role="grid" aria-label="Harness" tabIndex={ 0 } onKeyDown={ onChartKeyDown }>
+				<div ref={ chartRef } data-testid="selected-index">
+					{ selectedIndex ?? 'none' }
+					<button type="button">Inside</button>
+				</div>
+			</div>
+			<button type="button">Outside</button>
+		</>
+	);
+};
+
+describe( 'useKeyboardNavigation', () => {
+	const navigate = async ( presses: number ) => {
+		const user = userEvent.setup();
+		const view = render( <NavigationHarness totalPoints={ 6 } /> );
+
+		screen.getByRole( 'grid', { name: 'Harness' } ).focus();
+		for ( let i = 0; i < presses; i++ ) {
+			await user.keyboard( '{ArrowRight}' );
+		}
+		expect( screen.getByTestId( 'selected-index' ) ).toHaveTextContent( String( presses - 1 ) );
+
+		return { user, view };
+	};
+
+	it( 'moves the selection to the last point when the count shrinks while the grid has focus', async () => {
+		const { view } = await navigate( 6 );
+
+		view.rerender( <NavigationHarness totalPoints={ 3 } /> );
+
+		expect( screen.getByTestId( 'selected-index' ) ).toHaveTextContent( '2' );
+		expect( screen.getByRole( 'grid', { name: 'Harness' } ) ).toHaveFocus();
+	} );
+
+	// In range rather than past the end: the effect reconciles on any count change, not only an overflow.
+	it( 'clears an in-range selection when the count changes after focus has left the chart', async () => {
+		const { view } = await navigate( 2 );
+
+		screen.getByRole( 'button', { name: 'Outside' } ).focus();
+		view.rerender( <NavigationHarness totalPoints={ 3 } /> );
+
+		expect( screen.getByTestId( 'selected-index' ) ).toHaveTextContent( 'none' );
+	} );
+
+	it( 'returns focus to the grid on Escape when there are no points', async () => {
+		const user = userEvent.setup();
+		render( <NavigationHarness totalPoints={ 0 } /> );
+
+		screen.getByRole( 'button', { name: 'Inside' } ).focus();
+		await user.keyboard( '{Escape}' );
+
+		expect( screen.getByRole( 'grid', { name: 'Harness' } ) ).toHaveFocus();
+	} );
+
+	it( 'returns focus to the grid when the count drops to zero while focus is in the chart', async () => {
+		const { view } = await navigate( 2 );
+
+		screen.getByRole( 'button', { name: 'Inside' } ).focus();
+		view.rerender( <NavigationHarness totalPoints={ 0 } /> );
+
+		expect( screen.getByTestId( 'selected-index' ) ).toHaveTextContent( 'none' );
+		expect( screen.getByRole( 'grid', { name: 'Harness' } ) ).toHaveFocus();
+	} );
+
+	// The page sees the event after the handler, so this is what a surrounding scroll or Modal gets.
+	const recordPageKeyDown = () => {
+		const onKeyDown = jest.fn< void, [ KeyboardEvent ] >();
+		document.addEventListener( 'keydown', onKeyDown );
+		return { onKeyDown, stop: () => document.removeEventListener( 'keydown', onKeyDown ) };
+	};
+
+	it( 'leaves keys it does not handle available to the page', async () => {
+		const user = userEvent.setup();
+		render( <NavigationHarness totalPoints={ 6 } /> );
+		const { onKeyDown, stop } = recordPageKeyDown();
+
+		try {
+			screen.getByRole( 'grid', { name: 'Harness' } ).focus();
+			await user.keyboard( '{ArrowDown}{PageDown}[Space]' );
+
+			expect( onKeyDown ).toHaveBeenCalledTimes( 3 );
+			for ( const [ event ] of onKeyDown.mock.calls ) {
+				expect( event.defaultPrevented ).toBe( false );
+			}
+		} finally {
+			stop();
+		}
+	} );
+
+	// `@wordpress/components` Modal skips its own close-on-Escape once the event is defaultPrevented.
+	it( 'leaves Escape to the page when there is no selection to dismiss', async () => {
+		const user = userEvent.setup();
+		render( <NavigationHarness totalPoints={ 6 } /> );
+		const { onKeyDown, stop } = recordPageKeyDown();
+
+		try {
+			screen.getByRole( 'grid', { name: 'Harness' } ).focus();
+			await user.keyboard( '{Escape}' );
+
+			expect( onKeyDown.mock.calls[ 0 ][ 0 ].defaultPrevented ).toBe( false );
+
+			await user.keyboard( '{ArrowRight}{Escape}' );
+
+			expect( onKeyDown.mock.calls.at( -1 )?.[ 0 ].defaultPrevented ).toBe( true );
+		} finally {
+			stop();
+		}
+	} );
+} );

package/src/components/tooltip/test/bounded-tooltip.test.tsx

@@ -5,6 +5,23 @@ const BOX = { width: 208, height: 36 };
 const OFFSETS = { offsetLeft: 10, offsetTop: 10 };
 
 describe( 'getBoundedPosition', () => {
+	test.each( [
+		[ 40, 50 ],
+		[ 700, 425 ],
+	] )( 'keeps a beside tooltip at its anchor and flips horizontally at %s', ( left, x ) => {
+		expect(
+			getBoundedPosition( {
+				left,
+				top: -20,
+				...OFFSETS,
+				box: { width: 265, height: 382 },
+				wrapper: { left: 0, top: 0, right: 800, bottom: 300 },
+				bounds: { left: 0, top: -100, right: 800, bottom: 500 },
+				placement: 'beside',
+			} )
+		).toEqual( { x, y: -20 } );
+	} );
+
 	test( 'sits below and to the right of the anchor when that fits', () => {
 		expect(
 			getBoundedPosition( {

package/src/components/tooltip/test/xy-chart-tooltip.test.tsx

@@ -139,6 +139,13 @@ describe( 'XyChartTooltip', () => {
 		} );
 	} );
 
+	test( 'pins beside placement to the explicit SVG top anchor', async () => {
+		renderChart( { tooltipPlacement: 'beside', tooltipAnchorTop: 20, snapTooltipToDatumY: true } );
+		await expect( screen.findByTestId( 'tooltip-box' ) ).resolves.toHaveStyle( {
+			transform: 'translate(133px, 20px)',
+		} );
+	} );
+
 	test( 'snaps the box to the nearest datum', async () => {
 		renderChart( { snapTooltipToDatumX: true, snapTooltipToDatumY: true } );