@automattic/charts 4.8.0 → 4.10.0

package/src/charts/heatmap-chart/private/heatmap-legend.tsx

@@ -1,13 +1,15 @@
 import { __ } from '@wordpress/i18n';
 import { Stack, Text } from '@wordpress/ui';
+import clsx from 'clsx';
 import { useContext } from 'react';
 import { useGlobalChartsTheme } from '../../../providers';
 import styles from '../heatmap-chart.module.scss';
 import { HeatmapContext } from './heatmap-context';
+import { isEmptyValue } from './use-heatmap-colors';
 import type { CSSProperties, FC } from 'react';
 
 export interface HeatmapLegendProps {
-	/** Number of swatches in the scale. Default 5. */
+	/** Number of color swatches in the scale, not counting the empty-cell swatch. Default 5. */
 	steps?: number;
 	/**
 	 * `swatches` spaces the steps out as cell-sized squares; `bar` joins them
@@ -29,8 +31,9 @@ export const HeatmapLegend: FC< HeatmapLegendProps > = ( {
 	if ( ! context ) {
 		return null;
 	}
-	const { fillVars } = context;
+	const { extent, fillVars } = context;
 	const labelStyle = legend.labelStyles;
+	const showsEmptyCell = isEmptyValue( 0, extent );
 
 	return (
 		<Stack direction="row" gap="xs" align="center">
@@ -48,6 +51,15 @@ export const HeatmapLegend: FC< HeatmapLegendProps > = ( {
 				data-testid="heatmap-legend-scale"
 				className={ variant === 'bar' ? styles[ 'heatmap-chart__legend-scale--bar' ] : undefined }
 			>
+				{ showsEmptyCell && (
+					<span
+						data-testid="heatmap-legend-empty-swatch"
+						className={ clsx(
+							styles[ 'heatmap-chart__legend-swatch' ],
+							styles[ 'heatmap-chart__legend-swatch--empty' ]
+						) }
+					/>
+				) }
 				{ Array.from( { length: steps }, ( _, index ) => {
 					const intensity = steps <= 1 ? 1 : index / ( steps - 1 );
 					return (

package/src/charts/heatmap-chart/private/index.ts

@@ -4,5 +4,7 @@ export { HeatmapLegend } from './heatmap-legend';
 export { HeatmapContext } from './heatmap-context';
 export type { HeatmapLegendProps } from './heatmap-legend';
 export type { HeatmapContextValue } from './heatmap-context';
-export { resolveColumnGroups } from './column-groups';
-export type { ColumnGroupLayout } from './column-groups';
+export { resolveColumnGroups, wrapColumnGroups } from './column-groups';
+export type { ColumnGroupLayout, WrappedColumnGroupLayout } from './column-groups';
+export { fitCompactCells } from './fit-compact-cells';
+export type { CompactCellFit } from './fit-compact-cells';

package/src/charts/heatmap-chart/test/column-groups.test.ts

@@ -1,4 +1,4 @@
-import { resolveColumnGroups } from '../private/column-groups';
+import { resolveColumnGroups, wrapColumnGroups } from '../private/column-groups';
 
 const lines = ( columns: { line: number }[] ) => columns.map( column => column.line );
 const gaps = ( columns: { gapBefore: boolean }[] ) => columns.map( column => column.gapBefore );
@@ -16,6 +16,7 @@ describe( 'resolveColumnGroups', () => {
 		expect( resolveColumnGroups( [ { label: 'A', span: 3 } ], 0, 2 ) ).toEqual( {
 			columns: [],
 			groups: [],
+			bands: 1,
 		} );
 		expect( console ).not.toHaveWarned();
 	} );
@@ -30,9 +31,9 @@ describe( 'resolveColumnGroups', () => {
 		expect( lines( layout.columns ) ).toEqual( [ 2, 3, 5, 7, 8 ] );
 		expect( gaps( layout.columns ) ).toEqual( [ false, false, true, true, false ] );
 		expect( layout.groups ).toEqual( [
-			{ label: 'A', span: 2, line: 2 },
-			{ label: 'B', span: 1, line: 5 },
-			{ label: 'C', span: 2, line: 7 },
+			{ label: 'A', span: 2, line: 2, band: 0 },
+			{ label: 'B', span: 1, line: 5, band: 0 },
+			{ label: 'C', span: 2, line: 7, band: 0 },
 		] );
 		expect( layout.columns.map( column => column.group ) ).toEqual( [ 0, 0, 1, 2, 2 ] );
 	} );
@@ -81,3 +82,39 @@ describe( 'resolveColumnGroups', () => {
 		expect( console ).toHaveWarned();
 	} );
 } );
+
+describe( 'wrapColumnGroups', () => {
+	const groups = [
+		{ label: 'A', span: 2 },
+		{ label: 'B', span: 1 },
+		{ label: 'C', span: 2 },
+	];
+
+	test( 'restarts each band at the first line, aligning the groups in slots as wide as their widest', () => {
+		const wrapped = wrapColumnGroups( resolveColumnGroups( groups, 5, 2 ), 2 );
+		expect( wrapped?.slotSpans ).toEqual( [ 2, 1 ] );
+		expect(
+			wrapped?.columns.map( ( { line, band, gapBefore } ) => [ line, band, gapBefore ] )
+		).toEqual( [
+			[ 2, 0, false ],
+			[ 3, 0, false ],
+			[ 5, 0, true ],
+			[ 2, 1, false ],
+			[ 3, 1, false ],
+		] );
+		expect( wrapped?.groups.map( ( { label, line, band } ) => [ label, line, band ] ) ).toEqual( [
+			[ 'A', 2, 0 ],
+			[ 'B', 5, 0 ],
+			[ 'C', 2, 1 ],
+		] );
+	} );
+
+	test.each( [
+		[ 'one band', groups, 5, 1 ],
+		[ 'an ungrouped tail', groups, 6, 2 ],
+	] )( 'leaves the layout unwrapped for %s', ( _, columnGroups, columnCount, bands ) => {
+		expect(
+			wrapColumnGroups( resolveColumnGroups( columnGroups, columnCount, 2 ), bands )
+		).toBeNull();
+	} );
+} );

package/src/charts/heatmap-chart/test/fit-compact-cells.test.ts

@@ -0,0 +1,59 @@
+import { resolveColumnGroups } from '../private/column-groups';
+import { fitCompactCells } from '../private/fit-compact-cells';
+
+const monthGroups = Array.from( { length: 12 }, ( _, index ) => ( {
+	label: `M${ index + 1 }`,
+	span: 7,
+} ) );
+
+// Twelve month calendars, weekdays across and six weeks down, labelled beneath.
+const months = {
+	layout: resolveColumnGroups( monthGroups, 84, 2 ),
+	rows: 6,
+	cellGap: 2,
+	groupGap: 16,
+	rowLabelWidth: 0,
+	columnLabelHeight: null,
+	groupLabelHeight: 22,
+	minCellSize: 11,
+};
+
+describe( 'fitCompactCells', () => {
+	test.each( [
+		[ 'a one-row tile keeps one band at the floor', 1189, 110, { bands: 1, cellSize: 11 } ],
+		[ 'a wide one-row tile grows its single band', 1900, 130, { bands: 1, cellSize: 16 } ],
+		[ 'a two-row tile wraps into two bands of six', 1189, 300, { bands: 2, cellSize: 17 } ],
+		[ 'a tall narrow tile wraps into four bands of three', 372, 641, { bands: 4, cellSize: 14 } ],
+		[
+			'a narrow tile wraps rather than overflow at the floor',
+			320,
+			641,
+			{ bands: 4, cellSize: 11 },
+		],
+	] )( '%s', ( _, width, height, expected ) => {
+		expect( fitCompactCells( { ...months, width, height } ) ).toEqual( expected );
+	} );
+
+	test( 'sizes a grid with an ungrouped tail for the one band it can draw', () => {
+		const layout = resolveColumnGroups( monthGroups.slice( 0, 3 ), 22, 2 );
+		expect( fitCompactCells( { ...months, layout, width: 400, height: 400 } ) ).toEqual( {
+			bands: 1,
+			cellSize: 14,
+		} );
+	} );
+
+	test( 'leaves room for the row-label track and the column-label row', () => {
+		expect(
+			fitCompactCells( {
+				...months,
+				layout: resolveColumnGroups( undefined, 10, 2 ),
+				rows: 2,
+				groupLabelHeight: null,
+				rowLabelWidth: 40,
+				columnLabelHeight: 20,
+				width: 300,
+				height: 100,
+			} )
+		).toEqual( { bands: 1, cellSize: 24 } );
+	} );
+} );

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

@@ -1,4 +1,4 @@
-import { render, screen, within } from '@testing-library/react';
+import { act, render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { GlobalChartsProvider } from '../../../providers';
 import { buildMonthCalendarHeatmapData } from '../build-month-calendar-data';
@@ -172,6 +172,29 @@ describe( 'HeatmapChart', () => {
 		).toHaveLength( 4 );
 	} );
 
+	test.each( [
+		[ 'with zeros painted empty', data, 1 ],
+		[ 'with negative values', [ { label: 'W1', data: [ { value: -2 }, { value: 0 } ] } ], 0 ],
+	] )( 'starts the legend scale with an empty-cell swatch %s', ( _case, rows, count ) => {
+		render(
+			<GlobalChartsProvider>
+				<HeatmapChart width={ 500 } height={ 300 } data={ rows }>
+					<HeatmapChart.Legend variant="bar" />
+				</HeatmapChart>
+			</GlobalChartsProvider>
+		);
+		const empty = screen.queryAllByTestId( 'heatmap-legend-empty-swatch' );
+		const scale = screen.getByTestId( 'heatmap-legend-scale' );
+
+		expect( empty ).toHaveLength( count );
+		expect( within( scale ).getAllByTestId( 'heatmap-legend-swatch' ) ).toHaveLength( 5 );
+		expect(
+			within( scale )
+				.getAllByTestId( /^heatmap-legend-(empty-)?swatch$/ )
+				.slice( 0, count )
+		).toEqual( empty );
+	} );
+
 	test( 'paints the legend on the same scale as the cells', () => {
 		render(
 			<GlobalChartsProvider>
@@ -943,6 +966,114 @@ describe( 'HeatmapChart column groups', () => {
 	} );
 } );
 
+describe( 'HeatmapChart fitCells', () => {
+	const threeMonths = Array.from( { length: 6 }, ( _, index ) => ( {
+		data: [ { value: index }, { value: index + 1 } ],
+	} ) );
+	const columnGroups = [
+		{ label: 'Jan', span: 2 },
+		{ label: 'Feb', span: 2 },
+		{ label: 'Mar', span: 2 },
+	];
+
+	let widthSpy: jest.SpyInstance;
+	let heightSpy: jest.SpyInstance;
+
+	beforeEach( () => {
+		widthSpy = jest.spyOn( Element.prototype, 'clientWidth', 'get' ).mockReturnValue( 400 );
+		heightSpy = jest.spyOn( Element.prototype, 'clientHeight', 'get' ).mockReturnValue( 400 );
+	} );
+
+	afterEach( () => {
+		widthSpy.mockRestore();
+		heightSpy.mockRestore();
+	} );
+
+	test( 'wraps the groups that fit better on a second band below the first, cells grown to match', () => {
+		renderChart( { data: threeMonths, columnGroups, compact: true, fitCells: true } );
+		const grid = screen.getByRole( 'grid', { name: /heatmap/i } );
+		expect( grid.style.getPropertyValue( '--a8c-charts-dimension-heatmap-cell-size' ) ).toBe(
+			'91px'
+		);
+		const [ , feb, mar ] = screen.getAllByTestId( 'heatmap-group-label' );
+		expect( feb ).toHaveStyle( { gridColumn: '5 / span 2', gridRow: '3' } );
+		// Band one takes rows 1-2, its labels 3 and the gap 4, so band two's labels sit on 7.
+		expect( mar ).toHaveStyle( { gridColumn: '2 / span 2', gridRow: '7' } );
+		const marchCell = screen
+			.getAllByTestId( 'heatmap-cell' )
+			.find( element => element.dataset.column === '4' && element.dataset.row === '0' );
+		expect( marchCell ).toHaveStyle( { gridColumn: '2', gridRow: '5' } );
+	} );
+
+	test( 'keeps the theme size, with a warning, when a column is a summary', () => {
+		renderChart( {
+			data: [
+				...threeMonths,
+				{ label: 'Total', summary: true, data: [ { value: 1 }, { value: 2 } ] },
+			],
+			columnGroups,
+			compact: true,
+			fitCells: true,
+		} );
+		const grid = screen.getByRole( 'grid', { name: /heatmap/i } );
+		expect( grid.style.getPropertyValue( '--a8c-charts-dimension-heatmap-cell-size' ) ).toBe(
+			'11px'
+		);
+		expect( console ).toHaveWarned();
+	} );
+
+	test( 'leaves the grid the box less the content beside it', () => {
+		const offsetHeight = jest
+			.spyOn( HTMLElement.prototype, 'offsetHeight', 'get' )
+			.mockImplementation( function ( this: HTMLElement ) {
+				return this.dataset.testid === 'beside-grid' ? 100 : 0;
+			} );
+		try {
+			renderChart( {
+				data: threeMonths,
+				columnGroups,
+				compact: true,
+				fitCells: true,
+				children: <div data-testid="beside-grid" />,
+			} );
+			const grid = screen.getByRole( 'grid', { name: /heatmap/i } );
+			expect( grid.style.getPropertyValue( '--a8c-charts-dimension-heatmap-cell-size' ) ).toBe(
+				'66px'
+			);
+		} finally {
+			offsetHeight.mockRestore();
+		}
+	} );
+
+	test( 'refits within the resize delivery, before later observers read the grid', () => {
+		const observers: ResizeObserverCallback[] = [];
+		const original = window.ResizeObserver;
+		window.ResizeObserver = class {
+			constructor( private callback: ResizeObserverCallback ) {}
+			observe() {
+				observers.push( this.callback );
+			}
+			unobserve() {}
+			disconnect() {}
+		} as unknown as typeof ResizeObserver;
+		try {
+			renderChart( { data: threeMonths, columnGroups, compact: true, fitCells: true } );
+			const grid = screen.getByRole( 'grid', { name: /heatmap/i } );
+			heightSpy.mockReturnValue( 100 );
+			let cellSize = '';
+			act( () => {
+				observers.forEach( callback => callback( [], {} as ResizeObserver ) );
+				cellSize = grid.style.getPropertyValue( '--a8c-charts-dimension-heatmap-cell-size' );
+			} );
+			expect( cellSize ).toBe( '48px' );
+			const [ , , mar ] = screen.getAllByTestId( 'heatmap-group-label' );
+			expect( mar ).toHaveStyle( { gridRow: '3' } );
+		} finally {
+			window.ResizeObserver = original;
+		}
+	} );
+} );
+
 describe( 'HeatmapChart calendar navigation', () => {
 	const calendar = ( range: { start: string; end: string }, days: string[] ) =>
 		buildMonthCalendarHeatmapData(
@@ -1091,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,10 +74,10 @@ 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. */
+	fitCells?: boolean;
 	/** Render the numeric value inside each cell. Default `! compact`. */
 	showValues?: boolean;
 	/**

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;
@@ -193,8 +199,10 @@ $focus-ring-width: var(--wpds-border-width-focus);
 			var(--wpds-motion-easing-subtle);
 	}
 
-	&:hover,
-	&:focus-visible {
+	// A layered row's own link or button does not advertise the drill-down.
+	&:hover:not(:has(:is(a, button):not(.rowButton):hover)),
+	&:focus-visible,
+	&:has(> .rowButton:focus-visible) {
 
 		// Fixed reserve for the chevron — the value slides by it in full, and the
 		// bar width inset (see leaderboard-chart.tsx) scales it by the bar's share.
@@ -214,8 +222,9 @@ $focus-ring-width: var(--wpds-border-width-focus);
 	}
 
 	// In RTL the value slides toward the inline start the other way (rightward).
-	[dir="rtl"] &:hover .valueContainer,
-	[dir="rtl"] &:focus-visible .valueContainer {
+	[dir="rtl"] &:hover:not(:has(:is(a, button):not(.rowButton):hover)) .valueContainer,
+	[dir="rtl"] &:focus-visible .valueContainer,
+	[dir="rtl"] &:has(> .rowButton:focus-visible) .valueContainer {
 		transform: translateX(var(--a8c-charts-dimension-leaderboard-bar-hover-inset));
 	}
 
@@ -231,6 +240,45 @@ $focus-ring-width: var(--wpds-border-width-focus);
 	}
 }
 
+// A row whose label holds a link: the button follows the cells for tab order
+// but is layered beneath them, and the cells pass clicks through except on the
+// label's own links and buttons. The label's isolate traps their z-index, so
+// layering the cells is what keeps them above the button.
+.layeredRow {
+	isolation: isolate;
+
+	> :not(.rowButton, .chevron) {
+		position: relative;
+		z-index: 1;
+		pointer-events: none;
+	}
+
+	:is(a, button):not(.rowButton) {
+		position: relative;
+		z-index: 1;
+		pointer-events: auto;
+	}
+}
+
+.rowButton {
+	position: absolute;
+	inset: 0;
+	appearance: none;
+	padding: 0;
+	border: 0;
+	background: none;
+	cursor: pointer;
+	z-index: 0;
+
+	&:focus-visible {
+		border-radius: var(--wpds-border-radius-sm);
+		outline:
+			$focus-ring-width solid
+			var(--wpds-color-stroke-focus);
+		outline-offset: calc(-1 * #{$focus-ring-width});
+	}
+}
+
 .chevron {
 	position: absolute;
 	inset-inline-end: var(--wpds-dimension-padding-xs);

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

@@ -4,7 +4,7 @@ import { __ } from '@wordpress/i18n';
 import { Icon, chevronRight } from '@wordpress/icons';
 import { Stack, Text } from '@wordpress/ui';
 import clsx from 'clsx';
-import { useContext, useMemo, type FC } from 'react';
+import { useContext, useMemo, type FC, type MouseEvent } from 'react';
 import { Legend } from '../../components/legend';
 import { usePrefersReducedMotion } from '../../hooks';
 import {
@@ -89,6 +89,20 @@ const hasDeltaValue = (
 	delta: number;
 } => hasPreviousValue( entry ) && entry.delta != null;
 
+/**
+ * A layered row's cell that takes pointer events of its own (a value tooltip)
+ * sits above the row button; pass its clicks on so they still drill down.
+ *
+ * @param event - The click on the row.
+ */
+function forwardCellClickToRowButton( event: MouseEvent< HTMLDivElement > ) {
+	if ( ( event.target as Element ).closest( 'a, button' ) ) {
+		return;
+	}
+
+	event.currentTarget.querySelector< HTMLButtonElement >( ':scope > button' )?.click();
+}
+
 const BarLabel = ( { label }: { label: LeaderboardEntry[ 'label' ] } ) => (
 	<>{ typeof label === 'string' ? <Text className={ styles.label }>{ label }</Text> : label }</>
 );
@@ -174,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 > = ( {
@@ -194,6 +209,7 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 	legend = {},
 	legendLabels,
 	gap = 'md',
+	ariaLabel,
 	className,
 	style,
 	children,
@@ -375,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 }
@@ -449,26 +467,59 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 									</>
 								);
 
+								if ( entry.onClick && entry.hasInteractiveLabel ) {
+									return (
+										<div
+											key={ entry.id }
+											role="listitem"
+											data-row-index={ rowIndex }
+											style={ rowStyle }
+											className={ styles.rowItem }
+										>
+											{ /* 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';
@@ -547,6 +547,59 @@ describe( 'LeaderboardChart', () => {
 			expect( screen.getByRole( 'button' ).tagName ).toBe( 'BUTTON' );
 		} );
 
+		it( 'keeps a label link beside the row button, not inside it, when the label is interactive', async () => {
+			const user = userEvent.setup();
+			const onClick = jest.fn();
+			render(
+				<LeaderboardChart
+					data={ [
+						{
+							...mockData[ 0 ],
+							label: <a href="/author/1">Author</a>,
+							onClick,
+							ariaLabel: 'View posts by Author',
+							hasInteractiveLabel: true,
+						},
+					] }
+				/>
+			);
+
+			const button = screen.getByRole( 'button', { name: 'View posts by Author' } );
+			const link = screen.getByRole( 'link', { name: 'Author' } );
+			link.addEventListener( 'click', event => event.preventDefault() );
+			expect( button ).not.toContainElement( link );
+
+			await user.click( button );
+			expect( onClick ).toHaveBeenCalledTimes( 1 );
+			await user.click( link );
+			expect( onClick ).toHaveBeenCalledTimes( 1 );
+			// A value tooltip takes pointer events above the button; its click still drills down.
+			await user.click( screen.getByText( '12.5K' ) );
+			expect( onClick ).toHaveBeenCalledTimes( 2 );
+		} );
+
+		it( 'tabs to the label link before the row button when the label is interactive', async () => {
+			const user = userEvent.setup();
+			render(
+				<LeaderboardChart
+					data={ [
+						{
+							...mockData[ 0 ],
+							label: <a href="/author/1">Author</a>,
+							onClick: jest.fn(),
+							ariaLabel: 'View posts by Author',
+							hasInteractiveLabel: true,
+						},
+					] }
+				/>
+			);
+
+			await user.tab();
+			expect( screen.getByRole( 'link', { name: 'Author' } ) ).toHaveFocus();
+			await user.tab();
+			expect( screen.getByRole( 'button', { name: 'View posts by Author' } ) ).toHaveFocus();
+		} );
+
 		it( 'calls onClick when the row is clicked', async () => {
 			const user = userEvent.setup();
 			const onClick = jest.fn();
@@ -653,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();