@automattic/charts 2.0.1 → 3.1.0

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

@@ -1,6 +1,8 @@
+/* eslint-disable react/jsx-no-bind */
+
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { GlobalChartsProvider } from '../../../providers';
+import { GlobalChartsProvider, useGlobalChartsContext } from '../../../providers';
 import PieChart from '../pie-chart';
 
 describe( 'PieChart', () => {
@@ -548,4 +550,74 @@ describe( 'PieChart', () => {
 			expect( screen.getByText( /33\.3/ ) ).toBeInTheDocument();
 		} );
 	} );
+
+	describe( 'Programmatic visibility (non-interactive legend)', () => {
+		const chartId = 'test-programmatic-hide-pie-chart';
+		const testData = [
+			{ label: 'Segment A', value: 50 },
+			{ label: 'Segment B', value: 50 },
+		];
+
+		const Harness = () => {
+			const { toggleSeriesVisibility } = useGlobalChartsContext();
+			return (
+				<>
+					<button onClick={ () => toggleSeriesVisibility( chartId, 'Segment A' ) }>
+						Hide Segment A
+					</button>
+					<button onClick={ () => toggleSeriesVisibility( chartId, 'Segment B' ) }>
+						Hide Segment B
+					</button>
+					<PieChart
+						data={ testData }
+						size={ 500 }
+						showLegend
+						legend={ { interactive: false } }
+						chartId={ chartId }
+					/>
+				</>
+			);
+		};
+
+		test( 'removes a segment hidden programmatically even though the legend is not clickable', async () => {
+			const user = userEvent.setup();
+
+			render(
+				<GlobalChartsProvider>
+					<Harness />
+				</GlobalChartsProvider>
+			);
+
+			expect( screen.getAllByTestId( 'pie-segment' ) ).toHaveLength( 2 );
+
+			await user.click( screen.getByRole( 'button', { name: 'Hide Segment A' } ) );
+
+			await waitFor( () => {
+				expect( screen.getAllByTestId( 'pie-segment' ) ).toHaveLength( 1 );
+			} );
+
+			// The legend itself stays non-interactive (no toggle button for the segment).
+			expect( screen.queryAllByRole( 'button', { name: /Segment A: /i } ) ).toHaveLength( 0 );
+		} );
+
+		test( 'empty-state copy omits the click instruction when the legend is not interactive', async () => {
+			const user = userEvent.setup();
+
+			render(
+				<GlobalChartsProvider>
+					<Harness />
+				</GlobalChartsProvider>
+			);
+
+			await user.click( screen.getByRole( 'button', { name: 'Hide Segment A' } ) );
+			await user.click( screen.getByRole( 'button', { name: 'Hide Segment B' } ) );
+
+			await waitFor( () => {
+				expect( screen.queryAllByTestId( 'pie-segment' ) ).toHaveLength( 0 );
+			} );
+
+			expect( screen.getByText( 'All segments are hidden.' ) ).toBeInTheDocument();
+			expect( screen.queryByText( /Click legend items to show data/i ) ).not.toBeInTheDocument();
+		} );
+	} );
 } );

package/src/charts/pie-semi-circle-chart/pie-semi-circle-chart.module.scss

@@ -6,8 +6,8 @@
 	}
 
 	.label {
-		font-weight: var(--wpds-typography-font-weight-emphasis, 499);
-		font-size: var(--wpds-typography-font-size-lg, 16px);
+		font-weight: var(--wpds-typography-font-weight-emphasis, 600);
+		font-size: var(--wpds-typography-font-size-lg, 15px);
 	}
 
 	.note {

package/src/charts/pie-semi-circle-chart/pie-semi-circle-chart.tsx

@@ -2,14 +2,13 @@ import { Group } from '@visx/group';
 import { Pie } from '@visx/shape';
 import { Text } from '@visx/text';
 import { useTooltip, useTooltipInPortal } from '@visx/tooltip';
-import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import { useCallback, useContext, useMemo } from 'react';
 import { Legend, useChartLegendItems } from '../../components/legend';
 import { BaseTooltip } from '../../components/tooltip';
 import {
 	useDataWithPercentages,
-	useInteractiveLegendData,
+	useLegendVisibilityData,
 	usePrefersReducedMotion,
 } from '../../hooks';
 import {
@@ -19,13 +18,14 @@ import {
 	useGlobalChartsContext,
 	GlobalChartsContext,
 } from '../../providers';
+import { CHART_SCOPE_CLASS } from '../../styles/chart-scope-class';
 import { attachSubComponents } from '../../utils';
 import { Center } from '../private/center';
 import { ChartSVG, ChartHTML, useChartChildren } from '../private/chart-composition';
+import { ChartInstanceContext } from '../private/chart-instance-context';
 import { ChartLayout } from '../private/chart-layout';
 import { RadialWipeAnimation } from '../private/radial-wipe-animation';
-import { SingleChartContext } from '../private/single-chart-context';
-import { SvgEmptyState } from '../private/svg-empty-state';
+import { getAllHiddenMessage, SvgEmptyState } from '../private/svg-empty-state';
 import { withResponsive } from '../private/with-responsive';
 import styles from './pie-semi-circle-chart.module.scss';
 import type { LegendValueDisplay } from '../../components/legend';
@@ -246,11 +246,10 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 	// Calculate percentages from values (single source of truth)
 	const dataWithPercentages = useDataWithPercentages( data );
 
-	// Filter and recalculate data for interactive legends
-	const { visibleData, allSegmentsHidden, legendData } = useInteractiveLegendData( {
+	// Filter and recalculate data from the shared legend visibility state.
+	const { visibleData, allSegmentsHidden, legendData } = useLegendVisibilityData( {
 		data: dataWithPercentages,
 		chartId,
-		legendInteractive,
 		isSeriesVisible,
 	} );
 
@@ -352,7 +351,7 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 	);
 
 	return (
-		<SingleChartContext.Provider value={ { chartId } }>
+		<ChartInstanceContext.Provider value={ { chartId } }>
 			<ChartLayout
 				legendPosition={ legendPosition }
 				legendElement={ legendElement }
@@ -375,7 +374,9 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 					<>
 						{ withTooltips && tooltipOpen && tooltipData && (
 							<TooltipInPortal top={ tooltipTop || 0 } left={ tooltipLeft || 0 }>
-								<div role="tooltip">{ renderTooltip( { tooltipData } ) }</div>
+								<div className={ CHART_SCOPE_CLASS } role="tooltip">
+									{ renderTooltip( { tooltipData } ) }
+								</div>
 							</TooltipInPortal>
 						) }
 						{ htmlChildren }
@@ -424,10 +425,7 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 								>
 									{ allSegmentsHidden ? (
 										<SvgEmptyState x={ 0 } y={ -radius / 2 } width={ width } height={ height }>
-											{ __(
-												'All segments are hidden. Click legend items to show data.',
-												'jetpack-charts'
-											) }
+											{ getAllHiddenMessage( legendInteractive, 'segments' ) }
 										</SvgEmptyState>
 									) : (
 										<>
@@ -490,7 +488,7 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 					);
 				} }
 			</ChartLayout>
-		</SingleChartContext.Provider>
+		</ChartInstanceContext.Provider>
 	);
 };
 

package/src/charts/private/{single-chart-context/single-chart-context.tsx → chart-instance-context/chart-instance-context.ts}

@@ -15,11 +15,7 @@ export interface ChartInstanceContextValue {
 	chartRef?: React.RefObject< ChartInstanceRef >;
 	chartWidth?: number;
 	chartHeight?: number;
+	isSeriesVisible?: ( seriesLabel: string ) => boolean;
 }
 
 export const ChartInstanceContext = createContext< ChartInstanceContextValue | null >( null );
-
-// Backward compatibility exports
-export const SingleChartContext = ChartInstanceContext;
-export type SingleChartContextValue = ChartInstanceContextValue;
-export type SingleChartRef = ChartInstanceRef;

package/src/charts/private/chart-instance-context/index.ts

@@ -0,0 +1,3 @@
+export { ChartInstanceContext } from './chart-instance-context';
+export { useChartInstanceContext } from './use-chart-instance-context';
+export type { ChartInstanceContextValue, ChartInstanceRef } from './chart-instance-context';

package/src/charts/private/{single-chart-context/use-single-chart-context.ts → chart-instance-context/use-chart-instance-context.ts}

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { ChartInstanceContext, type ChartInstanceContextValue } from './single-chart-context';
+import { ChartInstanceContext, type ChartInstanceContextValue } from './chart-instance-context';
 
 export const useChartInstanceContext = (): ChartInstanceContextValue => {
 	const context = useContext( ChartInstanceContext );
@@ -8,5 +8,3 @@ export const useChartInstanceContext = (): ChartInstanceContextValue => {
 	}
 	return context;
 };
-
-export const useSingleChartContext = useChartInstanceContext;

package/src/charts/private/svg-empty-state/get-all-hidden-message.ts

@@ -0,0 +1,41 @@
+import { _x } from '@wordpress/i18n';
+
+export type HiddenChartItemType = 'series' | 'segments';
+
+/**
+ * Return the empty-state message for a chart whose items are all hidden.
+ *
+ * Each translation call has a distinct gettext context. This prevents Terser
+ * from folding conditional calls into one call with a conditional msgid, which
+ * would make the strings unavailable to static translation extraction.
+ *
+ * @param interactive - Whether the legend can be used to show hidden items.
+ * @param itemType    - The chart-specific name for its data items.
+ * @return The translated empty-state message.
+ */
+export const getAllHiddenMessage = (
+	interactive: boolean,
+	itemType: HiddenChartItemType
+): string => {
+	if ( itemType === 'segments' ) {
+		if ( interactive ) {
+			return _x(
+				'All segments are hidden. Click legend items to show data.',
+				'chart empty state: interactive segments',
+				'jetpack-charts'
+			);
+		}
+
+		return _x( 'All segments are hidden.', 'chart empty state: segments', 'jetpack-charts' );
+	}
+
+	if ( interactive ) {
+		return _x(
+			'All series are hidden. Click legend items to show data.',
+			'chart empty state: interactive series',
+			'jetpack-charts'
+		);
+	}
+
+	return _x( 'All series are hidden.', 'chart empty state: series', 'jetpack-charts' );
+};

package/src/charts/private/svg-empty-state/index.ts

@@ -1 +1,2 @@
 export { SvgEmptyState } from './svg-empty-state';
+export { getAllHiddenMessage } from './get-all-hidden-message';

package/src/charts/private/svg-empty-state/svg-empty-state.module.scss

@@ -1,5 +1,5 @@
 .svg-empty-state {
 	text-align: center;
 	font-size: var(--wpds-typography-font-size-md, 13px);
-	color: var(--a8c-charts-color-label-secondary, var(--wpds-color-foreground-content-neutral-weak, #707070));
+	color: var(--a8c-charts-color-label-secondary);
 }

package/src/charts/private/svg-empty-state/test/get-all-hidden-message.test.ts

@@ -0,0 +1,15 @@
+import { getAllHiddenMessage } from '../get-all-hidden-message';
+
+describe( 'getAllHiddenMessage', () => {
+	it.each( [
+		[ false, 'series', 'All series are hidden.' ],
+		[ true, 'series', 'All series are hidden. Click legend items to show data.' ],
+		[ false, 'segments', 'All segments are hidden.' ],
+		[ true, 'segments', 'All segments are hidden. Click legend items to show data.' ],
+	] as const )(
+		'returns the expected message for interactive=%s %s',
+		( interactive, type, message ) => {
+			expect( getAllHiddenMessage( interactive, type ) ).toBe( message );
+		}
+	);
+} );

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

@@ -1,4 +1,6 @@
 import { render, screen } from '@testing-library/react';
+import { useContext } from 'react';
+import { ChartScopeContext } from '../../../../providers/chart-scope';
 import { withResponsive } from '../index';
 import type { BaseChartProps } from '../../../../types';
 
@@ -311,4 +313,18 @@ describe( 'withResponsive', () => {
 			expect( screen.getByTestId( 'responsive-container' ) ).toBeInTheDocument();
 		} );
 	} );
+
+	it( 'publishes the responsive wrapper element as the chart scope', () => {
+		// The catalog is declared on the GlobalChartsProvider wrapper (or a standalone component's own element), not on every chart root, so this wrapper doesn't carry a scope class itself — but it must still be the element the JS bridge resolves scoped CSS variables against, via ChartScopeContext, so it picks up any override set inside the provider tree the same way a CSS-painted sibling would.
+		const ScopeProbe = () => {
+			const scopeNode = useContext( ChartScopeContext );
+			return <span data-testid="scope-probe">{ scopeNode?.dataset.testid }</span>;
+		};
+		const Chart: ( props: BaseChartProps ) => JSX.Element = () => <ScopeProbe />;
+		const Wrapped = withResponsive( Chart );
+
+		render( <Wrapped data={ [] } /> );
+
+		expect( screen.getByTestId( 'scope-probe' ) ).toHaveTextContent( 'responsive-wrapper' );
+	} );
 } );

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

@@ -1,6 +1,7 @@
 import { useParentSize } from '@visx/responsive';
 import clsx from 'clsx';
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { ChartScopeContext } from '../../../providers/chart-scope';
 import styles from './with-responsive.module.scss';
 import type { BaseChartProps } from '../../../types';
 import type { ComponentType } from 'react';
@@ -66,6 +67,9 @@ export function withResponsive< T extends Exclude< BaseChartProps< unknown >, 'o
 
 		const hasAspectRatio = aspectRatio !== undefined && aspectRatio > 0;
 
+		// The context needs a re-render when the node attaches; wrapperRef alone cannot provide that, so mirror the node into state from the same callback ref.
+		const [ scopeNode, setScopeNode ] = useState< HTMLDivElement | null >( null );
+
 		// Keep our own handle on the wrapper so we can read its live height below, and
 		// still hand the node to useParentSize's ref (a callback ref in practice; guard
 		// the object-ref shape too).
@@ -73,6 +77,7 @@ export function withResponsive< T extends Exclude< BaseChartProps< unknown >, 'o
 		const setWrapperRef = useCallback(
 			( node: HTMLDivElement | null ) => {
 				wrapperRef.current = node;
+				setScopeNode( node );
 				if ( typeof parentRef === 'function' ) {
 					parentRef( node );
 				} else if ( parentRef ) {
@@ -160,17 +165,19 @@ export function withResponsive< T extends Exclude< BaseChartProps< unknown >, 'o
 					...( height !== undefined ? { height } : null ),
 				} }
 			>
-				{ hasAspectRatio ? (
-					<div
-						data-testid="responsive-content"
-						className={ styles.content }
-						style={ { width: boxWidth, height: boxHeight } }
-					>
-						{ wrappedComponent }
-					</div>
-				) : (
-					wrappedComponent
-				) }
+				<ChartScopeContext.Provider value={ scopeNode }>
+					{ hasAspectRatio ? (
+						<div
+							data-testid="responsive-content"
+							className={ styles.content }
+							style={ { width: boxWidth, height: boxHeight } }
+						>
+							{ wrappedComponent }
+						</div>
+					) : (
+						wrappedComponent
+					) }
+				</ChartScopeContext.Provider>
 			</div>
 		);
 	};

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

@@ -2,7 +2,7 @@ import { act, render, renderHook, screen, waitFor } from '@testing-library/react
 import userEvent from '@testing-library/user-event';
 import { useCallback, useRef, useState } from 'react';
 import { useXZoom, ZoomResetButton } from '../index';
-import type { SingleChartRef } from '../../single-chart-context';
+import type { ChartInstanceRef } from '../../chart-instance-context';
 import type { EventHandlerParams } from '@visx/xychart';
 import type { KeyboardEvent as ReactKeyboardEvent } from 'react';
 
@@ -23,7 +23,7 @@ const makeChartRef = (
 			getScales: () => ( scale ? { xScale: scale, yScale: scale } : null ),
 			getChartDimensions: () => ( { width: 0, height: 0, margin: {} } ),
 		},
-	} ) as unknown as ReturnType< typeof useRef< SingleChartRef > >;
+	} ) as unknown as ReturnType< typeof useRef< ChartInstanceRef > >;
 
 const makeParams = ( x: number ): EventHandlerParams< object > =>
 	( {

package/src/charts/private/x-zoom/x-zoom.module.scss

@@ -3,9 +3,9 @@
 	// The selection's translucency lives in the SVG opacity properties so
 	// the colors themselves can come straight from WPDS tokens.
 	&__selection {
-		fill: var(--a8c-charts-color-zoom-selection, var(--wpds-color-background-interactive-brand-strong, #3858e9));
+		fill: var(--a8c-charts-color-zoom-selection);
 		fill-opacity: 0.16;
-		stroke: var(--a8c-charts-color-zoom-selection-stroke, var(--wpds-color-stroke-interactive-brand, #3858e9));
+		stroke: var(--a8c-charts-color-zoom-selection-stroke);
 		stroke-opacity: 0.65;
 		stroke-width: var(--wpds-border-width-xs, 1px);
 		pointer-events: none;
@@ -29,7 +29,7 @@
 		// through it. Scoped to the rest state so the WPDS
 		// hover/active/focus backgrounds still apply.
 		&:not(:hover, :active, :focus) {
-			background-color: var(--a8c-charts-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
+			background-color: var(--a8c-charts-color-surface);
 		}
 	}
 }

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

@@ -3,7 +3,7 @@ import { __ } from '@wordpress/i18n';
 import { IconButton } from '@wordpress/ui';
 import { useCallback, useContext, useMemo, useState } from 'react';
 import styles from './x-zoom.module.scss';
-import type { SingleChartRef } from '../single-chart-context';
+import type { ChartInstanceRef } from '../chart-instance-context';
 import type { AxisScale } from '@visx/axis';
 import type { EventHandlerParams } from '@visx/xychart';
 import type { KeyboardEvent, ReactNode, RefObject } from 'react';
@@ -38,7 +38,7 @@ export function useXZoom< T extends Date | number = Date >( {
 	userHandlers,
 }: {
 	enabled: boolean;
-	chartRef: RefObject< SingleChartRef | null >;
+	chartRef: RefObject< ChartInstanceRef | null >;
 	userHandlers?: {
 		onPointerDown?: PointerHandler;
 		onPointerMove?: PointerHandler;

package/src/components/legend/legend.tsx

@@ -1,5 +1,5 @@
 import { useContext, useMemo, forwardRef } from 'react';
-import { SingleChartContext } from '../../charts/private/single-chart-context';
+import { ChartInstanceContext } from '../../charts/private/chart-instance-context';
 import { GlobalChartsContext } from '../../providers';
 import { BaseLegend } from './private';
 import type { LegendProps } from './types';
@@ -20,11 +20,11 @@ export const Legend = forwardRef< HTMLDivElement, LegendProps >(
 	( { chartId, items, shape, ...props }, ref ) => {
 		// Get context but don't throw if it doesn't exist
 		const context = useContext( GlobalChartsContext );
-		const singleChartContext = useContext( SingleChartContext );
+		const chartInstanceContext = useContext( ChartInstanceContext );
 
 		// When chartId is used, it is standalone mode
-		// When chartId is not provided, we use the context's chartId, meaning it is in a single chart context
-		const contextChartId = chartId ?? singleChartContext?.chartId;
+		// When chartId is not provided, we use the context's chartId, meaning it is inside a chart instance
+		const contextChartId = chartId ?? chartInstanceContext?.chartId;
 
 		const chartData = useMemo(
 			() => ( contextChartId && context ? context.getChartData( contextChartId ) : undefined ),

package/src/components/legend/private/base-legend.module.scss

@@ -54,6 +54,6 @@
 }
 
 .legend-item-value {
-	font-weight: var(--wpds-typography-font-weight-emphasis, 499);
+	font-weight: var(--wpds-typography-font-weight-emphasis, 600);
 	flex-shrink: 0; // Prevent value from shrinking when text is ellipsized
 }

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

@@ -1,6 +1,7 @@
 import { Group } from '@visx/group';
 import { LegendItem, LegendLabel, LegendOrdinal, LegendShape } from '@visx/legend';
 import { scaleOrdinal } from '@visx/scale';
+import { _x, sprintf } from '@wordpress/i18n';
 import { Stack } from '@wordpress/ui';
 import clsx from 'clsx';
 import {
@@ -11,11 +12,13 @@ import {
 	useCallback,
 	useContext,
 } from 'react';
+import { ChartInstanceContext } from '../../../charts/private/chart-instance-context';
 import { useTextTruncation } from '../../../hooks';
 import { GlobalChartsContext, useGlobalChartsTheme } from '../../../providers';
+import { useStandaloneScopeClass } from '../../../providers/chart-scope';
 import { valueOrIdentity, valueOrIdentityString, labelTransformFactory } from '../utils';
 import styles from './base-legend.module.scss';
-import type { BaseLegendProps } from '../types';
+import type { BaseLegendItem, BaseLegendProps } from '../types';
 
 const ALIGNMENT_TO_FLEX = {
 	start: 'flex-start',
@@ -57,6 +60,52 @@ const LegendText = ( {
 	);
 };
 
+// Interactive items get a toggle affordance; non-interactive items only need a label
+// when hidden, since a visible item's own text already serves as its accessible name.
+const getLegendItemAriaLabel = (
+	text: string,
+	value: BaseLegendItem[ 'value' ],
+	visible: boolean,
+	interactive: boolean
+) => {
+	const accessibleText =
+		value != null && value !== ''
+			? sprintf(
+					/* translators: 1: legend item label; 2: legend item value. */
+					_x( '%1$s, %2$s', 'legend item label and value', 'jetpack-charts' ),
+					text,
+					String( value )
+			  )
+			: text;
+
+	if ( interactive ) {
+		if ( visible ) {
+			return sprintf(
+				/* translators: %s: legend item label (e.g. a series or segment name) */
+				_x(
+					'%s: visible. Toggle visibility.',
+					'visible interactive legend item',
+					'jetpack-charts'
+				),
+				accessibleText
+			);
+		}
+		return sprintf(
+			/* translators: %s: legend item label (e.g. a series or segment name) */
+			_x( '%s: hidden. Toggle visibility.', 'hidden interactive legend item', 'jetpack-charts' ),
+			accessibleText
+		);
+	}
+	if ( visible ) {
+		return undefined;
+	}
+	return sprintf(
+		/* translators: %s: legend item label (e.g. a series or segment name) */
+		_x( '%s: hidden', 'hidden non-interactive legend item', 'jetpack-charts' ),
+		accessibleText
+	);
+};
+
 /*
  * Base legend component that displays color-coded items with labels based on visx LegendOrdinal.
  * We avoid using LegendOrdinal directly to enable support for advanced features such as interactivity.
@@ -102,6 +151,8 @@ export const BaseLegend: ForwardRefExoticComponent<
 
 		const theme = useGlobalChartsTheme();
 		const context = useContext( GlobalChartsContext );
+		const chartInstanceContext = useContext( ChartInstanceContext );
+		const standaloneScopeClass = useStandaloneScopeClass();
 
 		const legendScale = scaleOrdinal( {
 			domain: items.map( item => item.label ),
@@ -118,29 +169,28 @@ export const BaseLegend: ForwardRefExoticComponent<
 		const handleLegendClick = useCallback(
 			( seriesLabels: string[] ) => {
 				if ( interactive && chartId && context ) {
-					// Converge the whole group on the representative's next state: only toggle series that
-					// currently match it, so a desynced group (e.g. one member hidden programmatically)
-					// ends up uniformly hidden/shown after one click.
 					const representativeVisible = context.isSeriesVisible( chartId, seriesLabels[ 0 ] );
-					seriesLabels.forEach( label => {
-						if ( context.isSeriesVisible( chartId, label ) === representativeVisible ) {
-							context.toggleSeriesVisibility( chartId, label );
-						}
-					} );
+					seriesLabels.forEach( label =>
+						context.setSeriesVisibility( chartId, label, ! representativeVisible )
+					);
 				}
 			},
 			[ interactive, chartId, context ]
 		);
 
-		// Check if a series is visible
+		// Visibility is display state, not interaction state: a series hidden
+		// programmatically must read as hidden even when the legend cannot be clicked.
 		const isSeriesVisible = useCallback(
 			( seriesLabel: string ) => {
-				if ( ! interactive || ! chartId || ! context ) {
+				if ( chartInstanceContext?.isSeriesVisible ) {
+					return chartInstanceContext.isSeriesVisible( seriesLabel );
+				}
+				if ( ! chartId || ! context ) {
 					return true;
 				}
 				return context.isSeriesVisible( chartId, seriesLabel );
 			},
-			[ interactive, chartId, context ]
+			[ chartId, chartInstanceContext, context ]
 		);
 
 		// Create event handlers to avoid inline arrow functions
@@ -187,9 +237,9 @@ export const BaseLegend: ForwardRefExoticComponent<
 						align={ orientation === 'vertical' ? flexAlignment : undefined }
 						justify={ orientation === 'horizontal' ? flexAlignment : undefined }
 						wrap={ orientation === 'horizontal' ? 'wrap' : undefined }
-						role="list"
+						role={ interactive ? undefined : 'list' }
 						data-testid={ `legend-${ orientation }` }
-						className={ clsx( styles.legend, className ) }
+						className={ clsx( standaloneScopeClass, styles.legend, className ) }
 						style={ theme.legend?.containerStyles }
 					>
 						{ labels.map( ( label, i ) => {
@@ -221,14 +271,15 @@ export const BaseLegend: ForwardRefExoticComponent<
 									}
 									onClick={ handleClick }
 									onKeyDown={ handleKeyDown }
-									role={ interactive ? 'button' : undefined }
+									role={ interactive ? 'button' : 'listitem' }
 									tabIndex={ interactive ? 0 : undefined }
 									aria-pressed={ interactive ? visible : undefined }
-									aria-label={
+									aria-label={ getLegendItemAriaLabel(
+										label.text,
+										matchedItem?.value,
+										visible,
 										interactive
-											? `${ label.text }: ${ visible ? 'visible' : 'hidden' }. Toggle visibility.`
-											: undefined
-									}
+									) }
 								>
 									{ items[ i ]?.renderGlyph ? (
 										<svg