@automattic/charts 4.8.0 → 4.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "4.8.0",
+	"version": "4.9.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

@@ -52,6 +52,7 @@ const AreaChartInternal = forwardRef< ChartInstanceRef, AreaChartProps >(
 	(
 		{
 			data,
+			ariaLabel,
 			chartId: providedChartId,
 			width,
 			height,
@@ -421,10 +422,11 @@ const AreaChartInternal = forwardRef< ChartInstanceRef, AreaChartProps >(
 						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={ __( 'Area chart', 'jetpack-charts' ) }
+								role="application"
+								aria-label={ ariaLabel ?? __( 'Area chart', 'jetpack-charts' ) }
 								tabIndex={ 0 }
 								onKeyDown={ onChartKeyDown }
 								onFocus={ onChartFocus }
@@ -434,6 +436,7 @@ const AreaChartInternal = forwardRef< ChartInstanceRef, AreaChartProps >(
 									<div className={ plotStyles[ 'xy-plot' ] }>
 										{ zoomable && zoom.domain && <ZoomResetButton onClick={ zoom.reset } /> }
 										<XYChart
+											accessibilityLabel=""
 											theme={ theme }
 											width={ width }
 											height={ chartHeight }

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

@@ -53,13 +53,13 @@ describe( 'AreaChart', () => {
 	};
 
 	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 } );
 				renderWithProvider();
-				const chart = screen.getByRole( 'grid', { name: /area chart/i } );
+				const chart = screen.getByRole( 'application', { name: /area chart/i } );
 
 				await user.tab();
 				expect( chart ).toHaveFocus();
@@ -139,7 +139,7 @@ describe( 'AreaChart', () => {
 
 		test( 'renders with valid data', () => {
 			renderWithProvider();
-			expect( screen.getByRole( 'grid', { name: /area chart/i } ) ).toBeInTheDocument();
+			expect( screen.getByRole( 'application', { name: /area chart/i } ) ).toBeInTheDocument();
 		} );
 	} );
 
@@ -203,7 +203,7 @@ describe( 'AreaChart', () => {
 				],
 			} );
 
-			const chart = screen.getByRole( 'grid', { name: /area chart/i } );
+			const chart = screen.getByRole( 'application', { name: /area chart/i } );
 			const ticks = within( chart )
 				.getAllByText( /^-?[\d.,]+$/ )
 				.map( el => el.textContent );
@@ -228,7 +228,7 @@ describe( 'AreaChart', () => {
 				},
 			} );
 
-			const chart = screen.getByRole( 'grid', { name: /area chart/i } );
+			const chart = screen.getByRole( 'application', { name: /area chart/i } );
 			expect( within( chart ).getAllByText( /^\d+%$/ ) ).toHaveLength( 6 );
 		} );
 
@@ -254,7 +254,7 @@ describe( 'AreaChart', () => {
 				],
 			} );
 
-			const chart = screen.getByRole( 'grid', { name: /area chart/i } );
+			const chart = screen.getByRole( 'application', { name: /area chart/i } );
 			expect( within( chart ).getAllByText( /^-?[\d.,]+$/ ).length ).toBeGreaterThan( 2 );
 		} );
 	} );
@@ -275,7 +275,7 @@ describe( 'AreaChart', () => {
 
 		test( 'accepts custom stackOffset', () => {
 			renderWithProvider( { stackOffset: 'expand' } );
-			expect( screen.getByRole( 'grid', { name: /area chart/i } ) ).toBeInTheDocument();
+			expect( screen.getByRole( 'application', { name: /area chart/i } ) ).toBeInTheDocument();
 		} );
 	} );
 
@@ -344,7 +344,7 @@ describe( 'AreaChart', () => {
 
 			// Open a tooltip via keyboard navigation, then verify the hidden
 			// series' label is absent from the rendered tooltip rows.
-			const chart = screen.getByRole( 'grid', { name: /area chart/i } );
+			const chart = screen.getByRole( 'application', { name: /area chart/i } );
 			chart.focus();
 			await user.keyboard( '{ArrowRight}' );
 
@@ -364,7 +364,7 @@ describe( 'AreaChart', () => {
 			} );
 
 			await user.click( screen.getByText( 'Series A' ) );
-			const chart = screen.getByRole( 'grid', { name: /area chart/i } );
+			const chart = screen.getByRole( 'application', { name: /area chart/i } );
 			chart.focus();
 			await user.keyboard( '{ArrowRight}' );
 
@@ -762,7 +762,7 @@ describe( 'AreaChart', () => {
 				context?.toggleSeriesVisibility( chartId, 'Series A' );
 			} );
 
-			const chart = screen.getByRole( 'grid', { name: /area chart/i } );
+			const chart = screen.getByRole( 'application', { name: /area chart/i } );
 			chart.focus();
 			await user.keyboard( '{ArrowRight}' );
 
@@ -775,17 +775,26 @@ describe( 'AreaChart', () => {
 	describe( 'Without GlobalChartsProvider', () => {
 		test( 'self-wraps in a provider when none is present', () => {
 			render( <AreaChartUnresponsive { ...defaultProps } /> );
-			expect( screen.getByRole( 'grid', { name: /area chart/i } ) ).toBeInTheDocument();
+			expect( screen.getByRole( 'application', { name: /area chart/i } ) ).toBeInTheDocument();
 		} );
 	} );
 
 	describe( 'Accessibility', () => {
 		test( 'chart container has expected ARIA attributes', () => {
 			renderWithProvider();
-			const chart = screen.getByRole( 'grid', { name: /area chart/i } );
+			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();
+		} );
 	} );
 
 	describe( 'Chart Ref Interface', () => {
@@ -822,7 +831,7 @@ describe( 'AreaChart', () => {
 		// surface the visx TooltipContext state in a jsdom environment.
 		const focusFirstDatum = async () => {
 			const user = userEvent.setup();
-			const chart = screen.getByRole( 'grid', { name: /area chart/i } );
+			const chart = screen.getByRole( 'application', { name: /area chart/i } );
 			chart.focus();
 			await user.keyboard( '{ArrowRight}' );
 		};
@@ -972,7 +981,7 @@ describe( 'AreaChart', () => {
 
 			// The visx grid has no role/testid, so query its internal class from within the plot.
 			/* eslint-disable testing-library/no-node-access */
-			const plot = screen.getByRole( 'grid' );
+			const plot = screen.getByRole( 'application' );
 			expect( plot.querySelector( '.visx-rows' ) ).toBeInTheDocument();
 
 			const buttons = screen.getAllByRole( 'button' );

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

@@ -28,7 +28,7 @@ describe( 'area chart tooltip bucket info', () => {
 			</GlobalChartsProvider>
 		);
 
-		screen.getByRole( 'grid', { name: /area chart/i } ).focus();
+		screen.getByRole( 'application', { name: /area chart/i } ).focus();
 		await user.keyboard( '{ArrowRight}' );
 
 		expect( screen.getByTestId( 'chart-tooltip-0' ) ).toHaveTextContent( '2.8.2026, 09 Uhr' );
@@ -61,7 +61,7 @@ describe( 'area chart tooltip bucket info', () => {
 			</GlobalChartsProvider>
 		);
 
-		screen.getByRole( 'grid', { name: /area chart/i } ).focus();
+		screen.getByRole( 'application', { name: /area chart/i } ).focus();
 		await user.keyboard( '{ArrowRight}' );
 
 		expect( screen.getByTestId( 'chart-tooltip-0' ) ).not.toHaveTextContent( 'Uhr' );

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

@@ -11,6 +11,8 @@ 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

@@ -100,6 +100,7 @@ const renderTooltipRow = ( label: string | undefined, value: string ) => (
 
 const BarChartInternal: FC< BarChartProps > = ( {
 	data,
+	ariaLabel,
 	chartId: providedChartId,
 	width,
 	height,
@@ -603,10 +604,11 @@ const BarChartInternal: FC< BarChartProps > = ( {
 					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
-							role="grid"
+							role="application"
 							ref={ chartRef }
-							aria-label={ __( 'Bar chart', 'jetpack-charts' ) }
+							aria-label={ ariaLabel ?? __( 'Bar chart', 'jetpack-charts' ) }
 							tabIndex={ 0 }
 							onKeyDown={ onChartKeyDown }
 							onFocus={ onChartFocus }
@@ -615,6 +617,7 @@ const BarChartInternal: FC< BarChartProps > = ( {
 							{ chartHeight > 0 && (
 								<div className={ plotStyles[ 'xy-plot' ] }>
 									<XYChart
+										accessibilityLabel=""
 										theme={ theme }
 										width={ width }
 										height={ chartHeight }