@automattic/charts 3.1.1 → 3.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "3.1.1",
+	"version": "3.2.0",
 	"description": "Display charts within Automattic products.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/charts/#readme",
 	"bugs": {
@@ -63,7 +63,7 @@
 		"typecheck": "tsgo --noEmit"
 	},
 	"dependencies": {
-		"@automattic/number-formatters": "^1.2.7",
+		"@automattic/number-formatters": "^1.2.8",
 		"@babel/runtime": "7.29.7",
 		"@react-spring/web": "10.1.1",
 		"@visx/annotation": "^4.0.0",
@@ -84,8 +84,8 @@
 		"@visx/xychart": "^4.0.0",
 		"@wordpress/i18n": "^6.0.0",
 		"@wordpress/icons": "^15.0.0",
-		"@wordpress/theme": "1.1.0",
-		"@wordpress/ui": "0.19.0",
+		"@wordpress/theme": "1.2.0",
+		"@wordpress/ui": "0.20.0",
 		"clsx": "2.1.1",
 		"date-fns": "^4.1.0",
 		"deepmerge": "4.3.1",
@@ -103,16 +103,16 @@
 		"@testing-library/jest-dom": "^6.0.0",
 		"@testing-library/react": "^16.0.0",
 		"@testing-library/user-event": "^14.4.3",
-		"@tsdown/css": "0.22.2",
+		"@tsdown/css": "0.22.14",
 		"@types/jest": "^30.0.0",
 		"@types/node": "^24.12.0",
-		"@types/react": "18.3.28",
+		"@types/react": "18.3.31",
 		"@types/react-dom": "18.3.7",
 		"@typescript/native-preview": "7.0.0-dev.20260707.2",
 		"@visx/glyph": "4.0.0",
 		"@wordpress/components": "37.0.0",
 		"@wordpress/element": "8.3.0",
-		"@wordpress/private-apis": "1.52.0",
+		"@wordpress/private-apis": "1.53.0",
 		"babel-jest": "30.4.1",
 		"identity-obj-proxy": "^3.0.0",
 		"jest": "30.4.2",
@@ -122,7 +122,7 @@
 		"react-dom": "18.3.1",
 		"sass-embedded": "1.97.3",
 		"storybook": "10.4.6",
-		"tsdown": "0.22.2",
+		"tsdown": "0.22.14",
 		"typescript": "6.0.3"
 	},
 	"peerDependencies": {

package/src/charts/bar-chart/bar-chart.tsx

@@ -128,6 +128,9 @@ const BarChartInternal: FC< BarChartProps > = ( {
 	animation,
 	children,
 	gap = 'md',
+	onPointerDown,
+	onPointerUp,
+	onDatumActivate,
 } ) => {
 	const legendInteractive = legend.interactive ?? false;
 	const legendCollapseGroups = legend.collapseGroups ?? false;
@@ -196,16 +199,6 @@ const BarChartInternal: FC< BarChartProps > = ( {
 		Math.max( 0, ...primarySeriesForNav.map( s => s.data?.length || 0 ) ) *
 		primarySeriesForNav.length;
 
-	// Use the keyboard navigation hook
-	const { tooltipRef, onChartFocus, onChartBlur, onChartKeyDown } = useKeyboardNavigation( {
-		selectedIndex,
-		setSelectedIndex,
-		isNavigating,
-		setIsNavigating,
-		chartRef,
-		totalPoints,
-	} );
-
 	// Add visibility information from the shared legend state.
 	const seriesWithVisibility = useMemo(
 		() =>
@@ -244,6 +237,37 @@ const BarChartInternal: FC< BarChartProps > = ( {
 		[ primaryEntries ]
 	);
 
+	// Walks the selected index the way the highlight style does — series-major
+	// within each data point — so the bar handed on is the one outlined.
+	const activateSelectedBar = useCallback(
+		( index: number ) => {
+			const primaryCount = primaryEntries.length;
+
+			if ( ! primaryCount ) {
+				return;
+			}
+
+			const dataPointIndex = Math.floor( index / primaryCount );
+			const series = primaryEntries[ index % primaryCount ]?.series;
+			const datum = series?.data[ dataPointIndex ];
+
+			if ( series && datum ) {
+				onDatumActivate?.( { datum, index: dataPointIndex, key: series.label } );
+			}
+		},
+		[ primaryEntries, onDatumActivate ]
+	);
+
+	const { tooltipRef, onChartFocus, onChartBlur, onChartKeyDown } = useKeyboardNavigation( {
+		selectedIndex,
+		setSelectedIndex,
+		isNavigating,
+		setIsNavigating,
+		chartRef,
+		totalPoints,
+		onActivate: activateSelectedBar,
+	} );
+
 	const comparisonEntries = useMemo( () => {
 		const primaryByGroup = new Map< string | undefined, { label: string; index: number } >(
 			primaryEntries.map( ( { series, index } ) => [
@@ -575,6 +599,8 @@ const BarChartInternal: FC< BarChartProps > = ( {
 										xScale={ xScale }
 										yScale={ yScale }
 										horizontal={ horizontal }
+										onPointerDown={ onPointerDown }
+										onPointerUp={ onPointerUp }
 										pointerEventsDataKey="nearest"
 									>
 										{ ! allSeriesHidden && (

package/src/charts/bar-chart/test/bar-chart-pointer-events.test.tsx

@@ -0,0 +1,67 @@
+import { render } from '@testing-library/react';
+import { GlobalChartsProvider } from '../../../providers';
+import BarChart from '../bar-chart';
+import type { ReactNode } from 'react';
+
+// jsdom gives every element a zero-sized box, so visx can never resolve a
+// pointer to a datum here. Standing `XYChart` in for a prop recorder keeps this
+// test on the part jsdom can answer: that the handlers reach the chart at all.
+// Whether a bar then reports the datum under the pointer is a browser question.
+const mockXYChart = jest.fn();
+jest.mock( '@visx/xychart', () => {
+	const actual = jest.requireActual( '@visx/xychart' );
+
+	return {
+		__esModule: true,
+		...actual,
+		XYChart: ( props: { children?: ReactNode } ) => {
+			mockXYChart( props );
+			return <svg />;
+		},
+	};
+} );
+
+const mockRefCallback = jest.fn();
+jest.mock( '../../../hooks/use-element-size', () => ( {
+	useElementSize: () => [ mockRefCallback, 500, 300 ],
+} ) );
+
+const DATA = [
+	{
+		label: 'Series A',
+		data: [
+			{ date: new Date( '2024-01-01' ), value: 10 },
+			{ date: new Date( '2024-01-02' ), value: 20 },
+		],
+		options: {},
+	},
+];
+
+/**
+ * Render the chart with the recorder standing in for `XYChart`.
+ *
+ * @param props - Props layered onto the defaults.
+ * @return The render result.
+ */
+function renderBarChart( props = {} ) {
+	return render(
+		<GlobalChartsProvider>
+			<BarChart width={ 500 } height={ 300 } data={ DATA } { ...props } />
+		</GlobalChartsProvider>
+	);
+}
+
+describe( 'BarChart pointer events', () => {
+	beforeEach( () => mockXYChart.mockClear() );
+
+	test( 'hands the pointer handlers to the chart, so a bar can be clicked', () => {
+		const onPointerDown = jest.fn();
+		const onPointerUp = jest.fn();
+
+		renderBarChart( { onPointerDown, onPointerUp } );
+
+		const props = mockXYChart.mock.calls.at( -1 )[ 0 ];
+		expect( props.onPointerDown ).toBe( onPointerDown );
+		expect( props.onPointerUp ).toBe( onPointerUp );
+	} );
+} );

package/src/charts/bar-chart/test/bar-chart.test.tsx

@@ -996,6 +996,85 @@ describe( 'BarChart', () => {
 			} );
 		} );
 
+		describe( 'Activation', () => {
+			const SERIES_A = {
+				label: 'Series A',
+				data: [
+					{ date: new Date( '2024-01-01' ), value: 10 },
+					{ date: new Date( '2024-01-02' ), value: 20 },
+				],
+				options: {},
+			};
+			const SERIES_B = {
+				label: 'Series B',
+				data: [
+					{ date: new Date( '2024-01-01' ), value: 15 },
+					{ date: new Date( '2024-01-02' ), value: 25 },
+				],
+				options: {},
+			};
+
+			test( 'Enter hands the selected bar to onDatumActivate', async () => {
+				const user = userEvent.setup();
+				const onDatumActivate = jest.fn();
+				renderWithTheme( { withTooltips: true, data: [ SERIES_A ], onDatumActivate } );
+
+				screen.getByRole( 'grid', { name: /bar chart/i } ).focus();
+				await user.keyboard( '{ArrowRight}{ArrowRight}{Enter}' );
+
+				expect( onDatumActivate ).toHaveBeenCalledTimes( 1 );
+				expect( onDatumActivate ).toHaveBeenCalledWith( {
+					datum: SERIES_A.data[ 1 ],
+					index: 1,
+					key: 'Series A',
+				} );
+			} );
+
+			test( 'Space activates the selected bar too', async () => {
+				const user = userEvent.setup();
+				const onDatumActivate = jest.fn();
+				renderWithTheme( { withTooltips: true, data: [ SERIES_A ], onDatumActivate } );
+
+				screen.getByRole( 'grid', { name: /bar chart/i } ).focus();
+				await user.keyboard( '{ArrowRight}[Space]' );
+
+				expect( onDatumActivate ).toHaveBeenCalledWith( {
+					datum: SERIES_A.data[ 0 ],
+					index: 0,
+					key: 'Series A',
+				} );
+			} );
+
+			// The navigation index strides series-major within each data point, the
+			// order the highlight outlines bars in, so the second stop is the second
+			// series' first bar.
+			test( 'walks the series at each data point before the next point', async () => {
+				const user = userEvent.setup();
+				const onDatumActivate = jest.fn();
+				renderWithTheme( { withTooltips: true, data: [ SERIES_A, SERIES_B ], onDatumActivate } );
+
+				screen.getByRole( 'grid', { name: /bar chart/i } ).focus();
+				await user.keyboard( '{ArrowRight}{ArrowRight}{Enter}' );
+
+				expect( onDatumActivate ).toHaveBeenCalledWith( {
+					datum: SERIES_B.data[ 0 ],
+					index: 0,
+					key: 'Series B',
+				} );
+			} );
+
+			test( 'Enter with no bar selected activates nothing', async () => {
+				const user = userEvent.setup();
+				const onDatumActivate = jest.fn();
+				renderWithTheme( { withTooltips: true, data: [ SERIES_A ], onDatumActivate } );
+
+				screen.getByRole( 'grid', { name: /bar chart/i } ).focus();
+				await user.keyboard( '{Enter}' );
+
+				expect( onDatumActivate ).not.toHaveBeenCalled();
+			} );
+		} );
+
 		describe( 'Arrow Key Navigation', () => {
 			test( 'right arrow key navigates to next data point', async () => {
 				const user = userEvent.setup();

package/src/charts/bar-list-chart/bar-list-chart.tsx

@@ -3,7 +3,8 @@ import { Group } from '@visx/group';
 import { createScale, scaleBand } from '@visx/scale';
 import { Text, type TextProps } from '@visx/text';
 import { useContext, useMemo } from 'react';
-import { GlobalChartsContext, GlobalChartsProvider } from '../../providers';
+import { GlobalChartsContext, GlobalChartsProvider, useGlobalChartsContext } from '../../providers';
+import { isValidHexColor, lightenHexColor } from '../../utils';
 import { BarChartUnresponsive } from '../bar-chart';
 import { withResponsive } from '../private/with-responsive';
 import type { SeriesData } from '../..';
@@ -211,6 +212,14 @@ const getDefaultYOffset = (
 	return -( barThickness + GAP_BETWEEN_BARS );
 };
 
+// How far a single-series bar fill travels from white toward the series color.
+//
+// With one series the label is drawn *on* the bar, so the fill is a text background and has to keep
+// contrast with `--a8c-charts-color-label`. At full strength the catalog seed `#3858e9` leaves
+// `#1e1e1e` at 2.97:1; this puts it at 9.0:1. Multi-series bars keep full strength — the label is
+// lifted clear of them, so nothing is read against the fill.
+const BAR_TINT_TOWARD_SERIES = 0.4;
+
 const BarListChartInternal: FC< BarListChartProps > = ( {
 	data,
 	width,
@@ -224,6 +233,35 @@ const BarListChartInternal: FC< BarListChartProps > = ( {
 	},
 	...rest
 } ) => {
+	const { getElementStyles } = useGlobalChartsContext();
+
+	// A series carrying its own stroke is left alone — the consumer asked for that exact color.
+	const tintedData = useMemo( () => {
+		if ( data.length > 1 ) {
+			return data;
+		}
+
+		return data.map( ( series, index ) => {
+			if ( series.options?.stroke ) {
+				return series;
+			}
+
+			const { color } = getElementStyles( { data: series, index } );
+
+			if ( ! isValidHexColor( color ) ) {
+				return series;
+			}
+
+			return {
+				...series,
+				options: {
+					...series.options,
+					stroke: lightenHexColor( color, 1 - BAR_TINT_TOWARD_SERIES ),
+				},
+			};
+		} );
+	}, [ data, getElementStyles ] );
+
 	const chartOptions = useMemo( () => {
 		const isMultiSeries = data.length > 1;
 
@@ -260,7 +298,7 @@ const BarListChartInternal: FC< BarListChartProps > = ( {
 		<BarChartUnresponsive
 			orientation="horizontal"
 			gridVisibility={ 'none' }
-			data={ data }
+			data={ tintedData }
 			width={ width }
 			height={ height }
 			margin={ margin }

package/src/charts/bar-list-chart/test/bar-list-chart.test.tsx

@@ -66,4 +66,42 @@ describe( 'BarListChart', () => {
 		renderChart( { data: [] } );
 		expect( screen.queryByText( 'Behemoth hat ' ) ).not.toBeInTheDocument();
 	} );
+
+	describe( 'single-series bar tint', () => {
+		// visx renders the bars, so they carry no attribute of our own to query by.
+		/* eslint-disable testing-library/no-node-access */
+		const barFills = () =>
+			Array.from(
+				screen.getByRole( 'grid' ).querySelectorAll< SVGRectElement >( '.visx-bar-group rect' )
+			).map( bar => bar.getAttribute( 'fill' ) );
+		/* eslint-enable testing-library/no-node-access */
+
+		// `lightenHexColor( '#3858e9', 1 - BAR_TINT_TOWARD_SERIES )` — the catalog seed traveling
+		// 40% from white toward the series color. Asserted as a literal so a change to the tint has
+		// to be made deliberately here rather than tracking the implementation.
+		const TINTED_SEED = '#afbcf6';
+
+		test( 'tints the bar so the label it carries stays readable', () => {
+			renderChart();
+			expect( barFills() ).not.toHaveLength( 0 );
+			barFills().forEach( fill => expect( fill ).toBe( TINTED_SEED ) );
+		} );
+
+		test( 'leaves a series carrying its own stroke at full strength', () => {
+			renderChart( {
+				data: salesByProduct.map( series => ( {
+					...series,
+					options: { ...series.options, stroke: '#ff0000' },
+				} ) ),
+			} );
+			expect( barFills() ).not.toHaveLength( 0 );
+			barFills().forEach( fill => expect( fill ).toBe( '#ff0000' ) );
+		} );
+
+		test( 'leaves multi-series bars at full strength, where the label is lifted clear', () => {
+			renderChart( { data: salesByChannel } );
+			expect( barFills() ).not.toHaveLength( 0 );
+			expect( barFills() ).not.toContain( TINTED_SEED );
+		} );
+	} );
 } );

package/src/charts/line-chart/line-chart.tsx

@@ -179,6 +179,7 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 			onPointerUp = undefined,
 			onPointerMove = undefined,
 			onPointerOut = undefined,
+			onDatumActivate = undefined,
 			zoomable = false,
 			rescaleYOnVisibilityChange = true,
 			defaultHiddenSeries,
@@ -280,7 +281,20 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 			return min < max ? [ min, max ] : undefined;
 		}, [ rescaleYOnVisibilityChange, dataSorted ] );
 
-		// Use the keyboard navigation hook
+		// Keyboard navigation steps through x positions, and the grouped tooltip
+		// reads every series at that position; the first series names the point.
+		const activateSelectedPoint = useCallback(
+			( index: number ) => {
+				const series = dataSorted[ 0 ];
+				const datum = series?.data[ index ];
+
+				if ( series && datum ) {
+					onDatumActivate?.( { datum, index, key: series.label } );
+				}
+			},
+			[ dataSorted, onDatumActivate ]
+		);
+
 		const { tooltipRef, onChartFocus, onChartBlur, onChartKeyDown } = useKeyboardNavigation( {
 			selectedIndex,
 			setSelectedIndex,
@@ -288,6 +302,7 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 			setIsNavigating,
 			chartRef,
 			totalPoints: dataSorted[ 0 ]?.data.length || 0,
+			onActivate: activateSelectedPoint,
 		} );
 
 		const chartOptions = useMemo( () => {

package/src/charts/line-chart/test/line-chart.test.tsx

@@ -1153,6 +1153,53 @@ describe( 'LineChart', () => {
 			} );
 		} );
 
+		describe( 'Activation', () => {
+			const SERIES_A = {
+				label: 'Series A',
+				data: [
+					{ date: new Date( '2024-01-01' ), value: 10 },
+					{ date: new Date( '2024-01-02' ), value: 20 },
+				],
+				options: {},
+			};
+			const SERIES_B = {
+				label: 'Series B',
+				data: [
+					{ date: new Date( '2024-01-01' ), value: 15 },
+					{ date: new Date( '2024-01-02' ), value: 25 },
+				],
+				options: {},
+			};
+
+			// Navigation steps through x positions; the first series names the point.
+			test( 'Enter hands the selected point to onDatumActivate', async () => {
+				const user = userEvent.setup();
+				const onDatumActivate = jest.fn();
+				renderWithTheme( { data: [ SERIES_A, SERIES_B ], onDatumActivate } );
+
+				screen.getByRole( 'grid', { name: /line chart/i } ).focus();
+				await user.keyboard( '{ArrowRight}{ArrowRight}{Enter}' );
+
+				expect( onDatumActivate ).toHaveBeenCalledTimes( 1 );
+				expect( onDatumActivate ).toHaveBeenCalledWith( {
+					datum: SERIES_A.data[ 1 ],
+					index: 1,
+					key: 'Series A',
+				} );
+			} );
+
+			test( 'Enter with no point selected activates nothing', async () => {
+				const user = userEvent.setup();
+				const onDatumActivate = jest.fn();
+				renderWithTheme( { data: [ SERIES_A ], onDatumActivate } );
+
+				screen.getByRole( 'grid', { name: /line chart/i } ).focus();
+				await user.keyboard( '{Enter}' );
+
+				expect( onDatumActivate ).not.toHaveBeenCalled();
+			} );
+		} );
+
 		describe( 'Arrow Key Navigation', () => {
 			test( 'right arrow key navigates to next data point', async () => {
 				const user = userEvent.setup();

package/src/charts/sparkline/sparkline.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
-import { useMemo, forwardRef } from 'react';
-import { useGlobalChartsTheme } from '../../providers';
+import { useContext, useMemo, forwardRef } from 'react';
+import { GlobalChartsContext, useGlobalChartsTheme } from '../../providers';
 import { LineChartUnresponsive } from '../line-chart';
 import { withResponsive } from '../private/with-responsive';
 import styles from './sparkline.module.scss';
@@ -60,6 +60,9 @@ const SparklineComponent = forwardRef< HTMLDivElement, SparklineProps >(
 		ref
 	) => {
 		const theme = useGlobalChartsTheme();
+		// Read through the context rather than `useGlobalChartsContext()`, which throws: Sparkline
+		// renders standalone too, and only the LineChart it delegates to supplies a provider.
+		const chartsContext = useContext( GlobalChartsContext );
 
 		// Get theme defaults for sparkline
 		const themeStrokeWidth = theme.sparkline?.strokeWidth ?? 1.5;
@@ -127,7 +130,10 @@ const SparklineComponent = forwardRef< HTMLDivElement, SparklineProps >(
 		if ( data.length === 1 ) {
 			const cx = width / 2;
 			const cy = height / 2;
-			const resolvedColor = color || '#000000';
+			// The multi-point path lets LineChart resolve the palette; a lone circle has to ask for
+			// the same slot itself, or omitting `color` paints black instead of the series color.
+			const resolvedColor =
+				color || chartsContext?.getElementStyles( { index: 0 } ).color || '#000000';
 
 			return (
 				<div

package/src/charts/sparkline/types.ts

@@ -47,7 +47,7 @@ export interface SparklineProps {
 
 	/**
 	 * Color for the line stroke (hex or CSS color)
-	 * @default Theme color (first color in theme.colors array)
+	 * @default The first series palette color (`--a8c-charts-color-series-1`)
 	 */
 	color?: string;
 

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

@@ -1,7 +1,10 @@
 import { Tooltip, TooltipContext } from '@visx/xychart';
 import clsx from 'clsx';
 import { useContext, useEffect, useCallback, useMemo, useRef } from 'react';
+import { useGlobalChartsTheme } from '../../providers';
+import { useChartScopeElement } from '../../providers/chart-scope';
 import { CHART_SCOPE_CLASS } from '../../styles/chart-scope-class';
+import { resolveCssVariable } from '../../utils';
 import type { SeriesData, DataPointDate } from '../../types';
 import type { RenderTooltipParams, XyChartTooltipProps } from '../../visx/types';
 import type { ReactNode } from 'react';
@@ -45,9 +48,21 @@ export const AccessibleTooltip: React.FC< AccessibleTooltipProps > = ( {
 	keyboardFocusedClassName,
 	series = [],
 	mode = 'group',
+	verticalCrosshairStyle,
+	horizontalCrosshairStyle,
 	...props
 } ) => {
 	const tooltipContext = useContext( TooltipContext );
+	const scopeElement = useChartScopeElement();
+	const gridStroke = useGlobalChartsTheme().gridStyles?.stroke;
+
+	// The crosshair is painted in a portal outside the scope, so it needs a resolved color; see TOKENS.md#the-svg-bridge.
+	const crosshairStroke = useMemo( () => {
+		const stroke = gridStroke ? resolveCssVariable( gridStroke, scopeElement ) : null;
+
+		// Passing `stroke: undefined` would erase the crosshair: it overrides visx's own value, and SVG's initial `stroke` is `none`.
+		return stroke ? { stroke } : undefined;
+	}, [ gridStroke, scopeElement ] );
 
 	const tooltipData = useMemo( () => {
 		if ( mode !== 'individual' ) return [];
@@ -158,7 +173,14 @@ export const AccessibleTooltip: React.FC< AccessibleTooltipProps > = ( {
 		};
 	}, [ renderTooltip, selectedIndex, tooltipRef, keyboardFocusedClassName ] );
 
-	return <Tooltip { ...props } renderTooltip={ focusableRenderTooltip } />;
+	return (
+		<Tooltip
+			{ ...props }
+			verticalCrosshairStyle={ { ...crosshairStroke, ...verticalCrosshairStyle } }
+			horizontalCrosshairStyle={ { ...crosshairStroke, ...horizontalCrosshairStyle } }
+			renderTooltip={ focusableRenderTooltip }
+		/>
+	);
 };
 
 // Keyboard navigation hook for charts
@@ -172,6 +194,11 @@ interface UseKeyboardNavigationProps {
 	 * Total number of navigation points (length of tooltip data array)
 	 */
 	totalPoints: number;
+	/**
+	 * Called with the selected index on Enter or Space, so a chart can treat the
+	 * keyboard selection the way it treats a click.
+	 */
+	onActivate?: ( index: number ) => void;
 }
 
 export const useKeyboardNavigation = ( {
@@ -181,6 +208,7 @@ export const useKeyboardNavigation = ( {
 	setIsNavigating,
 	chartRef,
 	totalPoints,
+	onActivate,
 }: UseKeyboardNavigationProps ) => {
 	// Focus the tooltip as soon as it is rendered
 	const tooltipRef = useCallback(
@@ -237,9 +265,11 @@ export const useKeyboardNavigation = ( {
 				setSelectedIndex( undefined );
 				setIsNavigating( false );
 				chartRef.current?.focus();
+			} else if ( ( event.key === 'Enter' || event.key === ' ' ) && selectedIndex !== undefined ) {
+				onActivate?.( selectedIndex );
 			}
 		},
-		[ totalPoints, selectedIndex, setSelectedIndex, setIsNavigating, chartRef ]
+		[ totalPoints, selectedIndex, setSelectedIndex, setIsNavigating, chartRef, onActivate ]
 	);
 
 	return {

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

@@ -0,0 +1,68 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { LineChartUnresponsive } from '../../../charts/line-chart/line-chart';
+import { GlobalChartsProvider } from '../../../providers';
+import { ChartScopeContext } from '../../../providers/chart-scope';
+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.
+const renderChart = ( scope?: HTMLElement ) => {
+	const chart = (
+		<LineChartUnresponsive
+			width={ 500 }
+			height={ 300 }
+			data={ [
+				{
+					label: 'Series A',
+					data: [
+						{ date: new Date( '2024-01-01' ), value: 10, label: 'Jan 1' },
+						{ date: new Date( '2024-01-02' ), value: 20, label: 'Jan 2' },
+					],
+					options: {},
+				},
+			] }
+			withTooltips
+			withTooltipCrosshairs={ { showVertical: true } }
+			withGradientFill={ false }
+		/>
+	);
+
+	const scoped: ReactNode = scope ? (
+		<ChartScopeContext.Provider value={ scope }>{ chart }</ChartScopeContext.Provider>
+	) : (
+		chart
+	);
+
+	return render( <GlobalChartsProvider>{ scoped }</GlobalChartsProvider> );
+};
+
+const openTooltip = async () => {
+	const user = userEvent.setup();
+
+	screen.getByRole( 'grid', { name: /line chart/i } ).focus();
+	await user.keyboard( '{ArrowRight}' );
+
+	// eslint-disable-next-line testing-library/no-node-access -- visx owns the crosshair and hardcodes its class name, so there is no attribute to reach it by.
+	return document.querySelector( '.visx-crosshair-vertical line' );
+};
+
+describe( 'AccessibleTooltip', () => {
+	// The crosshair is painted in a portal outside the scope element; see TOKENS.md#the-svg-bridge.
+	it( 'reads the grid role from the scope element', async () => {
+		const scope = document.createElement( 'div' );
+		scope.style.setProperty( '--a8c-charts-color-grid', 'rgb(1, 2, 3)' );
+		document.body.appendChild( scope );
+
+		renderChart( scope );
+
+		await expect( openTooltip() ).resolves.toHaveAttribute( 'stroke', 'rgb(1, 2, 3)' );
+
+		document.body.removeChild( scope );
+	} );
+
+	it( 'falls back to the catalog default when the role is unset', async () => {
+		renderChart();
+
+		await expect( openTooltip() ).resolves.toHaveAttribute( 'stroke', '#dbdbdb' );
+	} );
+} );