@automattic/charts 4.8.0 → 4.10.0

package/src/charts/leaderboard-chart/types.ts

@@ -4,7 +4,6 @@ import { BaseChartProps, LeaderboardEntry } from '../../types';
 export interface LeaderboardChartProps extends Pick<
 	BaseChartProps< LeaderboardEntry >,
 	| 'className'
-	| 'data'
 	| 'showLegend'
 	| 'legend'
 	| 'chartId'
@@ -13,7 +12,14 @@ export interface LeaderboardChartProps extends Pick<
 	| 'size'
 	| 'gap'
 	| 'animation'
+	| 'ariaLabel'
 > {
+	/**
+	 * Entries to display. Declared here rather than picked, since the base type
+	 * would split the entry union into one array type per member.
+	 */
+	data: LeaderboardEntry[];
+
 	/**
 	 * Whether to show comparison data
 	 */

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

@@ -232,6 +232,7 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 	(
 		{
 			data,
+			ariaLabel,
 			chartId: providedChartId,
 			width,
 			height,
@@ -271,6 +272,7 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 		const legendInteractive = legend.interactive ?? false;
 		const legendCollapseGroups = legend.collapseGroups ?? false;
 		const legendComparisonItem = legend.comparisonItem ?? false;
+		const legendComparisonSeriesItems = legend.comparisonSeriesItems;
 		const legendShape = legend.shape ?? 'line';
 		const legendPosition = legend.position ?? 'bottom';
 
@@ -522,6 +524,7 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 				glyphSize: Math.max( 0, toNumber( glyphStyle?.radius ) ?? 4 ),
 				collapseGroups: legendCollapseGroups,
 				comparisonItem: legendComparisonItem,
+				comparisonSeriesItems: legendComparisonSeriesItems,
 				renderGlyph,
 			} ),
 			[
@@ -529,6 +532,7 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 				glyphStyle?.radius,
 				legendCollapseGroups,
 				legendComparisonItem,
+				legendComparisonSeriesItems,
 				renderGlyph,
 			]
 		);
@@ -624,10 +628,11 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 						const chartHeight = contentHeight > 0 ? contentHeight : height;
 
 						return (
+							// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- the application role hands arrow keys to the chart's point navigation.
 							<div
 								ref={ chartRef }
-								role="grid"
-								aria-label={ __( 'Line chart', 'jetpack-charts' ) }
+								role="application"
+								aria-label={ ariaLabel ?? __( 'Line chart', 'jetpack-charts' ) }
 								tabIndex={ 0 }
 								onKeyDown={ onChartKeyDown }
 								onFocus={ onChartFocus }
@@ -637,6 +642,7 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 									<div className={ plotStyles[ 'xy-plot' ] }>
 										{ zoomable && zoom.domain && <ZoomResetButton onClick={ zoom.reset } /> }
 										<XYChart
+											accessibilityLabel=""
 											theme={ theme }
 											width={ width }
 											height={ chartHeight }

package/src/charts/line-chart/private/line-chart-annotation-label-popover.tsx

@@ -1,14 +1,17 @@
 import { __ } from '@wordpress/i18n';
 import { Stack } from '@wordpress/ui';
 import clsx from 'clsx';
-import { useEffect, useId, useRef, useState } from 'react';
+import { useEffect, useId, useRef, useState, version as reactVersion } from 'react';
 import { isSafari } from '../../../utils';
 import styles from '../line-chart.module.scss';
 import type { ButtonWithPopover, PopoverElement, ToggleEvent } from '../../../types';
-import type { FC } from 'react';
+import type { FC, ReactNode } from 'react';
 
 export const POPOVER_BUTTON_SIZE = 44;
 
+// @todo Remove this (and uses of it below) when we drop support for WordPress versions shipping React 18.
+const isReact18 = reactVersion.startsWith( '18.' );
+
 const CloseIcon = () => (
 	<svg
 		width="16"
@@ -29,8 +32,8 @@ const CloseIcon = () => (
 interface LineChartAnnotationLabelWithPopoverProps {
 	title: string;
 	subtitle?: string;
-	renderLabel: FC< { title: string; subtitle?: string } >;
-	renderLabelPopover: FC< { title: string; subtitle?: string } >;
+	renderLabel: ( props: { title: string; subtitle?: string } ) => ReactNode;
+	renderLabelPopover: ( props: { title: string; subtitle?: string } ) => ReactNode;
 }
 
 const LineChartAnnotationLabelWithPopover: FC< LineChartAnnotationLabelWithPopoverProps > = ( {
@@ -83,7 +86,9 @@ const LineChartAnnotationLabelWithPopover: FC< LineChartAnnotationLabelWithPopov
 		<div className={ styles[ 'line-chart__annotation-label' ] }>
 			<button
 				ref={ buttonRef }
-				{ ...( { popovertarget: popoverId } as ButtonWithPopover ) }
+				{ ...( isReact18
+					? ( { popovertarget: popoverId } as ButtonWithPopover )
+					: { popoverTarget: popoverId } ) }
 				className={ styles[ 'line-chart__annotation-label-trigger-button' ] }
 				style={ {
 					width: `${ POPOVER_BUTTON_SIZE }px`,
@@ -110,10 +115,15 @@ const LineChartAnnotationLabelWithPopover: FC< LineChartAnnotationLabelWithPopov
 						{ renderLabelPopover( { title, subtitle } ) }
 					</div>
 					<button
-						{ ...( {
-							popovertarget: popoverId,
-							popovertargetaction: 'hide',
-						} as ButtonWithPopover ) }
+						{ ...( isReact18
+							? ( {
+									popovertarget: popoverId,
+									popovertargetaction: 'hide',
+								} as ButtonWithPopover )
+							: {
+									popoverTarget: popoverId,
+									popoverTargetAction: 'hide',
+								} ) }
 						className={ styles[ 'line-chart__annotation-label-popover-close-button' ] }
 						aria-label={ __( 'Close', 'jetpack-charts' ) }
 					>

package/src/charts/line-chart/test/default-tooltip-formatting.test.tsx

@@ -66,7 +66,7 @@ describe( 'renderDefaultTooltip date heading', () => {
 			</GlobalChartsProvider>
 		);
 
-		screen.getByRole( 'grid', { name: /line chart/i } ).focus();
+		screen.getByRole( 'application', { name: /line chart/i } ).focus();
 		await user.keyboard( '{ArrowRight}' );
 
 		expect( screen.getByTestId( 'chart-tooltip-0' ) ).toHaveTextContent( '3.8.2026' );

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

@@ -120,7 +120,7 @@ describe( 'LineChart', () => {
 				tooltipPlacement,
 				tooltipStyle: { backgroundColor: 'black', color: 'white', boxShadow: 'none' },
 			} );
-			screen.getByRole( 'grid', { name: /line chart/i } ).focus();
+			screen.getByRole( 'application', { name: /line chart/i } ).focus();
 			await user.keyboard( '{ArrowRight}' );
 
 			const vertical = screen.getByTestId( 'xy-chart-tooltip-crosshair-vertical' );
@@ -143,7 +143,7 @@ describe( 'LineChart', () => {
 	test( 'passes a color-only tooltipStyle through with no background added', async () => {
 		const user = userEvent.setup();
 		renderWithTheme( { tooltipStyle: { color: 'white' } } );
-		screen.getByRole( 'grid', { name: /line chart/i } ).focus();
+		screen.getByRole( 'application', { name: /line chart/i } ).focus();
 		await user.keyboard( '{ArrowRight}' );
 
 		const box = screen.getByTestId( 'bounded-tooltip' );
@@ -154,7 +154,7 @@ describe( 'LineChart', () => {
 	test( 'paints a tooltipStyle background on the box, not on the default content', async () => {
 		const user = userEvent.setup();
 		renderWithTheme( { tooltipStyle: { background: 'black' } } );
-		screen.getByRole( 'grid', { name: /line chart/i } ).focus();
+		screen.getByRole( 'application', { name: /line chart/i } ).focus();
 		await user.keyboard( '{ArrowRight}' );
 
 		expect( screen.getByTestId( 'bounded-tooltip' ) ).toHaveStyle( { background: 'black' } );
@@ -164,7 +164,7 @@ describe( 'LineChart', () => {
 	test( 'preserves the existing tooltip colors for noncolor overrides', async () => {
 		const user = userEvent.setup();
 		renderWithTheme( { tooltipStyle: { boxShadow: 'none' } } );
-		screen.getByRole( 'grid', { name: /line chart/i } ).focus();
+		screen.getByRole( 'application', { name: /line chart/i } ).focus();
 		await user.keyboard( '{ArrowRight}' );
 
 		const content = screen.getByTestId( 'line-chart-tooltip-content' );
@@ -179,13 +179,13 @@ describe( 'LineChart', () => {
 	} );
 
 	test.each( [ [ 'Escape', '{Escape}' ] ] )(
-		'returns focus to the grid after %s',
+		'returns focus to the chart after %s',
 		async ( _name, keys ) => {
 			jest.useFakeTimers();
 			try {
 				const user = userEvent.setup( { advanceTimers: jest.advanceTimersByTime } );
 				renderWithTheme();
-				const chart = screen.getByRole( 'grid', { name: /line chart/i } );
+				const chart = screen.getByRole( 'application', { name: /line chart/i } );
 
 				await user.tab();
 				expect( chart ).toHaveFocus();
@@ -225,7 +225,7 @@ describe( 'LineChart', () => {
 				],
 			} );
 			// Should render without crashing and show the single point
-			expect( screen.getByRole( 'grid', { name: /line chart/i } ) ).toBeInTheDocument();
+			expect( screen.getByRole( 'application', { name: /line chart/i } ) ).toBeInTheDocument();
 		} );
 
 		test( 'renders a bucket with no reading instead of failing the whole chart', () => {
@@ -241,7 +241,7 @@ describe( 'LineChart', () => {
 				],
 			} );
 			expect( screen.queryByText( /invalid data/i ) ).not.toBeInTheDocument();
-			expect( screen.getByRole( 'grid', { name: /line chart/i } ) ).toBeInTheDocument();
+			expect( screen.getByRole( 'application', { name: /line chart/i } ) ).toBeInTheDocument();
 		} );
 
 		test( 'tooltip reads No data for a bucket with no reading', async () => {
@@ -258,7 +258,7 @@ describe( 'LineChart', () => {
 				],
 			} );
 
-			screen.getByRole( 'grid', { name: /line chart/i } ).focus();
+			screen.getByRole( 'application', { name: /line chart/i } ).focus();
 			await user.keyboard( '{ArrowRight}' );
 
 			const tooltip = screen.getByTestId( 'chart-tooltip-0' );
@@ -282,7 +282,7 @@ describe( 'LineChart', () => {
 
 			expect( screen.queryByText( /invalid data/i ) ).not.toBeInTheDocument();
 
-			const chart = screen.getByRole( 'grid', { name: /line chart/i } );
+			const chart = screen.getByRole( 'application', { name: /line chart/i } );
 			const ticks = within( chart )
 				.getAllByText( /^-?[\d.,]+$/ )
 				.map( el => el.textContent ?? '' );
@@ -305,7 +305,7 @@ describe( 'LineChart', () => {
 				],
 			} );
 
-			const chart = screen.getByRole( 'grid', { name: /line chart/i } );
+			const chart = screen.getByRole( 'application', { name: /line chart/i } );
 			const ticks = within( chart )
 				.getAllByText( /^-?[\d.,]+$/ )
 				.map( el => el.textContent );
@@ -333,7 +333,7 @@ describe( 'LineChart', () => {
 				],
 			} );
 
-			const chart = screen.getByRole( 'grid', { name: /line chart/i } );
+			const chart = screen.getByRole( 'application', { name: /line chart/i } );
 			const ticks = within( chart )
 				.getAllByText( /^-?[\d.,]+$/ )
 				.map( el => el.textContent );
@@ -353,7 +353,7 @@ describe( 'LineChart', () => {
 				],
 			} );
 
-			const chart = screen.getByRole( 'grid', { name: /line chart/i } );
+			const chart = screen.getByRole( 'application', { name: /line chart/i } );
 			expect( within( chart ).getAllByText( /^-?[\d.,]+$/ ).length ).toBeGreaterThan( 2 );
 		} );
 
@@ -368,7 +368,7 @@ describe( 'LineChart', () => {
 				options: { axis: { y: { tickValues: [ 0, 0.5, 1 ] } } },
 			} );
 
-			const chart = screen.getByRole( 'grid', { name: /line chart/i } );
+			const chart = screen.getByRole( 'application', { name: /line chart/i } );
 			expect( within( chart ).getAllByText( /^-?[\d.,]+$/ ) ).toHaveLength( 3 );
 		} );
 
@@ -389,7 +389,7 @@ describe( 'LineChart', () => {
 				},
 			} );
 
-			const chart = screen.getByRole( 'grid', { name: /line chart/i } );
+			const chart = screen.getByRole( 'application', { name: /line chart/i } );
 			expect( within( chart ).getAllByText( /^\d+%$/ ) ).toHaveLength( 6 );
 		} );
 
@@ -544,9 +544,9 @@ describe( 'LineChart', () => {
 				],
 			} );
 
-			const grid = screen.getByRole( 'grid', { name: /line chart/i } );
+			const chart = screen.getByRole( 'application', { name: /line chart/i } );
 			// eslint-disable-next-line testing-library/no-node-access -- visx's stroke is a <path class="visx-line">; the axis and grid lines are plain <line> elements sharing that class.
-			const linePath = grid.querySelector( 'path.visx-line' );
+			const linePath = chart.querySelector( 'path.visx-line' );
 			const gapCount = linePath?.getAttribute( 'd' )?.match( /M/g )?.length;
 			expect( gapCount ).toBe( 2 );
 		} );
@@ -615,7 +615,7 @@ describe( 'LineChart', () => {
 			expect( screen.getAllByTestId( 'legend-item' ) ).toHaveLength( 2 );
 			const html = document.body.innerHTML;
 			expect( html.indexOf( 'data-testid="legend-horizontal"' ) ).toBeLessThan(
-				html.indexOf( 'role="grid"' )
+				html.indexOf( 'role="application"' )
 			);
 		} );
 	} );
@@ -805,7 +805,7 @@ describe( 'LineChart', () => {
 			expect( gradient ).toBeInTheDocument();
 
 			// Verify that the chart container exists
-			const chart = screen.getByRole( 'grid', { name: /line chart/i } );
+			const chart = screen.getByRole( 'application', { name: /line chart/i } );
 			expect( chart ).toBeInTheDocument();
 		} );
 	} );
@@ -821,7 +821,7 @@ describe( 'LineChart', () => {
 				},
 			} );
 			// The chart should render with the custom axis configuration
-			expect( screen.getByRole( 'grid', { name: /line chart/i } ) ).toBeInTheDocument();
+			expect( screen.getByRole( 'application', { name: /line chart/i } ) ).toBeInTheDocument();
 		} );
 	} );
 
@@ -1067,7 +1067,7 @@ describe( 'LineChart', () => {
 
 			// Instead of checking styles, verify the chart renders
 			expect( screen.getByTestId( 'line-chart' ) ).toBeInTheDocument();
-			expect( screen.getByRole( 'grid', { name: /line chart/i } ) ).toBeInTheDocument();
+			expect( screen.getByRole( 'application', { name: /line chart/i } ) ).toBeInTheDocument();
 		} );
 	} );
 
@@ -1605,17 +1605,18 @@ describe( 'LineChart', () => {
 		describe( 'Chart Focus and Accessibility Attributes', () => {
 			test( 'chart container has proper accessibility attributes', () => {
 				renderWithTheme();
-				const chart = screen.getByRole( 'grid', { name: /line chart/i } );
+				const chart = screen.getByRole( 'application', { name: /line chart/i } );
 
 				expect( chart ).toHaveAttribute( 'tabIndex', '0' );
-				expect( chart ).toHaveAttribute( 'role', 'grid' );
+				expect( chart ).toHaveAttribute( 'role', 'application' );
 				expect( chart ).toHaveAttribute( 'aria-label', 'Line chart' );
+				expect( screen.queryByLabelText( 'XYChart' ) ).not.toBeInTheDocument();
 			} );
 
 			test( 'chart container can receive focus', async () => {
 				const user = userEvent.setup();
 				renderWithTheme();
-				const chart = screen.getByRole( 'grid', { name: /line chart/i } );
+				const chart = screen.getByRole( 'application', { name: /line chart/i } );
 
 				await user.tab();
 				expect( chart ).toHaveFocus();
@@ -1646,7 +1647,7 @@ describe( 'LineChart', () => {
 				const onDatumActivate = jest.fn();
 				renderWithTheme( { data: [ SERIES_A, SERIES_B ], onDatumActivate } );
 
-				screen.getByRole( 'grid', { name: /line chart/i } ).focus();
+				screen.getByRole( 'application', { name: /line chart/i } ).focus();
 				await user.keyboard( '{ArrowRight}{ArrowRight}{Enter}' );
 
 				expect( onDatumActivate ).toHaveBeenCalledTimes( 1 );
@@ -1662,7 +1663,7 @@ describe( 'LineChart', () => {
 				const onDatumActivate = jest.fn();
 				renderWithTheme( { data: [ SERIES_A ], onDatumActivate } );
 
-				screen.getByRole( 'grid', { name: /line chart/i } ).focus();
+				screen.getByRole( 'application', { name: /line chart/i } ).focus();
 				await user.keyboard( '{Enter}' );
 
 				expect( onDatumActivate ).not.toHaveBeenCalled();
@@ -1696,7 +1697,7 @@ describe( 'LineChart', () => {
 						],
 					} );
 
-					const chart = screen.getByRole( 'grid', { name: /line chart/i } );
+					const chart = screen.getByRole( 'application', { name: /line chart/i } );
 					chart.focus();
 
 					// Single tab should focus on the first tooltip.
@@ -1741,7 +1742,7 @@ describe( 'LineChart', () => {
 					],
 				} );
 
-				const chart = screen.getByRole( 'grid', { name: /line chart/i } );
+				const chart = screen.getByRole( 'application', { name: /line chart/i } );
 				chart.focus();
 
 				// Right arrow key should focus on the first tooltip.
@@ -1788,7 +1789,7 @@ describe( 'LineChart', () => {
 					],
 				} );
 
-				const chart = screen.getByRole( 'grid', { name: /line chart/i } );
+				const chart = screen.getByRole( 'application', { name: /line chart/i } );
 				chart.focus();
 
 				// Chart should be in focus.
@@ -1819,7 +1820,7 @@ describe( 'LineChart', () => {
 
 			renderWithTheme( { renderTooltip: customTooltipRenderer } );
 
-			const chart = screen.getByRole( 'grid', { name: /line chart/i } );
+			const chart = screen.getByRole( 'application', { name: /line chart/i } );
 			chart.focus();
 
 			// Click on right arrow key to focus on the first tooltip.
@@ -2049,8 +2050,9 @@ describe( 'LineChart', () => {
 
 		const pointer = ( type: string, clientX: number, clientY: number ) => {
 			// visx owns the pointer capture rect and does not expose an attribute prop for it.
+			const chart = screen.getByRole( 'application' );
 			// eslint-disable-next-line testing-library/no-node-access
-			const target = screen.getByRole( 'grid' ).querySelector( 'svg > rect[fill="transparent"]' );
+			const target = chart.querySelector( 'svg > rect[fill="transparent"]' );
 			fireEvent( target, new MouseEvent( type, { bubbles: true, clientX, clientY } ) );
 		};
 
@@ -2398,7 +2400,7 @@ describe( 'LineChart', () => {
 				options: {},
 			},
 		];
-		// Bare numbers inside the plot (scoped via the chart's grid role, away from visx's
+		// Bare numbers inside the plot (scoped via the chart's application role, away from visx's
 		// off-screen text-measurement SVGs) are value-axis ticks: the series labels carry no digits
 		// and the empty-state message is text-only.
 		const numericTick = /^[\d,]+$/;
@@ -2414,7 +2416,7 @@ describe( 'LineChart', () => {
 				data: twoSeries,
 			} );
 
-			const chart = screen.getByRole( 'grid' );
+			const chart = screen.getByRole( 'application' );
 			const ticksBefore = within( chart )
 				.getAllByText( numericTick )
 				.map( el => el.textContent )
@@ -2441,7 +2443,7 @@ describe( 'LineChart', () => {
 				data: twoSeries,
 			} );
 
-			const chart = screen.getByRole( 'grid' );
+			const chart = screen.getByRole( 'application' );
 			const ticksBefore = within( chart )
 				.getAllByText( numericTick )
 				.map( el => el.textContent )
@@ -2469,7 +2471,7 @@ describe( 'LineChart', () => {
 				data: twoSeries,
 			} );
 
-			const chart = screen.getByRole( 'grid' );
+			const chart = screen.getByRole( 'application' );
 			expect( within( chart ).getAllByText( numericTick ).length ).toBeGreaterThan( 0 );
 
 			const buttons = screen.getAllByRole( 'button' );

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

@@ -93,7 +93,7 @@ describe( 'default tooltip at hourly resolution', () => {
 			</GlobalChartsProvider>
 		);
 
-		screen.getByRole( 'grid', { name: /line chart/i } ).focus();
+		screen.getByRole( 'application', { name: /line chart/i } ).focus();
 		await user.keyboard( '{ArrowRight}' );
 
 		expect( screen.getByTestId( 'chart-tooltip-0' ) ).toHaveTextContent( '2.8.2026, 09 Uhr' );
@@ -130,7 +130,7 @@ describe( 'default tooltip at hourly resolution', () => {
 			</GlobalChartsProvider>
 		);
 
-		screen.getByRole( 'grid', { name: /line chart/i } ).focus();
+		screen.getByRole( 'application', { name: /line chart/i } ).focus();
 		await user.keyboard( '{ArrowRight}' );
 
 		const tooltip = screen.getByTestId( 'chart-tooltip-0' );

package/src/charts/line-chart/types.ts

@@ -10,7 +10,7 @@ import type {
 } from '../../types';
 import type { CrosshairStyle, RenderTooltipParams } from '../../visx/types';
 import type { GlyphProps } from '@visx/xychart';
-import type { ReactNode, SVGProps, FC, CSSProperties } from 'react';
+import type { ReactNode, SVGProps, CSSProperties } from 'react';
 
 export type LineChartAnnotationProps = {
 	datum: DataPointDate;
@@ -19,8 +19,8 @@ export type LineChartAnnotationProps = {
 	subjectType?: 'circle' | 'line-vertical' | 'line-horizontal';
 	styles?: AnnotationStyles;
 	testId?: string;
-	renderLabel?: FC< { title: string; subtitle?: string } >;
-	renderLabelPopover?: FC< { title: string; subtitle?: string } >;
+	renderLabel?: ( props: { title: string; subtitle?: string } ) => ReactNode;
+	renderLabelPopover?: ( props: { title: string; subtitle?: string } ) => ReactNode;
 };
 
 export type CurveType = 'smooth' | 'linear' | 'monotone';

package/src/charts/pie-chart/pie-chart.module.scss

@@ -1,4 +1,7 @@
 .pie-chart {
+	// Keeps the tooltip's z-index inside the chart, as `.xy-plot` does.
+	isolation: isolate;
+
 	// Anchors the tooltip, which renders next to the SVG in here.
 	&__plot {
 		position: relative;