@automattic/charts 4.9.0 → 4.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "4.9.0",
+	"version": "4.10.0",
 	"description": "Display charts within Automattic products.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/charts/#readme",
 	"bugs": {

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

@@ -262,8 +262,9 @@ const AreaChartInternal = forwardRef< ChartInstanceRef, AreaChartProps >(
 				glyphSize: 0,
 				collapseGroups: legend.collapseGroups ?? false,
 				comparisonItem: legend.comparisonItem ?? false,
+				comparisonSeriesItems: legend.comparisonSeriesItems,
 			} ),
-			[ legend.collapseGroups, legend.comparisonItem ]
+			[ legend.collapseGroups, legend.comparisonItem, legend.comparisonSeriesItems ]
 		);
 		const legendItems = useChartLegendItems( dataSorted, legendOptions, legendShape );
 

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

@@ -785,14 +785,6 @@ describe( 'AreaChart', () => {
 			const chart = screen.getByRole( 'application', { name: /area chart/i } );
 			expect( chart ).toHaveAttribute( 'tabIndex', '0' );
 			expect( chart ).toHaveAttribute( 'aria-label', 'Area chart' );
-		} );
-
-		test.each( [
-			[ undefined, 'Area chart' ],
-			[ 'Views over time', 'Views over time' ],
-		] )( 'names the chart container from ariaLabel %p', ( ariaLabel, name ) => {
-			renderWithProvider( { ariaLabel } );
-			expect( screen.getByRole( 'application', { name } ) ).toBeInTheDocument();
 			expect( screen.queryByLabelText( 'XYChart' ) ).not.toBeInTheDocument();
 		} );
 	} );

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

@@ -11,8 +11,6 @@ import type { CurveType } from '../line-chart/types';
 import type { ReactNode } from 'react';
 
 export interface AreaChartProps extends BaseChartProps< SeriesData[] >, SeriesVisibilityProps {
-	/** Accessible name of the chart. Defaults to a localized "Area chart". */
-	ariaLabel?: string;
 	/**
 	 * Legend configuration. Supports `collapseGroups` on top of the shared options.
 	 */

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

@@ -139,6 +139,7 @@ const BarChartInternal: FC< BarChartProps > = ( {
 	const legendInteractive = legend.interactive ?? false;
 	const legendCollapseGroups = legend.collapseGroups ?? false;
 	const legendComparisonItem = legend.comparisonItem ?? false;
+	const legendComparisonSeriesItems = legend.comparisonSeriesItems;
 	const horizontal = orientation === 'horizontal';
 	const chartId = useChartId( providedChartId );
 	const hiddenSeries = useDefaultHiddenSeries( chartId, defaultHiddenSeries );
@@ -159,8 +160,12 @@ const BarChartInternal: FC< BarChartProps > = ( {
 
 	// Create legend items using the reusable hook
 	const legendOptions = useMemo(
-		() => ( { collapseGroups: legendCollapseGroups, comparisonItem: legendComparisonItem } ),
-		[ legendCollapseGroups, legendComparisonItem ]
+		() => ( {
+			collapseGroups: legendCollapseGroups,
+			comparisonItem: legendComparisonItem,
+			comparisonSeriesItems: legendComparisonSeriesItems,
+		} ),
+		[ legendCollapseGroups, legendComparisonItem, legendComparisonSeriesItems ]
 	);
 	const legendItems = useChartLegendItems( dataSorted, legendOptions );
 

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

@@ -1685,14 +1685,6 @@ describe( 'BarChart', () => {
 				expect( chart ).toHaveAttribute( 'tabIndex', '0' );
 				expect( chart ).toHaveAttribute( 'role', 'application' );
 				expect( chart ).toHaveAttribute( 'aria-label', 'Bar chart' );
-			} );
-
-			test.each( [
-				[ undefined, 'Bar chart' ],
-				[ 'Views over time', 'Views over time' ],
-			] )( 'names the chart container from ariaLabel %p', ( ariaLabel, name ) => {
-				renderWithTheme( { ariaLabel } );
-				expect( screen.getByRole( 'application', { name } ) ).toBeInTheDocument();
 				expect( screen.queryByLabelText( 'XYChart' ) ).not.toBeInTheDocument();
 			} );
 

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

@@ -19,8 +19,6 @@ export type BandHighlightSelection = {
 };
 
 export interface BarChartProps extends BaseChartProps< SeriesData[] >, SeriesVisibilityProps {
-	/** Accessible name of the chart. Defaults to a localized "Bar chart". */
-	ariaLabel?: string;
 	/**
 	 * Legend configuration. Supports `collapseGroups` on top of the shared options.
 	 */

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

@@ -2,6 +2,7 @@ import { formatNumberCompact } from '@automattic/number-formatters';
 import { Group } from '@visx/group';
 import { createScale, scaleBand } from '@visx/scale';
 import { Text, type TextProps } from '@visx/text';
+import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import { useContext, useMemo } from 'react';
 import { GlobalChartsContext, GlobalChartsProvider, useGlobalChartsContext } from '../../providers';
@@ -235,6 +236,7 @@ const BarListChartInternal: FC< BarListChartProps > = ( {
 		top: 0,
 	},
 	className,
+	ariaLabel,
 	...rest
 } ) => {
 	const { getElementStyles } = useGlobalChartsContext();
@@ -333,6 +335,7 @@ const BarListChartInternal: FC< BarListChartProps > = ( {
 				xScale: chartOptions.xScale,
 				yScale: chartOptions.yScale,
 			} }
+			ariaLabel={ ariaLabel ?? __( 'Bar list chart', 'jetpack-charts' ) }
 			{ ...rest }
 		/>
 	);

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

@@ -1,9 +1,10 @@
 import { useTooltip } from '@visx/tooltip';
+import { __ } from '@wordpress/i18n';
 import { Stack } from '@wordpress/ui';
 import clsx from 'clsx';
 import { type FC, useRef, useMemo, useEffect, useState, useCallback, useContext } from 'react';
 import { BoundedTooltip } from '../../components/tooltip/private/bounded-tooltip';
-import { usePrefersReducedMotion } from '../../hooks';
+import { useElementSize, usePrefersReducedMotion } from '../../hooks';
 import {
 	GlobalChartsProvider,
 	GlobalChartsContext,
@@ -19,6 +20,9 @@ import styles from './conversion-funnel-chart.module.scss';
 import { useFunnelSelection } from './private';
 import type { FunnelStep, ConversionFunnelChartProps } from './types';
 
+/** Chart height (px) below which the funnel tightens its gaps so the bars keep their room. */
+const SHORT_CHART_HEIGHT = 180;
+
 /**
  * Internal ConversionFunnelChart component with chart registration
  *
@@ -30,6 +34,7 @@ import type { FunnelStep, ConversionFunnelChartProps } from './types';
  * @param props.loading          - Whether the chart is in loading state
  * @param props.animation        - Whether to show chart animation on initial render or not
  * @param props.className        - Additional CSS class name
+ * @param props.ariaLabel        - Accessible name for the chart group
  * @param props.height           - Height of the chart container. Falls back to style.height if set, otherwise defaults to "100%".
  * @param props.style            - Custom styling
  * @param props.renderStepLabel  - Custom render function for step labels
@@ -46,6 +51,7 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 	loading = false,
 	animation,
 	className,
+	ariaLabel,
 	chartId: providedChartId,
 	height,
 	style,
@@ -69,11 +75,19 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 	const { handleBarClick, handleBarKeyDown, clearSelection, getStepState } =
 		useFunnelSelection( hideTooltip );
 	const standaloneScopeClass = useStandaloneScopeClass();
+	const [ measureChartRef, , chartHeight ] = useElementSize< HTMLDivElement >();
+	// A zero height is an unmeasured or hidden chart, not a short one.
+	const isShort = chartHeight > 0 && chartHeight < SHORT_CHART_HEIGHT;
+	const gap = isShort ? 'sm' : 'xl';
 	// Stable identity so React doesn't detach/reattach (and re-render the scope context) on every commit. Keep it firing on unmount (node === null).
-	const setChartRef = useCallback( ( node: HTMLDivElement | null ) => {
-		chartRef.current = node;
-		setScopeNode( node );
-	}, [] );
+	const setChartRef = useCallback(
+		( node: HTMLDivElement | null ) => {
+			chartRef.current = node;
+			setScopeNode( node );
+			measureChartRef( node );
+		},
+		[ measureChartRef ]
+	);
 
 	// Wrapper to clear selectedBarRef after clearing selection
 	const clearSelectionAndRef = useCallback( () => {
@@ -309,8 +323,10 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 	return (
 		<Stack
 			direction="column"
-			gap="xl"
+			gap={ gap }
 			data-testid="conversion-funnel-chart"
+			role="group"
+			aria-label={ ariaLabel ?? __( 'Conversion funnel chart', 'jetpack-charts' ) }
 			ref={ setChartRef }
 			className={ clsx(
 				'conversion-funnel-chart',
@@ -351,7 +367,7 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 									isColorPaletteResolved && styles[ 'funnel-step--animated' ],
 									isBlurred && styles[ 'funnel-step--blurred' ]
 								) }
-								gap="xl"
+								gap={ gap }
 							>
 								{ /* Step Label and Rate */ }
 								<Stack direction="column" gap="xs">

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

@@ -3,6 +3,11 @@ import userEvent from '@testing-library/user-event';
 import ConversionFunnelChart from '../conversion-funnel-chart';
 import type { FunnelStep } from '../types';
 
+let mockChartHeight = 0;
+jest.mock( '../../../hooks/use-element-size', () => ( {
+	useElementSize: () => [ jest.fn(), 500, mockChartHeight ],
+} ) );
+
 // Mock data for testing
 const mockSteps: FunnelStep[] = [
 	{
@@ -42,6 +47,10 @@ const renderWithoutTheme = ( component: React.ReactElement ) => {
 };
 
 describe( 'ConversionFunnelChart', () => {
+	afterEach( () => {
+		mockChartHeight = 0;
+	} );
+
 	describe( 'Basic Rendering', () => {
 		it( 'renders the main conversion rate', () => {
 			renderWithoutTheme( <ConversionFunnelChart { ...defaultProps } /> );
@@ -116,6 +125,19 @@ describe( 'ConversionFunnelChart', () => {
 				height: '250px',
 			} );
 		} );
+
+		it.each( [
+			[ 'unmeasured', 0, 'xl' ],
+			[ 'short', 120, 'sm' ],
+			[ 'tall', 320, 'xl' ],
+		] )( 'spaces a %s (%ipx) chart with the %s gap', ( _, height, gap ) => {
+			mockChartHeight = height;
+			renderWithoutTheme( <ConversionFunnelChart { ...defaultProps } /> );
+
+			expect( screen.getByTestId( 'conversion-funnel-chart' ).style.gap ).toContain(
+				`gap-${ gap }`
+			);
+		} );
 	} );
 
 	describe( 'Empty State', () => {

package/src/charts/conversion-funnel-chart/types.ts

@@ -59,7 +59,7 @@ export interface TooltipRenderProps {
  */
 export interface ConversionFunnelChartProps extends Pick<
 	BaseChartProps,
-	'className' | 'chartId' | 'animation'
+	'className' | 'chartId' | 'animation' | 'ariaLabel'
 > {
 	/** Main conversion rate to highlight */
 	mainRate: number;

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

@@ -126,6 +126,7 @@ function normalizeGeoChartError( eventArgs: unknown ): GeoChartError {
  *
  * @param props                   - The props for the GeoChart component
  * @param props.data              - Data in Google Charts format (array of arrays with headers)
+ * @param props.ariaLabel         - Accessible name of the chart
  * @param props.width             - Width of the chart in pixels
  * @param props.height            - Height of the chart in pixels
  * @param props.region            - Region to display ('world', 'US', or ISO 3166-1 alpha-2 code)
@@ -140,6 +141,7 @@ function normalizeGeoChartError( eventArgs: unknown ): GeoChartError {
 const GeoChartInternal: FC< GeoChartProps > = ( {
 	className,
 	data,
+	ariaLabel,
 	width,
 	height,
 	region = 'world',
@@ -289,12 +291,23 @@ const GeoChartInternal: FC< GeoChartProps > = ( {
 		]
 	);
 
-	const chartEvents = useMemo< ReactGoogleChartEvent[] | undefined >( () => {
+	const chartEvents = useMemo< ReactGoogleChartEvent[] >( () => {
+		const readyEvent: ReactGoogleChartEvent = {
+			eventName: 'ready',
+			// Google hardcodes aria-label="A chart." on its SVG, which repeats the chart's own name.
+			callback: () => {
+				containerRef.current
+					?.querySelectorAll( 'svg' )
+					.forEach( svg => svg.setAttribute( 'aria-hidden', 'true' ) );
+			},
+		};
+
 		if ( ! onError ) {
-			return undefined;
+			return [ readyEvent ];
 		}
 
 		return [
+			readyEvent,
 			{
 				eventName: 'error',
 				callback: ( { eventArgs } ) => {
@@ -307,6 +320,8 @@ const GeoChartInternal: FC< GeoChartProps > = ( {
 	return (
 		<Center
 			ref={ containerRef }
+			role="group"
+			aria-label={ ariaLabel ?? __( 'Geo chart', 'jetpack-charts' ) }
 			className={ clsx( 'geo-chart', styles.container, className ) }
 			data-testid="geo-chart"
 			style={ { width, height } }

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

@@ -281,13 +281,18 @@ describe( 'GeoChart', () => {
 	} );
 
 	describe( 'Chart Events', () => {
-		test( 'does not pass chart events when onError is omitted', () => {
+		test( "hides Google's own SVG label from screen readers once the map is ready", () => {
 			renderWithTheme();
 
-			const chartEvents = screen.getByTestId( 'chart-events' );
-			const events = JSON.parse( chartEvents.textContent || '[]' );
+			const svg = document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' );
+			screen.getByTestId( 'google-chart-mock' ).appendChild( svg );
 
-			expect( events ).toEqual( [] );
+			const chartProps = ChartMock.mock.calls[ ChartMock.mock.calls.length - 1 ]?.[ 0 ];
+			chartProps.chartEvents
+				.find( ( event: { eventName: string } ) => event.eventName === 'ready' )
+				.callback( {} );
+
+			expect( svg ).toHaveAttribute( 'aria-hidden', 'true' );
 		} );
 
 		test( 'calls onError when Google Charts emits an error', () => {

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

@@ -31,7 +31,7 @@ export interface GeoChartError {
 
 export interface GeoChartProps extends Pick<
 	BaseChartProps,
-	'className' | 'chartId' | 'width' | 'height'
+	'className' | 'chartId' | 'ariaLabel' | 'width' | 'height'
 > {
 	/**
 	 * Data in Google Charts native format for maximum flexibility.

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

@@ -1222,12 +1222,6 @@ describe( 'HeatmapChart calendar navigation', () => {
 } );
 
 describe( 'HeatmapChart naming and focus', () => {
-	test( 'names the grid from ariaLabel when given', () => {
-		renderChart( { ariaLabel: 'Monthly posting activity' } );
-		expect( screen.getByRole( 'grid', { name: 'Monthly posting activity' } ) ).toBeInTheDocument();
-		expect( screen.queryByRole( 'grid', { name: /heatmap chart/i } ) ).not.toBeInTheDocument();
-	} );
-
 	test( 'scrolls the keyboard-selected cell into view', async () => {
 		// jsdom has no scrollIntoView; the assertion is that the chart asks for it.
 		const scrollIntoView = jest.fn();

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

@@ -74,8 +74,6 @@ export interface HeatmapChartProps extends Omit<
 	 * group past the edge, Page Up/Down by one group. Default `grid`.
 	 */
 	keyboardNavigation?: 'grid' | 'calendar';
-	/** Accessible name of the grid. Defaults to a localized "Heatmap chart". */
-	ariaLabel?: string;
 	/** Compact mode: hide in-cell values, tighten gap, thin axis labels. Default false. */
 	compact?: boolean;
 	/** Compact mode only: grow the cells to fill the chart's box, wrapping the column groups onto more rows when that makes them larger. Default false. */

package/src/charts/leaderboard-chart/hooks/use-fitted-row-count.ts

@@ -16,8 +16,8 @@ export const SUBPIXEL_TOLERANCE = 0.5;
  * depends on `--a8c-charts-dimension-leaderboard-row-gap`, label wrapping, and
  * whatever a caller renders as a label, so any restated number would drift.
  *
- * Every row is a direct grid child marked with `data-row-index`; interactive rows
- * use a button wrapper and non-interactive rows use a div wrapper.
+ * Every row is a `listitem` div, a direct grid child marked with `data-row-index`;
+ * interactive rows hold a button inside it.
  *
  * @param enabled  - Whether to measure at all. When false every row fits.
  * @param rowCount - Total number of rows rendered.

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

@@ -147,6 +147,12 @@
 // needs no runtime cascade and never lands on the DOM as an unprefixed var.
 $focus-ring-width: var(--wpds-border-width-focus);
 
+.rowItem {
+	display: grid;
+	grid-column: 1 / -1;
+	grid-template-columns: subgrid;
+}
+
 .row {
 	display: grid;
 	grid-column: 1 / -1;

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

@@ -188,6 +188,7 @@ const BarWithLabel = ( {
  * @param props.children         - Child components for composition API
  * @param props.className        - Additional CSS class name
  * @param props.style            - Custom styling for the chart container
+ * @param props.ariaLabel        - Accessible name for the list, defaulting to "Leaderboard chart"
  * @return JSX element representing the leaderboard chart
  */
 const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
@@ -208,6 +209,7 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 	legend = {},
 	legendLabels,
 	gap = 'md',
+	ariaLabel,
 	className,
 	style,
 	children,
@@ -389,6 +391,8 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 						</div>
 					) : (
 						<Grid
+							role="list"
+							aria-label={ ariaLabel ?? __( 'Leaderboard chart', 'jetpack-charts' ) }
 							templateColumns="minmax(0, 1fr) auto"
 							rowGap={ ROW_GAP }
 							columnGap={ COLUMN_GAP }
@@ -465,46 +469,57 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 
 								if ( entry.onClick && entry.hasInteractiveLabel ) {
 									return (
-										// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- Mouse-only fallback; the row button carries keyboard access.
 										<div
 											key={ entry.id }
+											role="listitem"
 											data-row-index={ rowIndex }
 											style={ rowStyle }
-											className={ clsx( styles.row, styles.interactiveRow, styles.layeredRow ) }
-											onClick={ forwardCellClickToRowButton }
+											className={ styles.rowItem }
 										>
-											{ rowCells }
-											<button
-												type="button"
-												className={ styles.rowButton }
-												onClick={ entry.onClick }
-												aria-label={ entry.ariaLabel }
-											/>
-											<Icon className={ styles.chevron } icon={ chevronRight } size={ 24 } />
+											{ /* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- Mouse-only fallback; the row button carries keyboard access. */ }
+											<div
+												className={ clsx( styles.row, styles.interactiveRow, styles.layeredRow ) }
+												onClick={ forwardCellClickToRowButton }
+											>
+												{ rowCells }
+												<button
+													type="button"
+													className={ styles.rowButton }
+													onClick={ entry.onClick }
+													aria-label={ entry.ariaLabel }
+												/>
+												<Icon className={ styles.chevron } icon={ chevronRight } size={ 24 } />
+											</div>
 										</div>
 									);
 								}
 
 								if ( entry.onClick ) {
 									return (
-										<button
+										<div
 											key={ entry.id }
-											type="button"
+											role="listitem"
 											data-row-index={ rowIndex }
 											style={ rowStyle }
-											className={ clsx( styles.row, styles.interactiveRow ) }
-											onClick={ entry.onClick }
-											aria-label={ entry.ariaLabel }
+											className={ styles.rowItem }
 										>
-											{ rowCells }
-											<Icon className={ styles.chevron } icon={ chevronRight } size={ 24 } />
-										</button>
+											<button
+												type="button"
+												className={ clsx( styles.row, styles.interactiveRow ) }
+												onClick={ entry.onClick }
+												aria-label={ entry.ariaLabel }
+											>
+												{ rowCells }
+												<Icon className={ styles.chevron } icon={ chevronRight } size={ 24 } />
+											</button>
+										</div>
 									);
 								}
 
 								return (
 									<div
 										key={ entry.id }
+										role="listitem"
 										data-row-index={ rowIndex }
 										style={ rowStyle }
 										className={ styles.row }

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

@@ -1,4 +1,4 @@
-import { render, screen, act } from '@testing-library/react';
+import { render, screen, act, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { GlobalChartsProvider } from '../../../providers';
 import { useGlobalChartsContext } from '../../../providers/chart-context/hooks/use-global-charts-context';
@@ -706,6 +706,32 @@ describe( 'LeaderboardChart', () => {
 			);
 		} );
 
+		it( 'renders each entry as a list item, keeping clickable rows as named buttons', () => {
+			render(
+				<LeaderboardChart
+					data={ [
+						mockData[ 0 ],
+						{ ...mockData[ 1 ], ariaLabel: 'Open Home', onClick: jest.fn() },
+						{
+							...mockData[ 1 ],
+							id: 'about',
+							ariaLabel: 'Open About',
+							onClick: jest.fn(),
+							hasInteractiveLabel: true,
+						},
+					] }
+				/>
+			);
+			const items = screen.getAllByRole( 'listitem' );
+			expect( items ).toHaveLength( 3 );
+			expect(
+				within( items[ 1 ] ).getByRole( 'button', { name: 'Open Home' } )
+			).toBeInTheDocument();
+			expect(
+				within( items[ 2 ] ).getByRole( 'button', { name: 'Open About' } )
+			).toBeInTheDocument();
+		} );
+
 		it( 'does not render a button for entries without onClick', () => {
 			render( <LeaderboardChart data={ [ mockData[ 0 ] ] } /> );
 			expect( screen.queryByRole( 'button' ) ).not.toBeInTheDocument();

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

@@ -12,6 +12,7 @@ export interface LeaderboardChartProps extends Pick<
 	| 'size'
 	| 'gap'
 	| 'animation'
+	| 'ariaLabel'
 > {
 	/**
 	 * Entries to display. Declared here rather than picked, since the base type

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

@@ -272,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';
 
@@ -523,6 +524,7 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 				glyphSize: Math.max( 0, toNumber( glyphStyle?.radius ) ?? 4 ),
 				collapseGroups: legendCollapseGroups,
 				comparisonItem: legendComparisonItem,
+				comparisonSeriesItems: legendComparisonSeriesItems,
 				renderGlyph,
 			} ),
 			[
@@ -530,6 +532,7 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 				glyphStyle?.radius,
 				legendCollapseGroups,
 				legendComparisonItem,
+				legendComparisonSeriesItems,
 				renderGlyph,
 			]
 		);

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

@@ -1610,14 +1610,6 @@ describe( 'LineChart', () => {
 				expect( chart ).toHaveAttribute( 'tabIndex', '0' );
 				expect( chart ).toHaveAttribute( 'role', 'application' );
 				expect( chart ).toHaveAttribute( 'aria-label', 'Line chart' );
-			} );
-
-			test.each( [
-				[ undefined, 'Line chart' ],
-				[ 'Views over time', 'Views over time' ],
-			] )( 'names the chart container from ariaLabel %p', ( ariaLabel, name ) => {
-				renderWithTheme( { ariaLabel } );
-				expect( screen.getByRole( 'application', { name } ) ).toBeInTheDocument();
 				expect( screen.queryByLabelText( 'XYChart' ) ).not.toBeInTheDocument();
 			} );
 

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

@@ -31,8 +31,6 @@ export type RenderLineGlyphProps< Datum extends object > = GlyphProps< Datum > &
 };
 
 export interface LineChartProps extends BaseChartProps< SeriesData[] >, SeriesVisibilityProps {
-	/** Accessible name of the chart. Defaults to a localized "Line chart". */
-	ariaLabel?: string;
 	/**
 	 * Legend configuration. Supports `collapseGroups` on top of the shared options.
 	 */

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;

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

@@ -138,11 +138,6 @@ export interface PieChartProps extends BaseChartProps< DataPointPercentage[] > {
 	 * When provided, replaces the default `label: value` tooltip with custom content.
 	 */
 	renderTooltip?: ( params: PieChartRenderTooltipParams ) => ReactNode;
-
-	/**
-	 * Accessible name of the chart. Defaults to a localized "Pie chart".
-	 */
-	ariaLabel?: string;
 }
 
 // Base props type with optional responsive properties

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

@@ -780,14 +780,6 @@ describe( 'PieChart', () => {
 			{ label: 'Linux', value: 22000, valueDisplay: '22K' },
 		];
 
-		test.each( [
-			[ undefined, 'Pie chart' ],
-			[ 'Devices', 'Devices' ],
-		] )( 'names the focusable chart from ariaLabel %p', ( ariaLabel, name ) => {
-			render( <PieChart data={ data } ariaLabel={ ariaLabel } /> );
-			expect( screen.getByRole( 'application', { name } ) ).toHaveAttribute( 'tabindex', '0' );
-		} );
-
 		const expectRingOn = ( segment: HTMLElement ) =>
 			expect( screen.getByTestId( 'pie-selected-ring' ) ).toHaveAttribute(
 				'd',
@@ -799,6 +791,10 @@ describe( 'PieChart', () => {
 			render( <PieChart data={ data } withTooltips /> );
 			const [ macos, linux ] = screen.getAllByTestId( 'pie-segment' );
 			expect( screen.queryByTestId( 'pie-selected-ring' ) ).not.toBeInTheDocument();
+			expect( screen.getByRole( 'application', { name: 'Pie chart' } ) ).toHaveAttribute(
+				'tabindex',
+				'0'
+			);
 
 			await user.tab();
 			await user.keyboard( '{ArrowRight}' );

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

@@ -1,4 +1,7 @@
 .pie-semi-circle-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;