@automattic/charts 4.6.0 → 4.7.0

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

@@ -140,54 +140,26 @@ describe( 'LineChart', () => {
 			} );
 		}
 	);
-	test.each( [
-		[
-			{ color: 'white' },
-			'rgb(255, 255, 255)',
-			'var(--a8c-charts-color-tooltip-surface, rgb(0 0 0 / 85%))',
-			{ color: 'rgb(255, 255, 255)' },
-		],
-		[ { backgroundColor: 'white' }, 'var(--a8c-charts-color-label)', 'rgb(255, 255, 255)', {} ],
-		[ { background: 'white' }, 'var(--a8c-charts-color-label)', 'white', {} ],
-		[
-			{ color: 'white', background: 'black' },
-			'rgb(255, 255, 255)',
-			'black',
-			{ color: 'rgb(255, 255, 255)' },
-		],
-	] )(
-		'applies directional tooltip color defaults: %j',
-		async ( tooltipStyle, color, background, containerColorStyle ) => {
-			const user = userEvent.setup();
-			const defaults = document.createElement( 'style' );
-			defaults.textContent = `.line-chart__tooltip {
-				color: var(--a8c-charts-color-label);
-				background: var(--a8c-charts-color-surface);
-			}`;
-			renderWithTheme( { tooltipStyle } );
-			const chart = screen.getByTestId( 'line-chart' );
-			chart.appendChild( defaults );
-			chart.style.setProperty( '--a8c-charts-color-label', '#000' );
-			chart.style.setProperty( '--a8c-charts-color-label-axis', '#aaa' );
-			chart.style.setProperty( '--a8c-charts-color-surface', '#fff' );
-			screen.getByRole( 'grid', { name: /line chart/i } ).focus();
-			await user.keyboard( '{ArrowRight}' );
+	test( 'passes a color-only tooltipStyle through with no background added', async () => {
+		const user = userEvent.setup();
+		renderWithTheme( { tooltipStyle: { color: 'white' } } );
+		screen.getByRole( 'grid', { name: /line chart/i } ).focus();
+		await user.keyboard( '{ArrowRight}' );
 
-			const content = screen.getByTestId( 'line-chart-tooltip-content' );
-			expect( content ).toHaveStyle( {
-				color,
-				[ 'backgroundColor' in tooltipStyle ? 'background-color' : 'background' ]:
-					'background' in tooltipStyle || 'backgroundColor' in tooltipStyle
-						? background
-						: 'var(--a8c-charts-color-surface)',
-			} );
-			const container = screen.getByTestId( 'bounded-tooltip' );
-			expect( container ).toHaveStyle( {
-				...containerColorStyle,
-				[ 'background' in tooltipStyle ? 'background' : 'background-color' ]: background,
-			} );
-		}
-	);
+		const box = screen.getByTestId( 'bounded-tooltip' );
+		expect( box ).toHaveStyle( { color: 'rgb(255, 255, 255)' } );
+		expect( box ).not.toHaveAttribute( 'style', expect.stringContaining( 'background' ) );
+	} );
+
+	test( 'paints a tooltipStyle background on the box, not on the default content', async () => {
+		const user = userEvent.setup();
+		renderWithTheme( { tooltipStyle: { background: 'black' } } );
+		screen.getByRole( 'grid', { name: /line chart/i } ).focus();
+		await user.keyboard( '{ArrowRight}' );
+
+		expect( screen.getByTestId( 'bounded-tooltip' ) ).toHaveStyle( { background: 'black' } );
+		expect( screen.getByTestId( 'line-chart-tooltip-content' ) ).not.toHaveAttribute( 'style' );
+	} );
 
 	test( 'preserves the existing tooltip colors for noncolor overrides', async () => {
 		const user = userEvent.setup();

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

@@ -22,5 +22,14 @@
 		&--on-light {
 			fill: var(--a8c-charts-color-label, #1e1e1e);
 		}
+
+		// Neither role reaches AA on this slice; see pickLabelTextColor.
+		&--black {
+			fill: #000;
+		}
+
+		&--white {
+			fill: #fff;
+		}
 	}
 }

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

@@ -3,6 +3,7 @@ import { Pie } from '@visx/shape';
 import { useTooltip } from '@visx/tooltip';
 import { color as d3Color } from '@visx/vendor/d3-color';
 import clsx from 'clsx';
+import isEqual from 'fast-deep-equal';
 import { useCallback, useContext, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { Legend, useChartLegendItems } from '../../components/legend';
 import { BaseTooltip } from '../../components/tooltip';
@@ -21,20 +22,14 @@ import {
 	GlobalChartsContext,
 } from '../../providers';
 import { CATALOG_POINTERS } from '../../providers/chart-context/private/catalog-pointers';
-import { contrastRatio } from '../../providers/chart-context/private/perceptual-color';
 import { useStandaloneScopeClass } from '../../providers/chart-scope';
-import {
-	attachSubComponents,
-	createCssVariableResolver,
-	isValidHexColor,
-	normalizeColorToHex,
-	resolveFontSize,
-} from '../../utils';
+import { attachSubComponents, createCssVariableResolver, resolveFontSize } from '../../utils';
 import { getStringWidth } from '../../visx/text';
 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 { pickLabelTextColor, resolveLabelRoles } from '../private/label-text-color';
 import { RadialWipeAnimation } from '../private/radial-wipe-animation/';
 import { getAllHiddenMessage, SvgEmptyState } from '../private/svg-empty-state';
 import { withResponsive, ResponsiveConfig } from '../private/with-responsive';
@@ -47,7 +42,8 @@ import type {
 	Optional,
 } from '../../types';
 import type { ChartComponentWithComposition } from '../private/chart-composition';
-import type { SVGProps, MouseEvent, ReactNode, FC } from 'react';
+import type { LabelRoles, LabelTextColor } from '../private/label-text-color';
+import type { JSX, SVGProps, MouseEvent, ReactNode, FC } from 'react';
 
 /**
  * Parameters passed to the renderTooltip function for pie charts.
@@ -170,48 +166,12 @@ const validateData = ( data: DataPointPercentage[] ) => {
 	return { isValid: true, message: '' };
 };
 
-/**
- * The label pointers, resolved at the pie chart's own root element so JS and CSS agree on what paints.
- */
-interface ResolvedLabelPointers {
-	/** True while a label plate is set; the label text then always uses the inverse role. */
-	hasPlate: boolean;
-	labelHex: string;
-	labelInverseHex: string;
-	/** True when the inverse role is see-through, so only the `label` role can be seen on a fill. */
-	isInverseSeeThrough: boolean;
-}
-
-/**
- * Whether a pie slice's label should use the dark `label` role instead of the default `label-inverse` role.
- *
- * A label plate always wins: the text sits on the plate, not the slice fill, so it never flips.
- * Otherwise the role that contrasts more with the resolved slice fill wins. `null` pointers (not
- * yet resolved, or labels off) keep the default inverse role.
- *
- * @param fill     - The slice's resolved fill color.
- * @param pointers - The label pointers, resolved at the chart's own root element.
- * @return Whether the label needs dark text.
- */
-const labelNeedsDarkText = ( fill: string, pointers: ResolvedLabelPointers | null ): boolean => {
-	if ( ! pointers || pointers.hasPlate ) {
-		return false;
-	}
-
-	const fillHex = normalizeColorToHex( fill );
-	if ( ! isValidHexColor( fillHex ) || ! isValidHexColor( pointers.labelHex ) ) {
-		return false;
-	}
-	if ( pointers.isInverseSeeThrough ) {
-		return true;
-	}
-	if ( ! isValidHexColor( pointers.labelInverseHex ) ) {
-		return false;
-	}
-
-	return (
-		contrastRatio( fillHex, pointers.labelHex ) > contrastRatio( fillHex, pointers.labelInverseHex )
-	);
+// `label-inverse` is the stylesheet's default, so it needs no modifier.
+const LABEL_TEXT_MODIFIER: Record< LabelTextColor, string | undefined > = {
+	label: styles[ 'pie-chart__label-text--on-light' ],
+	'label-inverse': undefined,
+	black: styles[ 'pie-chart__label-text--black' ],
+	white: styles[ 'pie-chart__label-text--white' ],
 };
 
 /**
@@ -258,7 +218,8 @@ const PieChartInternal = ( {
 	// The element the chart's own `className` lands on, so an override set there reaches this
 	// decision the same way it reaches CSS.
 	const rootRef = useRef< HTMLDivElement >( null );
-	const [ labelPointers, setLabelPointers ] = useState< ResolvedLabelPointers | null >( null );
+	// Null until read, and while a label plate is set: text on the plate keeps the inverse role.
+	const [ labelRoles, setLabelRoles ] = useState< LabelRoles | null >( null );
 
 	const onMouseLeave = useCallback( () => {
 		if ( ! withTooltips ) {
@@ -279,28 +240,11 @@ const PieChartInternal = ( {
 
 		const resolve = createCssVariableResolver( rootRef.current );
 		const rawLabelBackground = resolve( CATALOG_POINTERS.labelBackground );
-		// Hex drops alpha, so a see-through label role would win the comparison and paint nothing.
-		const rawLabel = resolve( CATALOG_POINTERS.label );
-		const isLabelOpaque = rawLabel ? d3Color( rawLabel )?.opacity === 1 : false;
-		const rawLabelInverse = resolve( CATALOG_POINTERS.labelInverse );
-		const labelInverseColor = rawLabelInverse ? d3Color( rawLabelInverse ) : null;
 		// A plate value d3 cannot parse (CSS Color 4 syntax, say) is still one CSS paints, so it counts.
 		const plateColor = rawLabelBackground ? d3Color( rawLabelBackground ) : null;
-		const next: ResolvedLabelPointers = {
-			hasPlate: rawLabelBackground ? ! plateColor || plateColor.opacity > 0 : false,
-			labelHex: isLabelOpaque ? normalizeColorToHex( CATALOG_POINTERS.label, null, resolve ) : '',
-			labelInverseHex: normalizeColorToHex( CATALOG_POINTERS.labelInverse, null, resolve ),
-			isInverseSeeThrough: labelInverseColor ? labelInverseColor.opacity < 1 : false,
-		};
-		setLabelPointers( previous =>
-			previous &&
-			previous.hasPlate === next.hasPlate &&
-			previous.labelHex === next.labelHex &&
-			previous.labelInverseHex === next.labelInverseHex &&
-			previous.isInverseSeeThrough === next.isInverseSeeThrough
-				? previous
-				: next
-		);
+		const hasPlate = rawLabelBackground ? ! plateColor || plateColor.opacity > 0 : false;
+		const next = hasPlate ? null : resolveLabelRoles( resolve );
+		setLabelRoles( previous => ( isEqual( previous, next ) ? previous : next ) );
 	}, [ showLabels, className, isColorPaletteResolved, isValid ] );
 
 	// Calculate percentages from values (single source of truth)
@@ -538,10 +482,12 @@ const PieChartInternal = ( {
 																		pointerEvents="none"
 																	/>
 																	<text
-																		className={ clsx( styles[ 'pie-chart__label-text' ], {
-																			[ styles[ 'pie-chart__label-text--on-light' ] ]:
-																				labelNeedsDarkText( fill, labelPointers ),
-																		} ) }
+																		className={ clsx(
+																			styles[ 'pie-chart__label-text' ],
+																			LABEL_TEXT_MODIFIER[
+																				pickLabelTextColor( fill, labelRoles, 'label-inverse' )
+																			]
+																		) }
 																		data-testid="pie-label"
 																		x={ centroidX }
 																		y={ centroidY }

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

@@ -187,17 +187,17 @@ describe( 'PieChart', () => {
 
 		test( "compares against a label-inverse override set on the chart's own class", () => {
 			injectedStyle = document.createElement( 'style' );
-			// Matches the slice fill exactly, so the inverse role loses to the default dark label role.
-			injectedStyle.textContent = '.overridden-pie { --a8c-charts-color-label-inverse: #1e3a8a; }';
+			// Black out-contrasts the dark label role on a light slice, where the default inverse would lose.
+			injectedStyle.textContent = '.overridden-pie { --a8c-charts-color-label-inverse: #000000; }';
 			document.head.appendChild( injectedStyle );
 
 			renderWithTheme( {
-				data: [ { label: 'Dark', value: 100, color: '#1e3a8a' } ],
+				data: [ { label: 'Light', value: 100, color: '#f5d76e' } ],
 				className: 'overridden-pie',
 			} );
 
 			const [ label ] = screen.getAllByTestId( 'pie-label' );
-			expect( label ).toHaveClass( 'pie-chart__label-text--on-light' );
+			expect( label ).not.toHaveClass( 'pie-chart__label-text--on-light' );
 		} );
 
 		test( 'keeps the inverse label color when the plate uses color syntax d3 cannot parse', () => {
@@ -239,7 +239,7 @@ describe( 'PieChart', () => {
 				.forEach( label => expect( label ).not.toHaveClass( 'pie-chart__label-text--on-light' ) );
 		} );
 
-		test( 'uses the label role on every slice when the inverse role is see-through', () => {
+		test( 'never picks a see-through inverse role, falling back to white where the label role fails', () => {
 			injectedStyle = document.createElement( 'style' );
 			injectedStyle.textContent =
 				'.clear-inverse-pie { --a8c-charts-color-label-inverse: rgba(255, 255, 255, 0); }';
@@ -247,9 +247,22 @@ describe( 'PieChart', () => {
 
 			renderWithTheme( { data: contrastData, className: 'clear-inverse-pie' } );
 
-			screen
-				.getAllByTestId( 'pie-label' )
-				.forEach( label => expect( label ).toHaveClass( 'pie-chart__label-text--on-light' ) );
+			const [ light, dark ] = screen.getAllByTestId( 'pie-label' );
+			expect( light ).toHaveClass( 'pie-chart__label-text--on-light' );
+			expect( dark ).toHaveClass( 'pie-chart__label-text--white' );
+		} );
+
+		test( 'falls back to black or white on a slice where neither label role reaches AA', () => {
+			renderWithTheme( {
+				data: [
+					{ label: 'Mid-light', value: 50, color: '#516dec' },
+					{ label: 'Mid-dark', value: 50, color: '#4663ea' },
+				],
+			} );
+
+			const [ midLight, midDark ] = screen.getAllByTestId( 'pie-label' );
+			expect( midLight ).toHaveClass( 'pie-chart__label-text--black' );
+			expect( midDark ).toHaveClass( 'pie-chart__label-text--white' );
 		} );
 
 		test( 'keeps the inverse label color when the fill cannot be resolved', () => {

package/src/charts/private/chart-composition/chart-html.tsx

@@ -1,4 +1,4 @@
-import type { FC, PropsWithChildren } from 'react';
+import type { JSX, FC, PropsWithChildren } from 'react';
 
 /**
  * Compound component for HTML children in charts.

package/src/charts/private/chart-composition/chart-svg.tsx

@@ -1,4 +1,4 @@
-import type { FC, PropsWithChildren } from 'react';
+import type { JSX, FC, PropsWithChildren } from 'react';
 
 /**
  * Compound component for SVG children in charts.

package/src/charts/private/label-text-color.ts

@@ -0,0 +1,116 @@
+import { color as d3Color } from '@visx/vendor/d3-color';
+import isEqual from 'fast-deep-equal';
+import { CATALOG_POINTERS } from '../../providers/chart-context/private/catalog-pointers';
+import { MIN_LABEL_CONTRAST } from '../../providers/chart-context/private/palette-generator';
+import {
+	blendRgb,
+	hexToRgb,
+	luminanceContrastRatio,
+	rgbLuminance,
+} from '../../providers/chart-context/private/perceptual-color';
+import { isValidHexColor, normalizeColorToHex } from '../../utils/color-utils';
+import type { Rgb } from '../../providers/chart-context/private/perceptual-color';
+
+// The browser paints the fill on 8-bit channels, which can cost a mid-tone ~0.03 of contrast.
+const ROUNDING_HEADROOM = 0.05;
+
+/** Which color a label drawn on a fill paints with: one of the two catalog roles, or the black/white floor. */
+export type LabelTextColor = 'label' | 'label-inverse' | 'black' | 'white';
+
+/** A label role as the chart's own element resolves it. `unreadable` keeps the raw value, which CSS may still paint. */
+export type ResolvedRole =
+	{ kind: 'color'; rgb: Rgb; alpha: number } | { kind: 'unreadable'; raw: string | null };
+
+export interface LabelRoles {
+	label: ResolvedRole;
+	labelInverse: ResolvedRole;
+}
+
+const resolveRole = (
+	pointer: string,
+	resolve: ( value: string ) => string | null
+): ResolvedRole => {
+	const raw = resolve( pointer );
+	// d3 reads no CSS Color 4 syntax (`rgb(0 0 0)`, `oklch()`), though the browser paints it.
+	const parsed = raw ? d3Color( raw ) : null;
+	if ( ! parsed ) {
+		return { kind: 'unreadable', raw };
+	}
+	// d3 gives `transparent` NaN channels; with no alpha they never reach the composite anyway.
+	const { r, g, b } = parsed.opacity > 0 ? parsed.rgb() : { r: 0, g: 0, b: 0 };
+	return { kind: 'color', rgb: [ r, g, b ], alpha: parsed.opacity };
+};
+
+/**
+ * Reads both label roles at the element the label text inherits from, so JS and CSS agree on what paints.
+ *
+ * @param resolve - A CSS variable resolver bound to that element.
+ * @return The resolved label roles.
+ */
+export const resolveLabelRoles = ( resolve: ( value: string ) => string | null ): LabelRoles => ( {
+	label: resolveRole( CATALOG_POINTERS.label, resolve ),
+	labelInverse: resolveRole( CATALOG_POINTERS.labelInverse, resolve ),
+} );
+
+// Text with alpha shows the fill through it, so it is measured as the blend the browser paints.
+const roleContrast = ( role: ResolvedRole, fill: Rgb, fillLuminance: number ): number => {
+	if ( role.kind === 'unreadable' ) {
+		return 0;
+	}
+	return luminanceContrastRatio(
+		fillLuminance,
+		rgbLuminance( blendRgb( role.rgb, fill, role.alpha ) )
+	);
+};
+
+/**
+ * Picks the label color for text drawn on a fill: the role that contrasts more, or black/white when neither reaches AA.
+ *
+ * Both roles set to one color is a host's choice to keep that color, so it never falls back.
+ *
+ * @param fill        - The fill the text sits on, as unrounded sRGB channels.
+ * @param roles       - The label roles resolved at the chart's element, or null before they are read.
+ * @param defaultRole - The role the chart's stylesheet paints when nothing can be decided.
+ * @return The color the label should paint with.
+ */
+export const pickLabelTextColorForFill = (
+	fill: Rgb,
+	roles: LabelRoles | null,
+	defaultRole: 'label' | 'label-inverse'
+): LabelTextColor => {
+	if ( ! roles || isEqual( roles.label, roles.labelInverse ) ) {
+		return defaultRole;
+	}
+
+	const fillLuminance = rgbLuminance( fill );
+	const labelContrast = roleContrast( roles.label, fill, fillLuminance );
+	const inverseContrast = roleContrast( roles.labelInverse, fill, fillLuminance );
+	if ( Math.max( labelContrast, inverseContrast ) >= MIN_LABEL_CONTRAST + ROUNDING_HEADROOM ) {
+		return labelContrast > inverseContrast ? 'label' : 'label-inverse';
+	}
+
+	// On any opaque fill one of these reaches at least 4.58:1.
+	return luminanceContrastRatio( fillLuminance, 0 ) > luminanceContrastRatio( fillLuminance, 1 )
+		? 'black'
+		: 'white';
+};
+
+/**
+ * `pickLabelTextColorForFill` for a fill given as a color.
+ *
+ * @param fill        - The fill, in any color syntax `normalizeColorToHex` reads.
+ * @param roles       - The label roles resolved at the chart's element, or null before they are read.
+ * @param defaultRole - The role the chart's stylesheet paints when nothing can be decided.
+ * @return The color the label should paint with.
+ */
+export const pickLabelTextColor = (
+	fill: string,
+	roles: LabelRoles | null,
+	defaultRole: 'label' | 'label-inverse'
+): LabelTextColor => {
+	const fillHex = normalizeColorToHex( fill );
+	if ( ! isValidHexColor( fillHex ) ) {
+		return defaultRole;
+	}
+	return pickLabelTextColorForFill( hexToRgb( fillHex ), roles, defaultRole );
+};

package/src/charts/private/radial-wipe-animation/radial-wipe-animation.tsx

@@ -9,6 +9,8 @@
  * - A white mask makes the area visible, while a black mask makes the area invisible.
  */
 
+import type { JSX } from 'react';
+
 type Angle = `${ number }deg` | `${ number }rad` | `${ number }grad` | `${ number }turn` | 0 | '0';
 
 /**

package/src/charts/private/svg-empty-state/svg-empty-state.tsx

@@ -1,6 +1,6 @@
 import { Center } from '../center';
 import styles from './svg-empty-state.module.scss';
-import type { FC, ReactNode } from 'react';
+import type { JSX, FC, ReactNode } from 'react';
 
 interface SvgEmptyStateProps {
 	/** X coordinate of the center point */

package/src/charts/private/test/label-text-color.test.ts

@@ -0,0 +1,191 @@
+import { MIN_LABEL_CONTRAST } from '../../../providers/chart-context/private/palette-generator';
+import {
+	blendRgb,
+	hexToRgb,
+	luminanceContrastRatio,
+	rgbLuminance,
+} from '../../../providers/chart-context/private/perceptual-color';
+import {
+	pickLabelTextColor,
+	pickLabelTextColorForFill,
+	resolveLabelRoles,
+} from '../label-text-color';
+import type { Rgb } from '../../../providers/chart-context/private/perceptual-color';
+import type { LabelRoles, LabelTextColor, ResolvedRole } from '../label-text-color';
+
+const color = ( hex: string, alpha = 1 ): ResolvedRole => ( {
+	kind: 'color',
+	rgb: hexToRgb( hex ),
+	alpha,
+} );
+
+const unreadable = ( raw: string | null ): ResolvedRole => ( { kind: 'unreadable', raw } );
+
+const DEFAULT_ROLES: LabelRoles = { label: color( '#1e1e1e' ), labelInverse: color( '#f0f0f0' ) };
+
+const WHITE = hexToRgb( '#ffffff' );
+const MID_BLUE = hexToRgb( '#3858e9' );
+
+describe( 'resolveLabelRoles', () => {
+	const resolverFor =
+		( label: string | null, labelInverse: string | null ) =>
+		( value: string ): string | null =>
+			value.includes( '--a8c-charts-color-label-inverse' ) ? labelInverse : label;
+
+	it( 'resolves opaque roles in any syntax d3 reads', () => {
+		expect( resolveLabelRoles( resolverFor( '#1E1E1E', 'rgb(240, 240, 240)' ) ) ).toEqual(
+			DEFAULT_ROLES
+		);
+	} );
+
+	it( "keeps a role's alpha", () => {
+		expect( resolveLabelRoles( resolverFor( 'rgba(30, 30, 30, 0.87)', '#f0f0f0' ) ).label ).toEqual(
+			color( '#1e1e1e', 0.87 )
+		);
+	} );
+
+	it( 'reads transparent as a role with no alpha', () => {
+		expect( resolveLabelRoles( resolverFor( 'transparent', '#f0f0f0' ) ).label ).toEqual(
+			color( '#000000', 0 )
+		);
+	} );
+
+	it( 'keeps the raw value of a role it cannot read', () => {
+		expect( resolveLabelRoles( resolverFor( null, 'oklch(98% 0 0)' ) ) ).toEqual( {
+			label: unreadable( null ),
+			labelInverse: unreadable( 'oklch(98% 0 0)' ),
+		} );
+	} );
+} );
+
+describe( 'pickLabelTextColorForFill', () => {
+	it( 'keeps the default role before the roles are read', () => {
+		expect( pickLabelTextColorForFill( MID_BLUE, null, 'label' ) ).toBe( 'label' );
+		expect( pickLabelTextColorForFill( MID_BLUE, null, 'label-inverse' ) ).toBe( 'label-inverse' );
+	} );
+
+	it( 'picks the role that contrasts more when it reaches AA', () => {
+		expect( pickLabelTextColorForFill( WHITE, DEFAULT_ROLES, 'label-inverse' ) ).toBe( 'label' );
+		expect( pickLabelTextColorForFill( MID_BLUE, DEFAULT_ROLES, 'label' ) ).toBe( 'label-inverse' );
+	} );
+
+	it( 'falls back to black or white when neither role reaches AA', () => {
+		expect( pickLabelTextColorForFill( hexToRgb( '#516dec' ), DEFAULT_ROLES, 'label' ) ).toBe(
+			'black'
+		);
+		expect( pickLabelTextColorForFill( hexToRgb( '#4663ea' ), DEFAULT_ROLES, 'label' ) ).toBe(
+			'white'
+		);
+	} );
+
+	it( 'measures a translucent role as it paints over the fill', () => {
+		// Opaque, this label would read 16:1 on white; at 30% it paints a pale gray that fails AA.
+		const faintLabel: LabelRoles = {
+			label: color( '#1e1e1e', 0.3 ),
+			labelInverse: color( '#f0f0f0' ),
+		};
+
+		expect( pickLabelTextColorForFill( WHITE, faintLabel, 'label-inverse' ) ).toBe( 'black' );
+	} );
+
+	it( 'never picks a fully transparent role', () => {
+		const clearLabel: LabelRoles = {
+			label: color( '#000000', 0 ),
+			labelInverse: color( '#f0f0f0' ),
+		};
+
+		expect( pickLabelTextColorForFill( WHITE, clearLabel, 'label' ) ).toBe( 'black' );
+	} );
+
+	it( 'treats two different translucent roles as two colors', () => {
+		const translucent: LabelRoles = {
+			label: color( '#000000', 0.87 ),
+			labelInverse: color( '#ffffff', 0.9 ),
+		};
+
+		expect( pickLabelTextColorForFill( MID_BLUE, translucent, 'label' ) ).toBe( 'label-inverse' );
+	} );
+
+	it( 'uses a readable role when the other cannot be read, else black or white', () => {
+		const unreadableInverse: LabelRoles = {
+			label: color( '#1e1e1e' ),
+			labelInverse: unreadable( 'rgb(255 255 255)' ),
+		};
+
+		expect( pickLabelTextColorForFill( WHITE, unreadableInverse, 'label-inverse' ) ).toBe(
+			'label'
+		);
+		expect( pickLabelTextColorForFill( MID_BLUE, unreadableInverse, 'label' ) ).toBe( 'white' );
+	} );
+
+	it.each( [
+		[ 'readable', color( '#767676' ) ],
+		[ 'unreadable', unreadable( 'oklch(55% 0 0)' ) ],
+	] )( 'never falls back when both roles are the same %s color', ( _name, role ) => {
+		const pinned: LabelRoles = { label: role, labelInverse: { ...role } };
+
+		expect( pickLabelTextColorForFill( hexToRgb( '#516dec' ), pinned, 'label' ) ).toBe( 'label' );
+		expect( pickLabelTextColorForFill( hexToRgb( '#516dec' ), pinned, 'label-inverse' ) ).toBe(
+			'label-inverse'
+		);
+	} );
+
+	describe.each( [
+		[ 'white', '#ffffff' ],
+		[ 'dark', '#1e1e1e' ],
+	] )( 'across a heatmap scale on a %s background', ( _name, background ) => {
+		const painted: Record< LabelTextColor, number > = {
+			label: rgbLuminance( hexToRgb( '#1e1e1e' ) ),
+			'label-inverse': rgbLuminance( hexToRgb( '#f0f0f0' ) ),
+			black: 0,
+			white: 1,
+		};
+		// The Storybook custom accent, then the wp-admin scheme colors.
+		const primaries = [
+			'#4a19ab',
+			'#2271b1',
+			'#007cba',
+			'#3858e9',
+			'#437aa8',
+			'#916745',
+			'#646c3e',
+			'#cf4339',
+			'#567958',
+			'#ad631e',
+		];
+
+		it.each( primaries )( 'reaches AA on every intensity of %s', primary => {
+			for ( let step = 0; step <= 200; step++ ) {
+				const fill = blendRgb(
+					hexToRgb( primary ),
+					hexToRgb( background ),
+					0.15 + 0.85 * ( step / 200 )
+				);
+				const choice = pickLabelTextColorForFill( fill, DEFAULT_ROLES, 'label' );
+				// Checked on the 8-bit channels the browser paints as well as the exact mix.
+				const [ r, g, b ] = fill.map( Math.round );
+				const painted8Bit: Rgb = [ r, g, b ];
+
+				for ( const shown of [ fill, painted8Bit ] ) {
+					expect(
+						luminanceContrastRatio( rgbLuminance( shown ), painted[ choice ] )
+					).toBeGreaterThanOrEqual( MIN_LABEL_CONTRAST );
+				}
+			}
+		} );
+	} );
+} );
+
+describe( 'pickLabelTextColor', () => {
+	it( 'reads the fill from any color syntax', () => {
+		expect( pickLabelTextColor( 'rgb(255, 255, 255)', DEFAULT_ROLES, 'label-inverse' ) ).toBe(
+			'label'
+		);
+	} );
+
+	it( 'keeps the default role for a fill it cannot read', () => {
+		expect( pickLabelTextColor( 'var(--not-set)', DEFAULT_ROLES, 'label-inverse' ) ).toBe(
+			'label-inverse'
+		);
+	} );
+} );

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

@@ -3,6 +3,7 @@ import { useContext } from 'react';
 import { ChartScopeContext } from '../../../../providers/chart-scope';
 import { withResponsive } from '../index';
 import type { BaseChartProps } from '../../../../types';
+import type { JSX } from 'react';
 
 // Mock the useParentSize hook
 jest.mock( '@visx/responsive', () => ( {