@automattic/charts 4.1.1 → 4.3.0

package/src/charts/private/readings.ts

@@ -0,0 +1,34 @@
+import { formatNumber } from '@automattic/number-formatters';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Whether a value is a reading a scale can place.
+ *
+ * @param value - The point's value.
+ * @return True for a finite number.
+ */
+export const isReading = ( value: unknown ): value is number =>
+	typeof value === 'number' && Number.isFinite( value );
+
+/**
+ * Whether a data point's value cannot be drawn.
+ *
+ * @param value                - The point's value.
+ * @param options              - Validation options.
+ * @param options.allowMissing - Whether `null` is a bucket with no reading rather than a fault.
+ * @return True when the value is invalid.
+ */
+export const isInvalidReading = (
+	value: number | null | undefined,
+	{ allowMissing }: { allowMissing: boolean }
+) => ( value === null ? ! allowMissing : value === undefined || isNaN( value ) );
+
+/**
+ * Formats a reading for a tooltip.
+ *
+ * @param value - The reading, or null when the bucket has none.
+ * @return The formatted value.
+ */
+export const formatReading = ( value: number | null | undefined ) =>
+	// formatNumber( null ) is "0", which would claim a reading of zero for a bucket that has none.
+	value == null ? __( 'No data', 'jetpack-charts' ) : formatNumber( value );

package/src/charts/private/test/readings.test.ts

@@ -0,0 +1,29 @@
+import { formatReading, isInvalidReading } from '../readings';
+
+describe( 'isInvalidReading', () => {
+	test( 'accepts a number, including zero', () => {
+		expect( isInvalidReading( 0, { allowMissing: false } ) ).toBe( false );
+		expect( isInvalidReading( 42, { allowMissing: false } ) ).toBe( false );
+	} );
+
+	test( 'rejects undefined and NaN whether or not missing readings are allowed', () => {
+		expect( isInvalidReading( undefined, { allowMissing: true } ) ).toBe( true );
+		expect( isInvalidReading( NaN, { allowMissing: true } ) ).toBe( true );
+	} );
+
+	test( 'accepts null only where missing readings are allowed', () => {
+		expect( isInvalidReading( null, { allowMissing: true } ) ).toBe( false );
+		expect( isInvalidReading( null, { allowMissing: false } ) ).toBe( true );
+	} );
+} );
+
+describe( 'formatReading', () => {
+	test( 'reads a missing value as No data', () => {
+		expect( formatReading( null ) ).toBe( 'No data' );
+		expect( formatReading( undefined ) ).toBe( 'No data' );
+	} );
+
+	test( 'formats a real zero as zero', () => {
+		expect( formatReading( 0 ) ).toBe( '0' );
+	} );
+} );

package/src/charts/private/test/whole-number-ticks.test.tsx

@@ -0,0 +1,57 @@
+import { createScale } from '@visx/scale';
+import { getWholeNumberTickValues, hasOnlyWholeNumbers } from '../whole-number-ticks';
+import type { SeriesData } from '../../../types';
+
+const linear = ( domain: [ number, number ] ) =>
+	createScale( { type: 'linear', domain, range: [ 100, 0 ] } );
+
+const series = ( ...values: Array< number | null > ): SeriesData => ( {
+	label: 'A',
+	data: values.map( ( value, i ) => ( { date: new Date( 2024, i, 1 ), value } ) ),
+} );
+
+describe( 'getWholeNumberTickValues', () => {
+	it( 'keeps only the whole ticks of a range smaller than the tick count', () => {
+		expect( getWholeNumberTickValues( linear( [ 0, 1 ] ), 4 ) ).toEqual( [ 0, 1 ] );
+		expect( getWholeNumberTickValues( linear( [ 0, 2 ] ), 4 ) ).toEqual( [ 0, 1, 2 ] );
+	} );
+
+	it( 'leaves a scale whose ticks are already whole to visx', () => {
+		expect( getWholeNumberTickValues( linear( [ 0, 1000 ] ), 4 ) ).toBeUndefined();
+	} );
+
+	it( 'leaves non-numeric scales to visx', () => {
+		const band = createScale( { type: 'band', domain: [ 'a', 'b' ], range: [ 0, 100 ] } );
+		const time = createScale( {
+			type: 'time',
+			domain: [ new Date( 2024, 0, 1 ), new Date( 2024, 0, 2 ) ],
+			range: [ 0, 100 ],
+		} );
+		expect( getWholeNumberTickValues( band, 4 ) ).toBeUndefined();
+		expect( getWholeNumberTickValues( time, 4 ) ).toBeUndefined();
+		expect( getWholeNumberTickValues( undefined, 4 ) ).toBeUndefined();
+	} );
+
+	it( 'leaves a range with no whole tick to visx', () => {
+		expect( getWholeNumberTickValues( linear( [ 0.2, 0.8 ] ), 4 ) ).toBeUndefined();
+	} );
+
+	it( 'leaves a range with only one whole tick to visx', () => {
+		expect( getWholeNumberTickValues( linear( [ 0, 0.8 ] ), 4 ) ).toBeUndefined();
+	} );
+} );
+
+describe( 'hasOnlyWholeNumbers', () => {
+	it( 'is true when every reading is whole, skipping missing ones', () => {
+		expect( hasOnlyWholeNumbers( [ series( 0, 1, null, 3 ) ] ) ).toBe( true );
+	} );
+
+	it( 'is false when any reading has a fraction', () => {
+		expect( hasOnlyWholeNumbers( [ series( 0, 1 ), series( 0.5 ) ] ) ).toBe( false );
+	} );
+
+	it( 'is false when there is no reading at all', () => {
+		expect( hasOnlyWholeNumbers( [ series( null, null ) ] ) ).toBe( false );
+		expect( hasOnlyWholeNumbers( [] ) ).toBe( false );
+	} );
+} );

package/src/charts/private/time-axis-options.ts

@@ -83,7 +83,7 @@ export const buildTimeAxisOptions = ( {
 					effectiveDomain,
 					ownFormatter,
 					callerNumTicks ?? getMaxTicksForWidth( width )
-			  );
+				);
 
 	// An empty selection means the domain holds no point to tick, not that the
 	// axis wants no ticks: visx reads `[]` as the latter and labels nothing.

package/src/charts/private/whole-number-ticks.tsx

@@ -0,0 +1,79 @@
+import { DataContext } from '@visx/xychart';
+import { useContext } from 'react';
+import { isReading } from './readings';
+import type { SeriesData } from '../../types';
+import type { ReactNode } from 'react';
+
+/**
+ * Whether every reading in the series is a whole number.
+ *
+ * @param series - The series visx renders.
+ * @return True when at least one reading exists and none has a fraction.
+ */
+export const hasOnlyWholeNumbers = ( series: SeriesData[] ): boolean => {
+	let sawReading = false;
+	for ( const { data } of series ) {
+		for ( const point of data ) {
+			const value = point?.value;
+			if ( ! isReading( value ) ) {
+				continue;
+			}
+			if ( ! Number.isInteger( value ) ) {
+				return false;
+			}
+			sawReading = true;
+		}
+	}
+	return sawReading;
+};
+
+/**
+ * The scale's ticks with the fractional ones dropped.
+ *
+ * d3 steps by 1, 2 or 5 times a power of ten, so every whole number inside the domain is one of its ticks.
+ *
+ * @param scale - The value scale visx built.
+ * @param count - Ticks to ask the scale for; undefined uses the scale's own default, as visx does.
+ * @return Whole-number ticks, or undefined when visx's own ticks need no change.
+ */
+export const getWholeNumberTickValues = (
+	scale: unknown,
+	count?: number
+): number[] | undefined => {
+	const ticks = ( scale as { ticks?: ( count?: number ) => unknown[] } )?.ticks?.( count );
+	if ( ! ticks?.every( ( tick ): tick is number => typeof tick === 'number' ) ) {
+		return undefined;
+	}
+	const whole = ticks.filter( tick => Number.isInteger( tick ) );
+	return whole.length > 1 && whole.length < ticks.length ? whole : undefined;
+};
+
+type WholeNumberTicksProps = {
+	axis: 'x' | 'y';
+	numTicks?: number;
+	enabled: boolean;
+	children: ( tickValues: number[] | undefined ) => ReactNode;
+};
+
+/**
+ * Hands its children the whole-number ticks of the chart's value scale.
+ *
+ * @param props          - Component props.
+ * @param props.axis     - Which scale carries the values.
+ * @param props.numTicks - Ticks to ask the scale for.
+ * @param props.enabled  - Whether the plotted values are all whole numbers and the caller pinned neither the ticks nor the value domain.
+ * @param props.children - Renders the axis and grid with the tick values.
+ * @return The rendered children.
+ */
+export const WholeNumberTicks = ( {
+	axis,
+	numTicks,
+	enabled,
+	children,
+}: WholeNumberTicksProps ) => {
+	const { xScale, yScale } = useContext( DataContext );
+	const tickValues = enabled
+		? getWholeNumberTickValues( axis === 'x' ? xScale : yScale, numTicks )
+		: undefined;
+	return <>{ children( tickValues ) }</>;
+};

package/src/charts/private/with-responsive/with-responsive.tsx

@@ -94,7 +94,7 @@ export function withResponsive< T extends Exclude< BaseChartProps< unknown >, 'o
 		// Cap the available width at maxWidth unless an explicit width pins it. Before
 		// measurement resolves, fall back to the explicit width.
 		const cap = width === undefined ? maxWidth : Infinity;
-		const availableWidth = parentWidth > 0 ? Math.min( parentWidth, cap ) : width ?? 0;
+		const availableWidth = parentWidth > 0 ? Math.min( parentWidth, cap ) : ( width ?? 0 );
 
 		let boxWidth = availableWidth;
 		let boxHeight: number;
@@ -107,7 +107,7 @@ export function withResponsive< T extends Exclude< BaseChartProps< unknown >, 'o
 				boxHeight = derivedHeight;
 			}
 		} else {
-			boxHeight = parentHeight > 0 ? parentHeight : height ?? 0;
+			boxHeight = parentHeight > 0 ? parentHeight : ( height ?? 0 );
 		}
 
 		// Decide containment from the wrapper's real height, measured after layout.

package/src/charts/private/x-zoom/test/x-zoom.test.tsx

@@ -130,9 +130,7 @@ describe( 'useXZoom', () => {
 	} );
 
 	test( 'leaves domain null when the X scale has no invert function', () => {
-		const chartRef = makeChartRef( {
-			/* no invert */
-		} );
+		const chartRef = makeChartRef( { /* no invert */ } );
 		const { result } = renderHook( () => useXZoom< number >( { enabled: true, chartRef } ) );
 
 		act( () => result.current.handlers.onPointerDown( makeParams( 100 ) ) );

package/src/charts/private/x-zoom/x-zoom.tsx

@@ -79,8 +79,7 @@ export function useXZoom< T extends Date | number = Date >( {
 			const hi = Math.max( finalDrag.a, finalDrag.b );
 			if ( hi - lo < MIN_DRAG_PIXELS ) return;
 			const xScale = chartRef.current?.getScales()?.xScale as
-				| ( AxisScale & { invert?: ( v: number ) => T } )
-				| undefined;
+				( AxisScale & { invert?: ( v: number ) => T } ) | undefined;
 			if ( ! xScale || typeof xScale.invert !== 'function' ) return;
 			setDomain( [ xScale.invert( lo ), xScale.invert( hi ) ] );
 		},

package/src/components/legend/hooks/test/use-chart-legend-items.test.tsx

@@ -247,6 +247,130 @@ describe( 'useChartLegendItems', () => {
 		} );
 	} );
 
+	describe( 'Comparison item (SeriesData)', () => {
+		const comparisonData: SeriesData[] = [
+			{ label: 'Views', group: 'views', data: [ { label: 'Mon', value: 100 } ] },
+			{
+				label: 'Views — previous',
+				group: 'views',
+				options: { type: 'comparison' as const, seriesLineStyle: { strokeDasharray: '4 4' } },
+				data: [ { label: 'Mon', value: 90 } ],
+			},
+		];
+
+		test( 'is off by default', () => {
+			const { result } = renderHook(
+				() => useChartLegendItems( comparisonData, { collapseGroups: true } ),
+				{ wrapper }
+			);
+
+			expect( result.current.map( item => item.label ) ).toEqual( [ 'Views' ] );
+		} );
+
+		test( 'appends a static item styled like the comparison series', () => {
+			const { result } = renderHook(
+				() =>
+					useChartLegendItems(
+						comparisonData,
+						{ collapseGroups: true, comparisonItem: true },
+						'line'
+					),
+				{ wrapper }
+			);
+
+			expect( result.current.map( item => item.label ) ).toEqual( [
+				'Views',
+				'Comparison period',
+			] );
+			expect( result.current[ 1 ].interactive ).toBe( false );
+			expect( result.current[ 1 ].shapeStyle ).toMatchObject( { strokeDasharray: '4 4' } );
+			expect( result.current[ 1 ].color ).toBe( result.current[ 0 ].color );
+		} );
+
+		test( 'uses a string option as the label', () => {
+			const { result } = renderHook(
+				() =>
+					useChartLegendItems( comparisonData, {
+						collapseGroups: true,
+						comparisonItem: 'Previous period',
+					} ),
+				{ wrapper }
+			);
+
+			expect( result.current.map( item => item.label ) ).toEqual( [ 'Views', 'Previous period' ] );
+		} );
+
+		test( 'adds nothing when the comparison series already has its own item', () => {
+			const { result } = renderHook(
+				() => useChartLegendItems( comparisonData, { comparisonItem: true } ),
+				{ wrapper }
+			);
+
+			expect( result.current.map( item => item.label ) ).toEqual( [ 'Views', 'Views — previous' ] );
+		} );
+
+		test( 'styles a current-period series by its own line styles, not the theme index', () => {
+			const theme = {
+				seriesLineStyles: [ { strokeWidth: 2 } ],
+				legend: { shapeStyles: [ {}, { strokeDasharray: '2 2' } ] },
+			};
+			const themedWrapper = ( { children }: { children: ReactNode } ) => (
+				<GlobalChartsProvider theme={ theme }>{ children }</GlobalChartsProvider>
+			);
+			const pairedData: SeriesData[] = [
+				{ label: 'Views', group: 'views', data: [ { label: 'Mon', value: 100 } ] },
+				{ label: 'Visitors', group: 'visitors', data: [ { label: 'Mon', value: 50 } ] },
+			];
+
+			const { result } = renderHook( () => useChartLegendItems( pairedData, {}, 'line' ), {
+				wrapper: themedWrapper,
+			} );
+
+			expect( result.current[ 1 ].shapeStyle ).toEqual( { strokeWidth: 2 } );
+		} );
+
+		test( "takes the first metric's color when several metrics carry a comparison", () => {
+			const pairedData: SeriesData[] = [
+				{ label: 'Views', group: 'views', data: [ { label: 'Mon', value: 100 } ] },
+				{
+					label: 'Views — previous',
+					group: 'views',
+					options: { type: 'comparison' as const },
+					data: [ { label: 'Mon', value: 90 } ],
+				},
+				{ label: 'Visitors', group: 'visitors', data: [ { label: 'Mon', value: 50 } ] },
+				{
+					label: 'Visitors — previous',
+					group: 'visitors',
+					options: { type: 'comparison' as const },
+					data: [ { label: 'Mon', value: 40 } ],
+				},
+			];
+
+			const { result } = renderHook(
+				() => useChartLegendItems( pairedData, { collapseGroups: true, comparisonItem: true } ),
+				{ wrapper }
+			);
+
+			expect( result.current.map( item => item.label ) ).toEqual( [
+				'Views',
+				'Visitors',
+				'Comparison period',
+			] );
+			expect( result.current[ 0 ].color ).not.toBe( result.current[ 1 ].color );
+			expect( result.current[ 2 ].color ).toBe( result.current[ 0 ].color );
+		} );
+
+		test( 'adds nothing when no series is a comparison', () => {
+			const { result } = renderHook(
+				() => useChartLegendItems( [ comparisonData[ 0 ] ], { comparisonItem: true } ),
+				{ wrapper }
+			);
+
+			expect( result.current.map( item => item.label ) ).toEqual( [ 'Views' ] );
+		} );
+	} );
+
 	describe( 'Label and Color', () => {
 		test( 'preserves label and color from data', () => {
 			const data: DataPointPercentageCalculated[] = [

package/src/components/legend/hooks/use-chart-legend-items.ts

@@ -1,4 +1,5 @@
 import { formatNumber } from '@automattic/number-formatters';
+import { __ } from '@wordpress/i18n';
 import { useMemo } from 'react';
 import {
 	useGlobalChartsContext,
@@ -30,6 +31,12 @@ export interface ChartLegendOptions {
 	 * primary series. Off by default, so every series gets its own item.
 	 */
 	collapseGroups?: boolean;
+	/**
+	 * Append a static item explaining the comparison overlay whenever a series has
+	 * `options.type === 'comparison'`. Skipped when that series already has its own
+	 * item. Pass a string to replace the default label.
+	 */
+	comparisonItem?: boolean | string;
 }
 
 /**
@@ -234,6 +241,41 @@ function processSeriesData(
 	} );
 }
 
+/**
+ * Builds the static item that names the comparison overlay, styled like its first series.
+ * Skipped when a comparison series already has an item of its own, so nothing is listed twice.
+ * @param seriesData       - The series data to search for a comparison series
+ * @param items            - The legend items already built from the series
+ * @param label            - The item label
+ * @param getElementStyles - Function to get element styles
+ * @param legendShape      - The shape type for legend items (string literal or React component)
+ * @return The legend item, or null when it would add nothing
+ */
+function buildComparisonLegendItem(
+	seriesData: SeriesData[],
+	items: BaseLegendItem[],
+	label: string,
+	getElementStyles: ( params: GetElementStylesParams ) => ElementStyles,
+	legendShape?: LegendShape< SeriesData[], number >
+): BaseLegendItem | null {
+	const itemLabels = new Set( items.map( item => item.label ) );
+	const index = seriesData.findIndex(
+		series => series.options?.type === 'comparison' && ! itemLabels.has( series.label )
+	);
+
+	if ( index === -1 ) {
+		return null;
+	}
+
+	const { color, shapeStyles } = getElementStyles( {
+		data: seriesData[ index ],
+		index,
+		legendShape,
+	} );
+
+	return { label, color, shapeStyle: shapeStyles, interactive: false };
+}
+
 /**
  * Processes point data into legend items
  * @param pointData          - The point data to process
@@ -296,6 +338,7 @@ export function useChartLegendItems<
 		withGlyph = false,
 		glyphSize = 8,
 		collapseGroups = false,
+		comparisonItem = false,
 		renderGlyph,
 	} = options;
 	const { getElementStyles } = useGlobalChartsContext();
@@ -307,8 +350,9 @@ export function useChartLegendItems<
 
 		// Handle SeriesData (multiple series with data points)
 		if ( 'data' in data[ 0 ] ) {
-			return processSeriesData(
-				data as SeriesData[],
+			const seriesData = data as SeriesData[];
+			const items = processSeriesData(
+				seriesData,
 				getElementStyles,
 				showValues,
 				withGlyph,
@@ -317,6 +361,19 @@ export function useChartLegendItems<
 				renderGlyph,
 				legendShape
 			);
+			const comparison = comparisonItem
+				? buildComparisonLegendItem(
+						seriesData,
+						items,
+						typeof comparisonItem === 'string'
+							? comparisonItem
+							: __( 'Comparison period', 'jetpack-charts' ),
+						getElementStyles,
+						legendShape
+					)
+				: null;
+
+			return comparison ? [ ...items, comparison ] : items;
 		}
 
 		// Handle DataPointDate or DataPointPercentageCalculated (single data points)
@@ -338,6 +395,7 @@ export function useChartLegendItems<
 		withGlyph,
 		glyphSize,
 		collapseGroups,
+		comparisonItem,
 		renderGlyph,
 		legendShape,
 	] );

package/src/components/legend/private/base-legend.tsx

@@ -16,7 +16,7 @@ import { ChartInstanceContext } from '../../../charts/private/chart-instance-con
 import { useTextTruncation } from '../../../hooks';
 import { GlobalChartsContext, useGlobalChartsTheme } from '../../../providers';
 import { useStandaloneScopeClass } from '../../../providers/chart-scope';
-import { valueOrIdentity, valueOrIdentityString, labelTransformFactory } from '../utils';
+import { valueOrIdentity, valueOrIdentityString } from '../utils';
 import styles from './base-legend.module.scss';
 import type { BaseLegendItem, BaseLegendProps } from '../types';
 
@@ -75,7 +75,7 @@ const getLegendItemAriaLabel = (
 					_x( '%1$s, %2$s', 'legend item label and value', 'jetpack-charts' ),
 					text,
 					String( value )
-			  )
+				)
 			: text;
 
 	if ( interactive ) {
@@ -123,7 +123,7 @@ export const BaseLegend: ForwardRefExoticComponent<
 			fill = valueOrIdentityString,
 			size = valueOrIdentityString,
 			labelFormat = valueOrIdentity,
-			labelTransform = labelTransformFactory,
+			labelTransform,
 			itemStyles,
 			itemClassName,
 			labelStyles,
@@ -154,11 +154,22 @@ export const BaseLegend: ForwardRefExoticComponent<
 		const chartInstanceContext = useContext( ChartInstanceContext );
 		const standaloneScopeClass = useStandaloneScopeClass();
 
+		// Keep duplicate labels: a static comparison item can share a metric's name.
+		const domain = items.map( item => item.label );
 		const legendScale = scaleOrdinal( {
-			domain: items.map( item => item.label ),
+			domain,
 			range: items.map( item => item.color ),
 		} );
-		const domain = legendScale.domain();
+		const defaultLabelTransform = useCallback< NonNullable< BaseLegendProps[ 'labelTransform' ] > >(
+			( { labelFormat: format } ) =>
+				( datum, index ) => ( {
+					datum,
+					index,
+					text: String( format( datum, index ) ),
+					value: items[ index ].color,
+				} ),
+			[ items ]
+		);
 
 		const getShapeStyle = useCallback(
 			( { index }: { index: number } ) => items[ index ]?.shapeStyle,
@@ -178,8 +189,7 @@ export const BaseLegend: ForwardRefExoticComponent<
 			[ interactive, chartId, context ]
 		);
 
-		// Visibility is display state, not interaction state: a series hidden
-		// programmatically must read as hidden even when the legend cannot be clicked.
+		// Disabling interaction for the whole legend still preserves its series' visibility state.
 		const isSeriesVisible = useCallback(
 			( seriesLabel: string ) => {
 				if ( chartInstanceContext?.isSeriesVisible ) {
@@ -195,18 +205,18 @@ export const BaseLegend: ForwardRefExoticComponent<
 
 		// Create event handlers to avoid inline arrow functions
 		const createClickHandler = useCallback(
-			( seriesLabels: string[] ) => {
-				if ( ! interactive ) {
+			( seriesLabels: string[], itemInteractive: boolean ) => {
+				if ( ! itemInteractive ) {
 					return undefined;
 				}
 				return () => handleLegendClick( seriesLabels );
 			},
-			[ interactive, handleLegendClick ]
+			[ handleLegendClick ]
 		);
 
 		const createKeyDownHandler = useCallback(
-			( seriesLabels: string[] ) => {
-				if ( ! interactive ) {
+			( seriesLabels: string[], itemInteractive: boolean ) => {
+				if ( ! itemInteractive ) {
 					return undefined;
 				}
 				return ( event: KeyboardEvent ) => {
@@ -216,18 +226,20 @@ export const BaseLegend: ForwardRefExoticComponent<
 					}
 				};
 			},
-			[ interactive, handleLegendClick ]
+			[ handleLegendClick ]
 		);
 
 		const flexAlignment = ALIGNMENT_TO_FLEX[ alignment ] ?? 'center';
+		const staticItemRole = interactive ? undefined : 'listitem';
 
 		return render ? (
 			render( items )
 		) : (
 			<LegendOrdinal
 				scale={ legendScale }
+				domain={ domain }
 				labelFormat={ labelFormat }
-				labelTransform={ labelTransform }
+				labelTransform={ labelTransform ?? defaultLabelTransform }
 			>
 				{ labels => (
 					<Stack
@@ -248,16 +260,18 @@ export const BaseLegend: ForwardRefExoticComponent<
 							const seriesLabels = matchedItem?.seriesLabels?.length
 								? matchedItem.seriesLabels
 								: [ label.text ];
-							const visible = isSeriesVisible( seriesLabels[ 0 ] );
-							const handleClick = createClickHandler( seriesLabels );
-							const handleKeyDown = createKeyDownHandler( seriesLabels );
+							const visible =
+								matchedItem?.interactive === false || isSeriesVisible( seriesLabels[ 0 ] );
+							const itemInteractive = interactive && matchedItem?.interactive !== false;
+							const handleClick = createClickHandler( seriesLabels, itemInteractive );
+							const handleKeyDown = createKeyDownHandler( seriesLabels, itemInteractive );
 
 							return (
 								<LegendItem
 									className={ clsx(
 										'visx-legend-item',
 										styles[ 'legend-item' ],
-										interactive && styles[ 'legend-item--interactive' ],
+										itemInteractive && styles[ 'legend-item--interactive' ],
 										! visible && styles[ 'legend-item--inactive' ],
 										itemClassName
 									) }
@@ -271,14 +285,15 @@ export const BaseLegend: ForwardRefExoticComponent<
 									}
 									onClick={ handleClick }
 									onKeyDown={ handleKeyDown }
-									role={ interactive ? 'button' : 'listitem' }
-									tabIndex={ interactive ? 0 : undefined }
-									aria-pressed={ interactive ? visible : undefined }
+									// A static item in an interactive legend has no list to belong to.
+									role={ itemInteractive ? 'button' : staticItemRole }
+									tabIndex={ itemInteractive ? 0 : undefined }
+									aria-pressed={ itemInteractive ? visible : undefined }
 									aria-label={ getLegendItemAriaLabel(
 										label.text,
 										matchedItem?.value,
 										visible,
-										interactive
+										itemInteractive
 									) }
 								>
 									{ items[ i ]?.renderGlyph ? (