@automattic/charts 4.9.0 → 4.11.0

package/dist/visx/group/index.js

@@ -1,2 +1 @@
-import { Group } from "@visx/group";
-export { Group };
+export { Group } from "@visx/group";

package/dist/visx/legend/index.js

@@ -1,2 +1 @@
-import { CircleShape, LineShape, RectShape } from "@visx/legend";
-export { CircleShape, LineShape, RectShape };
+export { CircleShape, LineShape, RectShape } from "@visx/legend";

package/dist/visx/text/index.js

@@ -1,2 +1 @@
-import { Text, getStringWidth, useText } from "@visx/text";
-export { Text, getStringWidth, useText };
+export { Text, getStringWidth, useText } from "@visx/text";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "4.9.0",
+	"version": "4.11.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.10",
+		"@automattic/number-formatters": "^1.2.11",
 		"@babel/runtime": "7.29.7",
 		"@date-fns/tz": "1.5.0",
 		"@react-spring/web": "10.1.1",
@@ -84,9 +84,9 @@
 		"@visx/vendor": "^4.0.0",
 		"@visx/xychart": "^4.0.0",
 		"@wordpress/i18n": "^6.0.0",
-		"@wordpress/icons": "^16.0.0",
-		"@wordpress/theme": "2.1.1-next.v.202609031004.0",
-		"@wordpress/ui": "0.22.0",
+		"@wordpress/icons": "^18.0.0",
+		"@wordpress/theme": "2.3.0",
+		"@wordpress/ui": "0.24.0",
 		"clsx": "2.1.1",
 		"date-fns": "^4.1.0",
 		"deepmerge": "4.3.1",
@@ -104,26 +104,27 @@
 		"@testing-library/jest-dom": "^6.0.0",
 		"@testing-library/react": "^16.0.0",
 		"@testing-library/user-event": "^14.4.3",
-		"@tsdown/css": "0.22.14",
+		"@tsdown/css": "0.23.1",
 		"@types/jest": "^30.0.0",
 		"@types/node": "^24.12.0",
 		"@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": "40.1.0",
-		"@wordpress/element": "8.7.0",
-		"@wordpress/private-apis": "1.55.0",
-		"babel-jest": "30.5.1",
+		"@wordpress/components": "42.0.0",
+		"@wordpress/element": "9.0.0",
+		"@wordpress/private-apis": "2.0.0",
+		"babel-jest": "30.5.2",
 		"identity-obj-proxy": "^3.0.0",
-		"jest": "30.5.1",
+		"jest": "30.5.2",
 		"jest-extended": "7.0.0",
+		"lightningcss": "^1.33.0",
 		"magic-string": "0.30.21",
 		"react": "18.3.1",
 		"react-dom": "18.3.1",
 		"sass-embedded": "1.97.3",
 		"storybook": "10.4.6",
-		"tsdown": "0.22.14",
+		"tsdown": "0.23.1",
 		"typescript": "6.0.3"
 	},
 	"peerDependencies": {

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

@@ -85,6 +85,11 @@
 	background-color: var(--a8c-charts-color-surface-secondary);
 	position: relative;
 	cursor: pointer;
+
+	&:focus-visible {
+		outline: var(--wpds-border-width-focus) solid var(--wpds-color-stroke-focus);
+		outline-offset: var(--wpds-border-width-focus);
+	}
 }
 
 .funnel-bar {

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

@@ -1,3 +1,5 @@
+@use "../../components/tooltip/surface" as tooltip;
+
 .container {
 	position: relative;
 	background-color: var(--a8c-charts-color-background, #fff);
@@ -8,5 +10,30 @@
 	// whole and grows the box instead.
 	:global(.google-visualization-tooltip) {
 		white-space: nowrap;
+		border: 0;
+
+		@include tooltip.surface;
+	}
+
+	:global(.google-visualization-tooltip-item-list) {
+		margin: 0;
+		padding: 0;
+	}
+
+	// The long chain outranks Google's `:first-child` item rule.
+	:global(.google-visualization-tooltip .google-visualization-tooltip-item-list .google-visualization-tooltip-item) {
+		margin: 0;
+		padding: 0;
+
+		&:first-child {
+			padding-block-end: var(--wpds-dimension-padding-md);
+		}
+	}
+
+	// Google writes these inline on every span.
+	:global(.google-visualization-tooltip-item) span {
+		color: inherit !important;
+		font-family: inherit !important;
+		font-size: inherit !important;
 	}
 }

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

@@ -3,11 +3,12 @@
  */
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
-import { FC, useContext, useEffect, useMemo, useRef } from 'react';
+import { FC, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { Chart, type GoogleChartPackages, type ReactGoogleChartEvent } from 'react-google-charts';
 /**
  * Internal dependencies
  */
+import { TooltipTheme } from '../../components/tooltip/private/tooltip-theme';
 import {
 	GlobalChartsContext,
 	GlobalChartsProvider,
@@ -21,6 +22,7 @@ import { sanitizeHtml } from '../../utils/sanitize-html';
 import { Center } from '../private/center';
 import { withResponsive } from '../private/with-responsive';
 import styles from './geo-chart.module.scss';
+import { useTooltipPosition } from './private/use-tooltip-position';
 import type { GeoChartError, GeoChartProps } from './types';
 
 const DEFAULT_FEATURE_FILL_COLOR = '#ffffff';
@@ -90,6 +92,40 @@ function involvesGeoChartErrorElement( node: Node ): boolean {
 	);
 }
 
+const isTooltipColumn = ( column: unknown ): boolean =>
+	typeof column === 'object' && column !== null && 'role' in column && column.role === 'tooltip';
+
+// Google renders a column or cell as markup when its `p.html` is truthy, even the string 'false'.
+const hasHtmlFlag = ( columnOrCell: unknown ): boolean =>
+	typeof columnOrCell === 'object' &&
+	columnOrCell !== null &&
+	'p' in columnOrCell &&
+	typeof columnOrCell.p === 'object' &&
+	columnOrCell.p !== null &&
+	'html' in columnOrCell.p &&
+	!! columnOrCell.p.html;
+
+const sanitizeIfString = ( value: unknown ) =>
+	typeof value === 'string' ? sanitizeHtml( value ) : value;
+
+/**
+ * Sanitizes a tooltip cell Google will render as markup, whether a string or a `{ v, f, p }` object.
+ *
+ * @param cell - The tooltip cell.
+ * @return The cell with its markup sanitized.
+ */
+function sanitizeTooltipCell( cell: unknown ): unknown {
+	if ( typeof cell !== 'object' || cell === null ) {
+		return sanitizeIfString( cell );
+	}
+
+	return {
+		...cell,
+		...( 'v' in cell && { v: sanitizeIfString( cell.v ) } ),
+		...( 'f' in cell && { f: sanitizeIfString( cell.f ) } ),
+	};
+}
+
 /**
  * Normalizes the raw Google Charts error event into the GeoChart error shape.
  *
@@ -126,6 +162,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 +177,7 @@ function normalizeGeoChartError( eventArgs: unknown ): GeoChartError {
 const GeoChartInternal: FC< GeoChartProps > = ( {
 	className,
 	data,
+	ariaLabel,
 	width,
 	height,
 	region = 'world',
@@ -153,6 +191,7 @@ const GeoChartInternal: FC< GeoChartProps > = ( {
 	const scopeElement = useChartScopeElement();
 	const containerRef = useRef< HTMLDivElement >( null );
 	const reportedErrorIdsRef = useRef< Set< string > >( new Set() );
+	const [ isLoaded, setIsLoaded ] = useState( false );
 
 	// The ChartWrapper `error` event does not fire for every draw failure —
 	// notably not when GeoChart's asynchronous map-file load fails (e.g.
@@ -195,7 +234,10 @@ const GeoChartInternal: FC< GeoChartProps > = ( {
 		return () => observer.disconnect();
 	}, [ onError ] );
 
-	// Render loading placeholder
+	useTooltipPosition( containerRef );
+
+	const handleLoad = useCallback( () => setIsLoaded( true ), [] );
+
 	const loadingPlaceholder = (
 		<Center
 			className={ clsx( 'geo-chart', styles.container, className ) }
@@ -217,49 +259,30 @@ const GeoChartInternal: FC< GeoChartProps > = ( {
 		normalizeColorToHex( CATALOG_POINTERS.surfaceSecondary, scopeElement, resolveCssVariable ) ||
 		DEFAULT_FEATURE_FILL_COLOR;
 
-	// Identify HTML tooltip column indices and sanitize their content to prevent XSS.
 	const sanitizedData = useMemo( () => {
 		if ( data.length === 0 ) {
-			return { data, hasHtmlTooltips: false };
+			return data;
 		}
 
-		const htmlTooltipIndices: number[] = [];
-		for ( let i = 0; i < data[ 0 ].length; i++ ) {
-			const col = data[ 0 ][ i ];
-			if (
-				typeof col === 'object' &&
-				col !== null &&
-				'role' in col &&
-				col.role === 'tooltip' &&
-				'p' in col &&
-				typeof col.p === 'object' &&
-				col.p !== null &&
-				'html' in col.p &&
-				col.p.html === true
-			) {
-				htmlTooltipIndices.push( i );
-			}
-		}
+		const tooltipColumns = data[ 0 ].flatMap( ( column, index ) =>
+			isTooltipColumn( column ) ? [ { index, isHtml: hasHtmlFlag( column ) } ] : []
+		);
 
-		if ( htmlTooltipIndices.length === 0 ) {
-			return { data, hasHtmlTooltips: false };
+		if ( tooltipColumns.length === 0 ) {
+			return data;
 		}
 
-		// Sanitize HTML content in tooltip columns for data rows (skip header row)
 		const sanitizedRows = data.slice( 1 ).map( row => {
 			const newRow = [ ...row ];
-			for ( const colIndex of htmlTooltipIndices ) {
-				if ( typeof newRow[ colIndex ] === 'string' ) {
-					newRow[ colIndex ] = sanitizeHtml( newRow[ colIndex ] as string );
+			for ( const { index, isHtml } of tooltipColumns ) {
+				if ( isHtml || hasHtmlFlag( newRow[ index ] ) ) {
+					newRow[ index ] = sanitizeTooltipCell( newRow[ index ] ) as ( typeof newRow )[ number ];
 				}
 			}
 			return newRow;
 		} );
 
-		return {
-			data: [ data[ 0 ], ...sanitizedRows ] as typeof data,
-			hasHtmlTooltips: true,
-		};
+		return [ data[ 0 ], ...sanitizedRows ] as typeof data;
 	}, [ data ] );
 
 	const options: GoogleChartOptions = useMemo(
@@ -272,7 +295,7 @@ const GeoChartInternal: FC< GeoChartProps > = ( {
 			backgroundColor: backgroundColorHex,
 			datalessRegionColor: defaultFillColorHex,
 			defaultColor: defaultFillColorHex,
-			tooltip: { trigger: 'focus', isHtml: sanitizedData.hasHtmlTooltips },
+			tooltip: { trigger: 'focus', isHtml: true },
 			legend: 'none',
 			keepAspectRatio: true,
 		} ),
@@ -285,16 +308,26 @@ const GeoChartInternal: FC< GeoChartProps > = ( {
 			fullColorHex,
 			backgroundColorHex,
 			defaultFillColorHex,
-			sanitizedData.hasHtmlTooltips,
 		]
 	);
 
-	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,20 +340,27 @@ 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 } }
 		>
-			<Chart
-				chartType="GeoChart"
-				chartPackages={ GEO_CHART_PACKAGES }
-				width={ width }
-				height={ height }
-				data={ sanitizedData.data }
-				options={ options }
-				chartEvents={ chartEvents }
-				loader={ loadingPlaceholder }
-			/>
+			{ /* Outside TooltipTheme, so a custom placeholder keeps the host theme; `loader` would put it inside. */ }
+			{ ! isLoaded && loadingPlaceholder }
+			{ /* Every `--wpds-*` read inside resolves for the dark tooltip; map colors must keep coming from scopeElement. */ }
+			<TooltipTheme>
+				<Chart
+					chartType="GeoChart"
+					chartPackages={ GEO_CHART_PACKAGES }
+					width={ width }
+					height={ height }
+					data={ sanitizedData }
+					options={ options }
+					chartEvents={ chartEvents }
+					onLoad={ handleLoad }
+				/>
+			</TooltipTheme>
 		</Center>
 	);
 };