@automattic/charts 4.7.0 → 4.9.0

package/package.json

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

@@ -12,7 +12,7 @@ import {
 	useCallback,
 } from 'react';
 import { Legend, useChartLegendItems } from '../../components/legend';
-import { AccessibleTooltip, useKeyboardNavigation } from '../../components/tooltip';
+import { XYChartTooltip, useKeyboardNavigation } from '../../components/tooltip';
 import {
 	useXYChartTheme,
 	useChartDataTransform,
@@ -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 }
@@ -509,7 +512,7 @@ const AreaChartInternal = forwardRef< ChartInstanceRef, AreaChartProps >(
 
 											{ withTooltips && (
 												<>
-													<AccessibleTooltip
+													<XYChartTooltip
 														detectBounds
 														snapTooltipToDatumX
 														// Stacked mode: yAccessor returns raw value, not stacked y — snapping mispositions.

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', () => {
@@ -817,12 +826,12 @@ describe( 'AreaChart', () => {
 	} );
 
 	describe( 'Hover glyphs', () => {
-		// Trigger the AccessibleTooltip's keyboard nav so a tooltip is opened
+		// Trigger the XYChartTooltip's keyboard nav so a tooltip is opened
 		// against a known datum index, which is the only reliable way to
 		// 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-branches.test.tsx

@@ -19,7 +19,7 @@ type CapturedRenderTooltip = ( params: RenderTooltipParams< DataPointDate > ) =>
 let capturedRenderTooltip: CapturedRenderTooltip | undefined;
 jest.mock( '../../../components/tooltip', () => ( {
 	...jest.requireActual( '../../../components/tooltip' ),
-	AccessibleTooltip: ( props: { renderTooltip?: CapturedRenderTooltip } ) => {
+	XYChartTooltip: ( props: { renderTooltip?: CapturedRenderTooltip } ) => {
 		capturedRenderTooltip = props.renderTooltip;
 		return null;
 	},

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.module.scss

@@ -4,6 +4,13 @@
 		overflow: visible;
 	}
 
+	// The CSS property, not the attribute: an SVG geometry attribute does
+	// not substitute var().
+	:global(.visx-bar),
+	:global(.bar-chart__comparison-bar) {
+		rx: var(--a8c-charts-border-radius-bar-chart);
+	}
+
 	// Keep the collapsed state in `from` and never on the element: a dropped
 	// animation then fails visible. `both`, not `forwards`, for backwards fill.
 	&--animated rect {

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

@@ -4,7 +4,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import clsx from 'clsx';
 import { useCallback, useContext, useState, useRef, useMemo } from 'react';
 import { Legend, useChartLegendItems } from '../../components/legend';
-import { AccessibleTooltip, useKeyboardNavigation } from '../../components/tooltip';
+import { XYChartTooltip, useKeyboardNavigation } from '../../components/tooltip';
 import {
 	useXYChartTheme,
 	useChartDataTransform,
@@ -100,6 +100,7 @@ const renderTooltipRow = ( label: string | undefined, value: string ) => (
 
 const BarChartInternal: FC< BarChartProps > = ( {
 	data,
+	ariaLabel,
 	chartId: providedChartId,
 	width,
 	height,
@@ -242,7 +243,7 @@ const BarChartInternal: FC< BarChartProps > = ( {
 	);
 
 	// The keyboard-navigation index space and the highlight CSS both stride over primary
-	// bars only; the accessible tooltip must use the same list, or its datum diverges from
+	// bars only; `XYChartTooltip` must use the same list, or its datum diverges from
 	// the highlighted bar once a comparison series shifts the indices.
 	const primarySeries = useMemo(
 		() => primaryEntries.map( ( { series } ) => series ),
@@ -474,7 +475,7 @@ const BarChartInternal: FC< BarChartProps > = ( {
 			// so a patterned shadow gets the same outline as its primary bar.
 			return `
 			.visx-bar[fill="url(#${ patternId })"],
-			.bar-chart__comparison-bars rect[fill="url(#${ patternId })"] {
+			.bar-chart__comparison-bar[fill="url(#${ patternId })"] {
 				stroke: ${ color };
 				stroke-width: 1;
 				}
@@ -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 }
@@ -767,23 +770,29 @@ const BarChartInternal: FC< BarChartProps > = ( {
 											<WholeNumberTicks { ...wholeNumberTicksProps }>
 												{ valueTicks => (
 													<>
-														<Axis
-															{ ...chartOptions.axis.x }
-															{ ...( horizontal && valueTicks ? { tickValues: valueTicks } : {} ) }
-														/>
-														<Axis
-															{ ...chartOptions.axis.y }
-															{ ...( ! horizontal && valueTicks
-																? { tickValues: valueTicks }
-																: {} ) }
-														/>
+														{ chartOptions.axis.x.display !== false && (
+															<Axis
+																{ ...chartOptions.axis.x }
+																{ ...( horizontal && valueTicks
+																	? { tickValues: valueTicks }
+																	: {} ) }
+															/>
+														) }
+														{ chartOptions.axis.y.display !== false && (
+															<Axis
+																{ ...chartOptions.axis.y }
+																{ ...( ! horizontal && valueTicks
+																	? { tickValues: valueTicks }
+																	: {} ) }
+															/>
+														) }
 													</>
 												) }
 											</WholeNumberTicks>
 										) }
 
 										{ withTooltips && (
-											<AccessibleTooltip
+											<XYChartTooltip
 												tooltipPlacement={ tooltipPlacement }
 												tooltipAnchorTop={ tooltipAnchorTop }
 												style={ tooltipStyle }

package/src/charts/bar-chart/private/comparison-bars.tsx

@@ -127,6 +127,7 @@ export const ComparisonBars: FC< {
 			rects.push(
 				<rect
 					key={ `${ index }-${ i }` }
+					className="bar-chart__comparison-bar"
 					data-testid={ `bar-chart-comparison-${ index }-${ i }` }
 					x={ rect.x }
 					y={ rect.y }