@automattic/charts 4.9.0 → 4.10.0

package/CHANGELOG.md

@@ -5,6 +5,19 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [4.10.0] - 2026-10-14
+### Added
+- Give the geo, leaderboard, conversion funnel and bar list charts an accessible name, and accept `ariaLabel` on every chart except Sparkline. [#53516]
+- Legend: Add a comparisonSeriesItems option that adds one static item per comparison series, named after its metric and hidden along with it. [#53457]
+
+### Changed
+- Reject invalid values like `12.px` when resolving theme font sizes. [#53475]
+
+### Fixed
+- Conversion funnel chart: Tighten the spacing on a short chart so its bars stay visible. [#53554]
+- Ignore invalid theme label font sizes, such as negative values, so axis labels no longer clip. Accept a leading `+` sign, as CSS does. [#53498]
+- Pie Chart, Pie Semi-Circle Chart: Paint the tooltip above content passed as children, such as a center total. [#53449]
+
 ## [4.9.0] - 2026-10-12
 ### Added
 - Heatmap chart: Add a fitCells option that grows compact cells to fill the chart, wrapping column groups onto more rows when that makes the cells larger, and draw column group labels at 13px in the body text color. [#53341]
@@ -1174,6 +1187,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fixed lints following ESLint rule changes for TS [#40584]
 - Fixing a bug in Chart storybook data. [#40640]
 
+[4.10.0]: https://github.com/Automattic/charts/compare/v4.9.0...v4.10.0
 [4.9.0]: https://github.com/Automattic/charts/compare/v4.8.0...v4.9.0
 [4.8.0]: https://github.com/Automattic/charts/compare/v4.7.0...v4.8.0
 [4.7.0]: https://github.com/Automattic/charts/compare/v4.6.0...v4.7.0

package/dist/index.cjs

@@ -671,16 +671,17 @@ function readCustomProperty(varName, styles) {
 }
 //#endregion
 //#region src/utils/resolve-font-size.ts
+const toFontSize = (size) => Number.isFinite(size) && size >= 0 ? size : void 0;
 /**
 * Resolve a theme `fontSize` value into a plain number suitable for
 * canvas-based measurement (e.g. `getStringWidth`).
 *
 * Accepts:
-* - A number — returned as-is
+* - A finite, non-negative number — returned as-is
 * - A pixel string like `"12px"` — parsed and returned as a number
 *
-* Returns `undefined` for any other input (missing value, NaN, or
-* relative units like `rem`/`em`/`%`/`vh`) so callers can fall back to
+* Returns `undefined` for any other input (missing value, a non-finite or
+* negative size, or relative units like `rem`/`em`/`%`/`vh`) so callers can fall back to
 * their own default. Relative units are intentionally rejected because
 * we cannot resolve them to absolute pixels here without a parent
 * computed style, and silently returning the unitless prefix
@@ -690,12 +691,10 @@ function readCustomProperty(varName, styles) {
 * @return Parsed numeric font size in pixels, or `undefined` when unresolvable
 */
 const resolveFontSize = (val) => {
-	if (typeof val === "number") return isNaN(val) ? void 0 : val;
+	if (typeof val === "number") return toFontSize(val);
 	if (typeof val === "string") {
-		const match = val.trim().match(/^(-?\d+\.?\d*|-?\.\d+)(px)?$/);
-		if (!match) return;
-		const parsed = parseFloat(match[1]);
-		return isNaN(parsed) ? void 0 : parsed;
+		const match = val.trim().match(/^\+?((?:\d*\.)?\d+)(px)?$/);
+		return match ? toFontSize(parseFloat(match[1])) : void 0;
 	}
 };
 //#endregion
@@ -1574,6 +1573,20 @@ const useChartScopeElement = () => (0, react.useContext)(ChartScopeContext);
 const useStandaloneScopeClass = () => (0, react.useContext)(GlobalChartsContext) ? void 0 : CHART_SCOPE_CLASS;
 //#endregion
 //#region src/hooks/use-xychart-theme.ts
+const STARTS_LIKE_A_NUMBER = /^[+-]?[\d.]/;
+const NON_NEGATIVE_CSS_NUMBER = /^\+?(?:\d*\.)?\d+(?:e[+-]?\d+)?(?:[a-z]+|%)?$/i;
+const isRenderableFontSize = (fontSize) => {
+	if (typeof fontSize === "number") return resolveFontSize(fontSize) !== void 0;
+	const value = fontSize.trim();
+	if (!STARTS_LIKE_A_NUMBER.test(value)) return true;
+	return NON_NEGATIVE_CSS_NUMBER.test(value) && Number.isFinite(parseFloat(value));
+};
+const withRenderableFontSize = (style) => {
+	if (style?.fontSize === void 0 || isRenderableFontSize(style.fontSize)) return style;
+	const rest = { ...style };
+	delete rest.fontSize;
+	return rest;
+};
 const useXYChartTheme = (data) => {
 	const theme = useGlobalChartsTheme();
 	const scopeElement = useChartScopeElement();
@@ -1604,9 +1617,10 @@ const useXYChartTheme = (data) => {
 			yAxisLineStyles: { stroke: CATALOG_POINTERS.axisY },
 			yTickLineStyles: { stroke: CATALOG_POINTERS.tickY },
 			svgLabelSmall: {
-				...theme.svgLabelSmall,
+				...withRenderableFontSize(theme.svgLabelSmall),
 				fill: CATALOG_POINTERS.labelAxis
-			}
+			},
+			svgLabelBig: withRenderableFontSize(theme.svgLabelBig)
 		});
 	}, [
 		theme,
@@ -2119,7 +2133,7 @@ const getLegendItemAriaLabel = (text, value, visible, interactive) => {
 	if (visible) return;
 	return (0, _wordpress_i18n.sprintf)((0, _wordpress_i18n._x)("%s: hidden", "hidden non-interactive legend item", "jetpack-charts"), accessibleText);
 };
-const BaseLegend = (0, react.forwardRef)(({ items, className, orientation = "horizontal", alignment = "center", shape = "rect", fill = valueOrIdentityString, size = valueOrIdentityString, labelFormat = valueOrIdentity, labelTransform, itemStyles, itemClassName, labelStyles, labelClassName, shapeStyles, render, interactive = false, chartId }, ref) => {
+const BaseLegend = (0, react.forwardRef)(({ items: allItems, className, orientation = "horizontal", alignment = "center", shape = "rect", fill = valueOrIdentityString, size = valueOrIdentityString, labelFormat = valueOrIdentity, labelTransform, itemStyles, itemClassName, labelStyles, labelClassName, shapeStyles, render, interactive = false, chartId }, ref) => {
 	const { margin: itemMargin = "0", flexDirection: itemDirection = "row" } = itemStyles ?? {};
 	const { justifyContent: labelJustifyContent = "flex-start", flex: labelFlex = "0 0 auto", margin: labelMargin = "0 4px", maxWidth, textOverflow = "wrap" } = labelStyles ?? {};
 	const { width: shapeWidth = 16, height: shapeHeight = 16, margin: shapeMargin = "2px 4px 2px 0" } = shapeStyles ?? {};
@@ -2127,6 +2141,16 @@ const BaseLegend = (0, react.forwardRef)(({ items, className, orientation = "hor
 	const context = (0, react.useContext)(GlobalChartsContext);
 	const chartInstanceContext = (0, react.useContext)(ChartInstanceContext);
 	const standaloneScopeClass = useStandaloneScopeClass();
+	const isSeriesVisible = (0, react.useCallback)((seriesLabel) => {
+		if (chartInstanceContext?.isSeriesVisible) return chartInstanceContext.isSeriesVisible(seriesLabel);
+		if (!chartId || !context) return true;
+		return context.isSeriesVisible(chartId, seriesLabel);
+	}, [
+		chartId,
+		chartInstanceContext,
+		context
+	]);
+	const items = (0, react.useMemo)(() => allItems.filter((item) => item.interactive !== false || !item.describesSeries || isSeriesVisible(item.describesSeries)), [allItems, isSeriesVisible]);
 	const domain = items.map((item) => item.label);
 	const legendScale = (0, _visx_scale.scaleOrdinal)({
 		domain,
@@ -2149,15 +2173,6 @@ const BaseLegend = (0, react.forwardRef)(({ items, className, orientation = "hor
 		chartId,
 		context
 	]);
-	const isSeriesVisible = (0, react.useCallback)((seriesLabel) => {
-		if (chartInstanceContext?.isSeriesVisible) return chartInstanceContext.isSeriesVisible(seriesLabel);
-		if (!chartId || !context) return true;
-		return context.isSeriesVisible(chartId, seriesLabel);
-	}, [
-		chartId,
-		chartInstanceContext,
-		context
-	]);
 	const createClickHandler = (0, react.useCallback)((seriesLabels, itemInteractive) => {
 		if (!itemInteractive) return;
 		return () => handleLegendClick(seriesLabels);
@@ -2432,6 +2447,34 @@ function buildComparisonLegendItem(seriesData, items, label, getElementStyles, l
 	};
 }
 /**
+* Builds one static item per comparison series folded into another series' item, named after
+* that item and styled like the comparison series itself.
+* @param seriesData       - The series data to search for comparison series
+* @param items            - The legend items already built from the series
+* @param formatLabel      - Names an item after the label of the item it was folded into
+* @param getElementStyles - Function to get element styles
+* @param legendShape      - The shape type for legend items (string literal or React component)
+* @return The legend items, in series order
+*/
+function buildPerSeriesComparisonItems(seriesData, items, formatLabel, getElementStyles, legendShape) {
+	return seriesData.flatMap((series, index) => {
+		const owner = items.find((item) => item.seriesLabels?.includes(series.label));
+		if (series.options?.type !== "comparison" || !owner || owner.seriesLabels?.[0] === series.label) return [];
+		const { color, shapeStyles } = getElementStyles({
+			data: series,
+			index,
+			legendShape
+		});
+		return [{
+			label: formatLabel(owner.label),
+			color,
+			shapeStyle: shapeStyles,
+			interactive: false,
+			describesSeries: series.label
+		}];
+	});
+}
+/**
 * Processes point data into legend items
 * @param pointData          - The point data to process
 * @param getElementStyles   - Function to get element styles
@@ -2467,13 +2510,14 @@ function processPointData(pointData, getElementStyles, showValues, legendValueDi
 * @return Array of legend items ready for display
 */
 function useChartLegendItems(data, options = {}, legendShape) {
-	const { showValues = false, legendValueDisplay = "percentage", withGlyph = false, glyphSize = 8, collapseGroups = false, comparisonItem = false, renderGlyph } = options;
+	const { showValues = false, legendValueDisplay = "percentage", withGlyph = false, glyphSize = 8, collapseGroups = false, comparisonItem = false, comparisonSeriesItems, renderGlyph } = options;
 	const { getElementStyles } = useGlobalChartsContext();
 	return (0, react.useMemo)(() => {
 		if (!data || !Array.isArray(data) || data.length === 0) return [];
 		if ("data" in data[0]) {
 			const seriesData = data;
 			const items = processSeriesData(seriesData, getElementStyles, showValues, withGlyph, glyphSize, collapseGroups, renderGlyph, legendShape);
+			if (comparisonSeriesItems) return [...items, ...buildPerSeriesComparisonItems(seriesData, items, comparisonSeriesItems, getElementStyles, legendShape)];
 			const comparison = comparisonItem ? buildComparisonLegendItem(seriesData, items, typeof comparisonItem === "string" ? comparisonItem : (0, _wordpress_i18n.__)("Comparison period", "jetpack-charts"), getElementStyles, legendShape) : null;
 			return comparison ? [...items, comparison] : items;
 		}
@@ -2487,6 +2531,7 @@ function useChartLegendItems(data, options = {}, legendShape) {
 		glyphSize,
 		collapseGroups,
 		comparisonItem,
+		comparisonSeriesItems,
 		renderGlyph,
 		legendShape
 	]);
@@ -4728,6 +4773,7 @@ const LineChartInternal = (0, react.forwardRef)(({ data, ariaLabel, chartId: pro
 	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";
 	const formatting = useChartFormatting();
@@ -4912,12 +4958,14 @@ const LineChartInternal = (0, react.forwardRef)(({ data, ariaLabel, chartId: pro
 		glyphSize: Math.max(0, toNumber(glyphStyle?.radius) ?? 4),
 		collapseGroups: legendCollapseGroups,
 		comparisonItem: legendComparisonItem,
+		comparisonSeriesItems: legendComparisonSeriesItems,
 		renderGlyph
 	}), [
 		withLegendGlyph,
 		glyphStyle?.radius,
 		legendCollapseGroups,
 		legendComparisonItem,
+		legendComparisonSeriesItems,
 		renderGlyph
 	]), legendShape);
 	const chartMetadata = (0, react.useMemo)(() => ({
@@ -5386,8 +5434,13 @@ const AreaChartInternal = (0, react.forwardRef)(({ data, ariaLabel, chartId: pro
 		withGlyph: false,
 		glyphSize: 0,
 		collapseGroups: legend.collapseGroups ?? false,
-		comparisonItem: legend.comparisonItem ?? false
-	}), [legend.collapseGroups, legend.comparisonItem]), legendShape);
+		comparisonItem: legend.comparisonItem ?? false,
+		comparisonSeriesItems: legend.comparisonSeriesItems
+	}), [
+		legend.collapseGroups,
+		legend.comparisonItem,
+		legend.comparisonSeriesItems
+	]), legendShape);
 	const chartMetadata = (0, react.useMemo)(() => ({
 		stacked,
 		stackOffset,
@@ -6380,6 +6433,7 @@ const BarChartInternal = ({ data, ariaLabel, chartId: providedChartId, width, he
 	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);
@@ -6392,8 +6446,13 @@ const BarChartInternal = ({ data, ariaLabel, chartId: providedChartId, width, he
 	});
 	const legendItems = useChartLegendItems(dataSorted, (0, react.useMemo)(() => ({
 		collapseGroups: legendCollapseGroups,
-		comparisonItem: legendComparisonItem
-	}), [legendCollapseGroups, legendComparisonItem]));
+		comparisonItem: legendComparisonItem,
+		comparisonSeriesItems: legendComparisonSeriesItems
+	}), [
+		legendCollapseGroups,
+		legendComparisonItem,
+		legendComparisonSeriesItems
+	]));
 	const { getElementStyles } = useGlobalChartsContext();
 	const isSeriesRendered = (0, react.useCallback)((series) => isSeriesVisible(series.label), [isSeriesVisible]);
 	const hasWholeNumberValues = (0, react.useMemo)(() => hasOnlyWholeNumbers(dataSorted.filter(isSeriesRendered)), [dataSorted, isSeriesRendered]);
@@ -6904,7 +6963,7 @@ const BarListChartInternal = ({ data, width, height, options = {}, margin = {
 	right: 20,
 	bottom: 0,
 	top: 0
-}, className, ...rest }) => {
+}, className, ariaLabel, ...rest }) => {
 	const { getElementStyles } = useGlobalChartsContext();
 	const tintedData = (0, react.useMemo)(() => {
 		if (data.length > 1) return data;
@@ -6979,6 +7038,7 @@ const BarListChartInternal = ({ data, width, height, options = {}, margin = {
 			xScale: chartOptions.xScale,
 			yScale: chartOptions.yScale
 		},
+		ariaLabel: ariaLabel ?? (0, _wordpress_i18n.__)("Bar list chart", "jetpack-charts"),
 		...rest
 	});
 };
@@ -7054,6 +7114,8 @@ const useFunnelSelection = (hideTooltip) => {
 };
 //#endregion
 //#region src/charts/conversion-funnel-chart/conversion-funnel-chart.tsx
+/** 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
 *
@@ -7065,6 +7127,7 @@ const useFunnelSelection = (hideTooltip) => {
 * @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
@@ -7074,7 +7137,7 @@ const useFunnelSelection = (hideTooltip) => {
 * @param props.tooltipStyle     - Inline styles merged over the tooltip box defaults
 * @return JSX element representing the conversion funnel chart
 */
-const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loading = false, animation, className, chartId: providedChartId, height, style, renderStepLabel, renderStepRate, renderMainMetric, renderTooltip, tooltipStyle }) => {
+const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loading = false, animation, className, ariaLabel, chartId: providedChartId, height, style, renderStepLabel, renderStepRate, renderMainMetric, renderTooltip, tooltipStyle }) => {
 	const chartId = useChartId(providedChartId);
 	const { getElementStyles, isColorPaletteResolved } = useGlobalChartsContext();
 	const chartRef = (0, react.useRef)(null);
@@ -7083,10 +7146,13 @@ const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loadi
 	const { tooltipData, tooltipLeft, tooltipTop, tooltipOpen, showTooltip, hideTooltip } = (0, _visx_tooltip.useTooltip)();
 	const { handleBarClick, handleBarKeyDown, clearSelection, getStepState } = useFunnelSelection(hideTooltip);
 	const standaloneScopeClass = useStandaloneScopeClass();
+	const [measureChartRef, , chartHeight] = useElementSize();
+	const gap = chartHeight > 0 && chartHeight < SHORT_CHART_HEIGHT ? "sm" : "xl";
 	const setChartRef = (0, react.useCallback)((node) => {
 		chartRef.current = node;
 		setScopeNode(node);
-	}, []);
+		measureChartRef(node);
+	}, [measureChartRef]);
 	const clearSelectionAndRef = (0, react.useCallback)(() => {
 		clearSelection();
 		selectedBarRef.current = null;
@@ -7234,7 +7300,9 @@ const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loadi
 	const maxRate = Math.max(...steps.map((step) => step.rate));
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_wordpress_ui.Stack, {
 		direction: "column",
-		gap: "xl",
+		gap,
+		role: "group",
+		"aria-label": ariaLabel ?? (0, _wordpress_i18n.__)("Conversion funnel chart", "jetpack-charts"),
 		ref: setChartRef,
 		className: (0, clsx.default)("conversion-funnel-chart", conversion_funnel_chart_module_default["conversion-funnel-chart"], loading && conversion_funnel_chart_module_default["conversion-funnel-chart--loading"], className),
 		style: {
@@ -7265,7 +7333,7 @@ const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loadi
 					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_wordpress_ui.Stack, {
 						direction: "column",
 						className: (0, clsx.default)(conversion_funnel_chart_module_default["funnel-step"], isColorPaletteResolved && conversion_funnel_chart_module_default["funnel-step--animated"], isBlurred && conversion_funnel_chart_module_default["funnel-step--blurred"]),
-						gap: "xl",
+						gap,
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_wordpress_ui.Stack, {
 							direction: "column",
 							gap: "xs",
@@ -7459,6 +7527,7 @@ function normalizeGeoChartError(eventArgs) {
 *
 * @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)
@@ -7470,7 +7539,7 @@ function normalizeGeoChartError(eventArgs) {
 * @param props.renderPlaceholder - Optional render function for the loading placeholder
 * @return A React component displaying an interactive map with data visualization
 */
-const GeoChartInternal = ({ className, data, width, height, region = "world", resolution = "countries", displayMode = "regions", domain, onError, renderPlaceholder }) => {
+const GeoChartInternal = ({ className, data, ariaLabel, width, height, region = "world", resolution = "countries", displayMode = "regions", domain, onError, renderPlaceholder }) => {
 	const { getElementStyles } = useGlobalChartsContext();
 	const scopeElement = useChartScopeElement();
 	const containerRef = (0, react.useRef)(null);
@@ -7558,8 +7627,14 @@ const GeoChartInternal = ({ className, data, width, height, region = "world", re
 		sanitizedData.hasHtmlTooltips
 	]);
 	const chartEvents = (0, react.useMemo)(() => {
-		if (!onError) return;
-		return [{
+		const readyEvent = {
+			eventName: "ready",
+			callback: () => {
+				containerRef.current?.querySelectorAll("svg").forEach((svg) => svg.setAttribute("aria-hidden", "true"));
+			}
+		};
+		if (!onError) return [readyEvent];
+		return [readyEvent, {
 			eventName: "error",
 			callback: ({ eventArgs }) => {
 				onError(normalizeGeoChartError(eventArgs));
@@ -7568,6 +7643,8 @@ const GeoChartInternal = ({ className, data, width, height, region = "world", re
 	}, [onError]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Center, {
 		ref: containerRef,
+		role: "group",
+		"aria-label": ariaLabel ?? (0, _wordpress_i18n.__)("Geo chart", "jetpack-charts"),
 		className: (0, clsx.default)("geo-chart", geo_chart_module_default.container, className),
 		style: {
 			width,
@@ -8122,7 +8199,7 @@ const CELL_VALUE_MODIFIER = {
 	white: heatmap_chart_module_default["heatmap-chart__cell-value--white"]
 };
 const NO_ROW_LABELS = [];
-const TOOLTIP_BOX_STYLE = { zIndex: 3 };
+const TOOLTIP_BOX_STYLE$1 = { zIndex: 3 };
 const largest = (root, selector, size) => Math.max(0, ...Array.from(root.querySelectorAll(selector), (el) => el[size]));
 const gridBox = (chart, grid) => {
 	let height = chart.clientHeight;
@@ -8145,9 +8222,9 @@ const cellName = (info) => info.cellLabel || [
 const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, height = 0, className, compact = false, fitCells = false, showValues, maxCellWidth, maxCellHeight, minCellWidth, minCellHeight, rowLabels = NO_ROW_LABELS, columnGroups, keyboardNavigation = "grid", ariaLabel, primaryColor, gap = "md", withTooltips = false, renderTooltip, tooltipStyle, children }) => {
 	const chartId = useChartId(providedChartId);
 	const tooltipBoxStyle = tooltipStyle ? {
-		...TOOLTIP_BOX_STYLE,
+		...TOOLTIP_BOX_STYLE$1,
 		...tooltipStyle
-	} : TOOLTIP_BOX_STYLE;
+	} : TOOLTIP_BOX_STYLE$1;
 	const { getElementStyles, theme } = useGlobalChartsContext();
 	const scopeElement = useChartScopeElement();
 	const { heatmapChart: heatmapChartSettings } = theme;
@@ -11637,8 +11714,8 @@ const SUBPIXEL_TOLERANCE = .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.
@@ -11780,6 +11857,7 @@ var leaderboard_chart_module_default = {
 	"overlayLabel": "a8ccharts-GovfoW-overlayLabel",
 	"row": "a8ccharts-GovfoW-row",
 	"rowButton": "a8ccharts-GovfoW-rowButton",
+	"rowItem": "a8ccharts-GovfoW-rowItem",
 	"stretch": "a8ccharts-GovfoW-stretch",
 	"valueContainer": "a8ccharts-GovfoW-valueContainer"
 };
@@ -11892,9 +11970,10 @@ const BarWithLabel = ({ entry, withComparison, withOverlayLabel, primaryColor, s
 * @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 = ({ data, chartId: providedChartId, width: propWidth, height: propHeight, withComparison = false, withOverlayLabel = false, primaryColor, secondaryColor, valueFormatter = defaultValueFormatter, deltaFormatter = defaultDeltaFormatter, animation, loading = false, fitRows = false, showLegend = false, legend = {}, legendLabels, gap = "md", className, style, children }) => {
+const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propWidth, height: propHeight, withComparison = false, withOverlayLabel = false, primaryColor, secondaryColor, valueFormatter = defaultValueFormatter, deltaFormatter = defaultDeltaFormatter, animation, loading = false, fitRows = false, showLegend = false, legend = {}, legendLabels, gap = "md", ariaLabel, className, style, children }) => {
 	const legendInteractive = legend.interactive ?? false;
 	const legendPosition = legend.position ?? "bottom";
 	const chartId = useChartId(providedChartId);
@@ -12025,6 +12104,8 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 					className: leaderboard_chart_module_default.emptyState,
 					children: getAllHiddenMessage(legendInteractive, "series")
 				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(component_default, {
+					role: "list",
+					"aria-label": ariaLabel ?? (0, _wordpress_i18n.__)("Leaderboard chart", "jetpack-charts"),
 					templateColumns: "minmax(0, 1fr) auto",
 					rowGap: ROW_GAP,
 					columnGap: COLUMN_GAP,
@@ -12072,40 +12153,49 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 								})
 							]
 						})] });
-						if (entry.onClick && entry.hasInteractiveLabel) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						if (entry.onClick && entry.hasInteractiveLabel) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							role: "listitem",
 							"data-row-index": rowIndex,
 							style: rowStyle,
-							className: (0, clsx.default)(leaderboard_chart_module_default.row, leaderboard_chart_module_default.interactiveRow, leaderboard_chart_module_default.layeredRow),
-							onClick: forwardCellClickToRowButton,
-							children: [
-								rowCells,
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-									type: "button",
-									className: leaderboard_chart_module_default.rowButton,
-									onClick: entry.onClick,
-									"aria-label": entry.ariaLabel
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_wordpress_icons.Icon, {
-									className: leaderboard_chart_module_default.chevron,
-									icon: _wordpress_icons.chevronRight,
-									size: 24
-								})
-							]
+							className: leaderboard_chart_module_default.rowItem,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: (0, clsx.default)(leaderboard_chart_module_default.row, leaderboard_chart_module_default.interactiveRow, leaderboard_chart_module_default.layeredRow),
+								onClick: forwardCellClickToRowButton,
+								children: [
+									rowCells,
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										className: leaderboard_chart_module_default.rowButton,
+										onClick: entry.onClick,
+										"aria-label": entry.ariaLabel
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_wordpress_icons.Icon, {
+										className: leaderboard_chart_module_default.chevron,
+										icon: _wordpress_icons.chevronRight,
+										size: 24
+									})
+								]
+							})
 						}, entry.id);
-						if (entry.onClick) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-							type: "button",
+						if (entry.onClick) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							role: "listitem",
 							"data-row-index": rowIndex,
 							style: rowStyle,
-							className: (0, clsx.default)(leaderboard_chart_module_default.row, leaderboard_chart_module_default.interactiveRow),
-							onClick: entry.onClick,
-							"aria-label": entry.ariaLabel,
-							children: [rowCells, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_wordpress_icons.Icon, {
-								className: leaderboard_chart_module_default.chevron,
-								icon: _wordpress_icons.chevronRight,
-								size: 24
-							})]
+							className: leaderboard_chart_module_default.rowItem,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+								type: "button",
+								className: (0, clsx.default)(leaderboard_chart_module_default.row, leaderboard_chart_module_default.interactiveRow),
+								onClick: entry.onClick,
+								"aria-label": entry.ariaLabel,
+								children: [rowCells, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_wordpress_icons.Icon, {
+									className: leaderboard_chart_module_default.chevron,
+									icon: _wordpress_icons.chevronRight,
+									size: 24
+								})]
+							})
 						}, entry.id);
 						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							role: "listitem",
 							"data-row-index": rowIndex,
 							style: rowStyle,
 							className: leaderboard_chart_module_default.row,
@@ -12142,11 +12232,13 @@ const PieSelectionAnnouncement = ({ data }) => /* @__PURE__ */ (0, react_jsx_run
 });
 //#endregion
 //#region src/charts/private/pie-keyboard-navigation/pie-tooltip.tsx
+const TOOLTIP_BOX_STYLE = { zIndex: 3 };
 const PieTooltip = ({ top, left, selectedIndex, tooltipRef, children }) => {
 	const standaloneScopeClass = useStandaloneScopeClass();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BoundedTooltip, {
 		top,
 		left,
+		style: TOOLTIP_BOX_STYLE,
 		children: selectedIndex === void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: standaloneScopeClass,
 			role: "tooltip",
@@ -12369,6 +12461,7 @@ function RadialWipeAnimation({ id, radius, innerRadius = 0, durationMs = 1e3, wi
 //#endregion
 //#region src/charts/pie-chart/pie-chart.module.scss
 var pie_chart_module_default = {
+	"pie-chart": "a8ccharts-gnszbG-pie-chart",
 	"pie-chart__label-plate": "a8ccharts-gnszbG-pie-chart__label-plate",
 	"pie-chart__label-text": "a8ccharts-gnszbG-pie-chart__label-text",
 	"pie-chart__label-text--black": "a8ccharts-gnszbG-pie-chart__label-text--black",