@automattic/charts 4.9.0 → 4.11.0

package/src/charts/geo-chart/private/use-tooltip-position.ts

@@ -0,0 +1,106 @@
+import { useEffect, type RefObject } from 'react';
+import {
+	DEFAULT_OFFSET,
+	findClippingAncestor,
+	getBoundedPosition,
+} from '../../../components/tooltip/private/bounded-tooltip';
+
+const TOOLTIP_CLASS = 'google-visualization-tooltip';
+
+const isTooltip = ( node: Node ): node is HTMLElement =>
+	node instanceof HTMLElement && node.classList.contains( TOOLTIP_CLASS );
+
+/**
+ * Moves Google's HTML tooltip to where the other chart tooltips sit, just off the cursor. Google places it about 30px away and has no option for it.
+ *
+ * @param containerRef - The element Google draws the chart into.
+ */
+export function useTooltipPosition( containerRef: RefObject< HTMLElement > ) {
+	useEffect( () => {
+		const container = containerRef.current;
+
+		if ( ! container || typeof MutationObserver === 'undefined' ) {
+			return undefined;
+		}
+
+		let pointer: { x: number; y: number } | null = null;
+		let clip: { parent: Element; element: Element | null } | null = null;
+		const ownStyles = new WeakMap< HTMLElement, string >();
+
+		const place = ( tooltip: HTMLElement ) => {
+			const parent = tooltip.offsetParent;
+
+			if ( ! pointer || ! parent ) {
+				return;
+			}
+
+			if ( clip?.parent !== parent ) {
+				clip = { parent, element: findClippingAncestor( parent ) };
+			}
+
+			const parentRect = parent.getBoundingClientRect();
+			const clipRect = clip.element?.getBoundingClientRect() ?? {
+				left: 0,
+				top: 0,
+				right: window.innerWidth,
+				bottom: window.innerHeight,
+			};
+			const { x, y } = getBoundedPosition( {
+				left: pointer.x - parentRect.left,
+				top: pointer.y - parentRect.top,
+				offsetLeft: DEFAULT_OFFSET,
+				offsetTop: DEFAULT_OFFSET,
+				box: { width: tooltip.offsetWidth, height: tooltip.offsetHeight },
+				wrapper: { left: 0, top: 0, right: parentRect.width, bottom: parentRect.height },
+				bounds: {
+					left: clipRect.left - parentRect.left,
+					top: clipRect.top - parentRect.top,
+					right: clipRect.right - parentRect.left,
+					bottom: clipRect.bottom - parentRect.top,
+				},
+			} );
+
+			tooltip.style.left = `${ x }px`;
+			tooltip.style.top = `${ y }px`;
+			ownStyles.set( tooltip, tooltip.style.cssText );
+		};
+
+		const trackPointer = ( event: MouseEvent ) => {
+			pointer = { x: event.clientX, y: event.clientY };
+		};
+
+		const observer = new MutationObserver( records => {
+			const tooltips = new Set< HTMLElement >();
+
+			for ( const record of records ) {
+				if ( isTooltip( record.target ) ) {
+					tooltips.add( record.target );
+				}
+				record.addedNodes.forEach( node => isTooltip( node ) && tooltips.add( node ) );
+			}
+
+			for ( const tooltip of tooltips ) {
+				// Our own write is observed too; placing again would loop.
+				if ( ownStyles.get( tooltip ) !== tooltip.style.cssText ) {
+					place( tooltip );
+				}
+			}
+		} );
+
+		// Google's own mouse events, captured so the pointer is current before Google writes the tooltip. Chrome sends mouse events, but no pointer events, when the map moves under a resting cursor.
+		container.addEventListener( 'mouseover', trackPointer, true );
+		container.addEventListener( 'mousemove', trackPointer, true );
+		observer.observe( container, {
+			childList: true,
+			subtree: true,
+			attributes: true,
+			attributeFilter: [ 'style' ],
+		} );
+
+		return () => {
+			container.removeEventListener( 'mouseover', trackPointer, true );
+			container.removeEventListener( 'mousemove', trackPointer, true );
+			observer.disconnect();
+		};
+	}, [ containerRef ] );
+}

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

@@ -1,7 +1,8 @@
-import { render, screen, waitFor } from '@testing-library/react';
-import { Chart } from 'react-google-charts';
+import { act, render, screen, waitFor } from '@testing-library/react';
+import { Chart, type GoogleDataTableColumnRoleType } from 'react-google-charts';
 import { GlobalChartsProvider } from '../../../providers';
 import GeoChart, { GeoChartUnresponsive } from '../geo-chart';
+import type { GeoChartProps } from '../types';
 
 // Mock react-google-charts
 jest.mock( 'react-google-charts', () => ( {
@@ -97,20 +98,54 @@ describe( 'GeoChart', () => {
 			expect( data ).toEqual( testData );
 		} );
 
-		test( 'sanitizes HTML tooltip content to prevent XSS', () => {
-			const testData: [ ( string | object )[], ...[ string, number, string ][] ] = [
-				[ 'Country', 'Value', { type: 'string', role: 'tooltip', p: { html: true } } ],
-				[ 'US', 100, '<b>United States</b><script>alert("xss")</script>' ],
-				[ 'CA', 50, '<b>Canada</b><img src=x onerror="alert(1)">' ],
-			];
-			renderWithTheme( { data: testData } );
+		test.each( [ true, 'true', 1, 'false' ] )(
+			'sanitizes HTML tooltip content when p.html is %p',
+			html => {
+				const testData: [ ( string | object )[], ...[ string, number, string ][] ] = [
+					[ 'Country', 'Value', { type: 'string', role: 'tooltip', p: { html } } ],
+					[ 'US', 100, '<b>United States</b><script>alert("xss")</script>' ],
+					[ 'CA', 50, '<b>Canada</b><img src=x onerror="alert(1)">' ],
+				];
+				renderWithTheme( { data: testData } );
+
+				const chartData = screen.getByTestId( 'chart-data' );
+				const data = JSON.parse( chartData.textContent || '[]' );
+
+				// Script tags and img (not in allowlist) should be stripped
+				expect( data[ 1 ][ 2 ] ).toBe( '<b>United States</b>' );
+				expect( data[ 2 ][ 2 ] ).toBe( '<b>Canada</b>' );
+			}
+		);
 
-			const chartData = screen.getByTestId( 'chart-data' );
-			const data = JSON.parse( chartData.textContent || '[]' );
+		const unsafe = '<b>US</b><img src=x onerror="alert(1)">';
+		const htmlColumn = { type: 'string', role: 'tooltip', p: { html: true } };
+		const textColumn = { type: 'string', role: 'tooltip' };
+
+		test.each( [
+			[
+				'a cell flagged HTML in a text column',
+				textColumn,
+				{ v: unsafe, p: { html: true } },
+				{ v: '<b>US</b>', p: { html: true } },
+			],
+			[
+				'an object cell in an HTML column',
+				htmlColumn,
+				{ v: unsafe, f: unsafe },
+				{ v: '<b>US</b>', f: '<b>US</b>' },
+			],
+			[ 'a plain cell in a text column, which Google escapes', textColumn, unsafe, unsafe ],
+		] )( 'sanitizes tooltip markup in %s', ( _, column, cell, expected ) => {
+			renderWithTheme( {
+				data: [
+					[ 'Country', 'Value', column ],
+					[ 'US', 100, cell ],
+				],
+			} );
+
+			const data = JSON.parse( screen.getByTestId( 'chart-data' ).textContent || '[]' );
 
-			// Script tags and img (not in allowlist) should be stripped
-			expect( data[ 1 ][ 2 ] ).toBe( '<b>United States</b>' );
-			expect( data[ 2 ][ 2 ] ).toBe( '<b>Canada</b>' );
+			expect( data[ 1 ][ 2 ] ).toEqual( expected );
 		} );
 
 		test( 'handles header-only data with HTML tooltip column and no data rows', () => {
@@ -170,41 +205,22 @@ describe( 'GeoChart', () => {
 			expect( options.legend ).toBe( 'none' );
 		} );
 
-		test( 'sets tooltip trigger to focus with isHtml false by default', () => {
-			renderWithTheme();
-
-			const chartOptions = screen.getByTestId( 'chart-options' );
-			const options = JSON.parse( chartOptions.textContent || '{}' );
-
-			expect( options.tooltip ).toEqual( { trigger: 'focus', isHtml: false } );
-		} );
-
-		test( 'enables HTML tooltips when data has HTML tooltip column', () => {
-			const testData: [ ( string | object )[], ...[ string, number, string ][] ] = [
-				[ 'Country', 'Value', { type: 'string', role: 'tooltip', p: { html: true } } ],
-				[ 'US', 100, '<b>United States</b><br/>100 orders' ],
-				[ 'CA', 50, '<b>Canada</b><br/>50 orders' ],
-			];
-			renderWithTheme( { data: testData } );
-
-			const chartOptions = screen.getByTestId( 'chart-options' );
-			const options = JSON.parse( chartOptions.textContent || '{}' );
-
-			expect( options.tooltip ).toEqual( { trigger: 'focus', isHtml: true } );
-		} );
-
-		test( 'keeps isHtml false for text-only tooltips', () => {
-			const testData: [ ( string | object )[], ...[ string, number, string ][] ] = [
-				[ 'Country', 'Value', { type: 'string', role: 'tooltip' } ],
+		test( 'sets tooltip trigger to focus with isHtml true', () => {
+			const data: GeoChartProps[ 'data' ] = [
+				[
+					'Country',
+					'Value',
+					{ type: 'string', role: 'tooltip' as GoogleDataTableColumnRoleType },
+				],
 				[ 'US', 100, 'United States: 100 orders' ],
 				[ 'CA', 50, 'Canada: 50 orders' ],
 			];
-			renderWithTheme( { data: testData } );
+			renderWithTheme( { data } );
 
 			const chartOptions = screen.getByTestId( 'chart-options' );
 			const options = JSON.parse( chartOptions.textContent || '{}' );
 
-			expect( options.tooltip ).toEqual( { trigger: 'focus', isHtml: false } );
+			expect( options.tooltip ).toEqual( { trigger: 'focus', isHtml: true } );
 		} );
 
 		test( 'does not include region in options when set to world (default)', () => {
@@ -281,13 +297,18 @@ describe( 'GeoChart', () => {
 	} );
 
 	describe( 'Chart Events', () => {
-		test( 'does not pass chart events when onError is omitted', () => {
+		test( "hides Google's own SVG label from screen readers once the map is ready", () => {
 			renderWithTheme();
 
-			const chartEvents = screen.getByTestId( 'chart-events' );
-			const events = JSON.parse( chartEvents.textContent || '[]' );
+			const svg = document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' );
+			screen.getByTestId( 'google-chart-mock' ).appendChild( svg );
 
-			expect( events ).toEqual( [] );
+			const chartProps = ChartMock.mock.calls[ ChartMock.mock.calls.length - 1 ]?.[ 0 ];
+			chartProps.chartEvents
+				.find( ( event: { eventName: string } ) => event.eventName === 'ready' )
+				.callback( {} );
+
+			expect( svg ).toHaveAttribute( 'aria-hidden', 'true' );
 		} );
 
 		test( 'calls onError when Google Charts emits an error', () => {
@@ -413,6 +434,16 @@ describe( 'GeoChart', () => {
 			// The component should call the custom placeholder function
 			expect( customPlaceholder ).toHaveBeenCalled();
 		} );
+
+		test( 'keeps the placeholder outside the chart until Google Charts loads', () => {
+			renderWithTheme();
+
+			expect( screen.getByTestId( 'geo-chart-loading' ) ).toBeInTheDocument();
+
+			act( () => ChartMock.mock.calls[ ChartMock.mock.calls.length - 1 ][ 0 ].onLoad() );
+
+			expect( screen.queryByTestId( 'geo-chart-loading' ) ).not.toBeInTheDocument();
+		} );
 	} );
 
 	describe( 'Responsive Wrapper', () => {

package/src/charts/geo-chart/test/use-tooltip-position.test.ts

@@ -0,0 +1,43 @@
+import { renderHook, waitFor } from '@testing-library/react';
+import { useTooltipPosition } from '../private/use-tooltip-position';
+
+const renderChart = () => {
+	const container = document.createElement( 'div' );
+	const chart = document.createElement( 'div' );
+	const tooltip = document.createElement( 'div' );
+	tooltip.className = 'google-visualization-tooltip';
+	chart.append( tooltip );
+	container.append( chart );
+	document.body.append( container );
+
+	chart.getBoundingClientRect = () => new DOMRect( 100, 50, 400, 300 );
+	Object.defineProperties( tooltip, {
+		offsetParent: { value: chart },
+		offsetWidth: { value: 80 },
+		offsetHeight: { value: 40 },
+	} );
+
+	renderHook( () => useTooltipPosition( { current: container } ) );
+
+	return { chart, tooltip };
+};
+
+describe( 'useTooltipPosition', () => {
+	afterEach( () => document.body.replaceChildren() );
+
+	it.each( [
+		[ 'beside the cursor', 200, 100, '110px', '60px' ],
+		[ 'flipped left near the right edge', 480, 100, '290px', '60px' ],
+	] )( 'moves the tooltip Google places %s', async ( _, clientX, clientY, left, top ) => {
+		const { chart, tooltip } = renderChart();
+		chart.addEventListener( 'mousemove', () => {
+			tooltip.style.left = '0px';
+			tooltip.style.top = '0px';
+		} );
+
+		// A bare mouse event, as Chrome sends when the map moves under a resting cursor.
+		chart.dispatchEvent( new MouseEvent( 'mousemove', { bubbles: true, clientX, clientY } ) );
+
+		await waitFor( () => expect( tooltip ).toHaveStyle( { left, top } ) );
+	} );
+} );

package/src/charts/geo-chart/types.ts

@@ -31,7 +31,7 @@ export interface GeoChartError {
 
 export interface GeoChartProps extends Pick<
 	BaseChartProps,
-	'className' | 'chartId' | 'width' | 'height'
+	'className' | 'chartId' | 'ariaLabel' | 'width' | 'height'
 > {
 	/**
 	 * Data in Google Charts native format for maximum flexibility.

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

@@ -5,8 +5,8 @@ $focus-ring-width: var(--wpds-border-width-focus);
 
 $heatmap-empty-fill: var(--a8c-charts-color-track);
 
-// JS sets the ends (getHeatmapScale): 3:1 against background and empty cell at
-// the low end. Unresolved, the floor is 15% of the primary.
+// JS sets the ends (getHeatmapScale). Unresolved, the floor is 15% of the
+// primary.
 $heatmap-fill: color-mix(in sRGB, var(--a8c-charts-color-heatmap-high, var(--a8c-charts-color-heatmap-primary)) calc(var(--a8c-charts-heatmap-cell-intensity) * 100%), var(--a8c-charts-color-heatmap-low, color-mix(in sRGB, var(--a8c-charts-color-heatmap-primary) 15%, var(--a8c-charts-color-background, #fff))));
 
 .heatmap-chart {
@@ -49,7 +49,7 @@ $heatmap-fill: color-mix(in sRGB, var(--a8c-charts-color-heatmap-high, var(--a8c
 		outline:
 			$focus-ring-width solid
 			var(--wpds-color-stroke-focus);
-		outline-offset: 2px;
+		outline-offset: $focus-ring-width;
 		border-radius: var(--wpds-border-radius-sm);
 	}
 }

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

@@ -1,9 +1,14 @@
-import { MIN_BACKGROUND_CONTRAST } from '../../../providers/chart-context/private/palette-generator';
 import { contrastRatio } from '../../../providers/chart-context/private/perceptual-color';
 import { mixHexColors, relativeLuminance } from '../../../utils/color-utils';
 
+/** Contrast the lowest step aims for against the background and the empty cell. */
+export const HEATMAP_LOW_CONTRAST = 2.5;
+
+/** Contrast every step keeps against the background, and the lowest against the highest. */
+export const HEATMAP_STEP_CONTRAST = 2;
+
 /** Contrast the highest step aims for against the background, so the steps stay apart. */
-export const HEATMAP_HIGH_CONTRAST = 9;
+export const HEATMAP_HIGH_CONTRAST = 6;
 
 const STEPS = 200;
 
@@ -12,20 +17,13 @@ export type HeatmapScale = {
 	high: string;
 };
 
-// Measured on the rounded hex the browser paints, so an endpoint never lands under its threshold.
-const firstMeeting = ( from: string, to: string, meets: ( color: string ) => boolean ) => {
-	for ( let step = 0; step <= STEPS; step++ ) {
-		const color = mixHexColors( from, to, step / STEPS );
-		if ( meets( color ) ) {
-			return color;
-		}
-	}
-	return null;
-};
+// Mixed to the rounded hex the browser paints, so an endpoint never lands under its threshold.
+const ramp = ( from: string, to: string ) =>
+	Array.from( { length: STEPS + 1 }, ( _, step ) => mixHexColors( from, to, step / STEPS ) );
 
 /**
- * The two ends of the heatmap fill scale: 3:1 against the background and the empty cell at the
- * low end, toward 9:1 against the background at the high end.
+ * The two ends of the heatmap fill scale: toward 2.5:1 against the background and the empty cell at
+ * the low end, never under 2:1 against the background or the high end, and toward 6:1 at the high end.
  *
  * @param primary    - The resolved primary color, as six-digit hex.
  * @param background - The resolved chart background, as six-digit hex.
@@ -37,38 +35,45 @@ export const getHeatmapScale = (
 	background: string,
 	emptyCell?: string | null
 ): HeatmapScale => {
-	const primaryStandsOut = contrastRatio( primary, background ) >= MIN_BACKGROUND_CONTRAST;
-	// The scale deepens to black or white on the primary's own side of the background, so it never
-	// crosses it. A primary too close to the background takes whichever contrasts more.
-	const towardWhite = primaryStandsOut
-		? relativeLuminance( primary ) > relativeLuminance( background )
-		: contrastRatio( '#ffffff', background ) > contrastRatio( '#000000', background );
-	const extreme = towardWhite ? '#ffffff' : '#000000';
+	const backgroundLuminance = relativeLuminance( background );
+	const ownSide = relativeLuminance( primary ) > backgroundLuminance ? '#ffffff' : '#000000';
+	const otherSide = ownSide === '#ffffff' ? '#000000' : '#ffffff';
+	// The scale deepens on the primary's own side of the background, unless only the other side
+	// reaches the high end or contrasts more; it never crosses the background either way.
+	const extreme =
+		contrastRatio( ownSide, background ) >= HEATMAP_HIGH_CONTRAST ||
+		contrastRatio( ownSide, background ) >= contrastRatio( otherSide, background )
+			? ownSide
+			: otherSide;
+	const onExtremeSide = ( color: string ) =>
+		extreme === '#ffffff'
+			? relativeLuminance( color ) > backgroundLuminance
+			: relativeLuminance( color ) < backgroundLuminance;
 
-	const lowAgainst = ( references: string[] ) => {
-		const meets = ( color: string ) =>
-			references.every( reference => contrastRatio( color, reference ) >= MIN_BACKGROUND_CONTRAST );
-		return (
-			( primaryStandsOut ? firstMeeting( background, primary, meets ) : null ) ??
-			firstMeeting( primary, extreme, meets )
-		);
-	};
-	// Only `high` can miss: black or white tops out near 4.58:1 on a mid-tone background.
+	const deepening = ramp( primary, extreme );
+	// Only `high` can miss its target: black or white tops out near 4.58:1 on a mid-tone background.
 	const high =
-		firstMeeting(
-			primary,
-			extreme,
-			color => contrastRatio( color, background ) >= HEATMAP_HIGH_CONTRAST
-		) ?? extreme;
+		deepening.find( color => contrastRatio( color, background ) >= HEATMAP_HIGH_CONTRAST ) ??
+		extreme;
 
-	// The lowest step sits beside empty cells, so it stands apart from them too, unless an
-	// empty-cell color far from the background would push it past the high end.
-	const againstEmptyCell = emptyCell ? lowAgainst( [ background, emptyCell ] ) : null;
+	const path = [ ...ramp( background, primary ), ...deepening ];
+	// Never empty: `high` sits at least 4.58:1 out.
+	const spread = path
+		.slice( 0, path.indexOf( high ) + 1 )
+		.filter(
+			color =>
+				onExtremeSide( color ) &&
+				contrastRatio( color, background ) >= HEATMAP_STEP_CONTRAST &&
+				contrastRatio( color, high ) >= HEATMAP_STEP_CONTRAST
+		);
+	const surroundings = emptyCell ? [ background, emptyCell ] : [ background ];
+	const weakest = ( color: string ) =>
+		Math.min( ...surroundings.map( other => contrastRatio( color, other ) ) );
+	// Short of 2.5:1 the low end settles for 2:1, then for the step farthest from its nearest neighbor.
 	const low =
-		againstEmptyCell &&
-		contrastRatio( againstEmptyCell, background ) <= contrastRatio( high, background )
-			? againstEmptyCell
-			: lowAgainst( [ background ] );
+		spread.find( color => weakest( color ) >= HEATMAP_LOW_CONTRAST ) ??
+		spread.find( color => weakest( color ) >= HEATMAP_STEP_CONTRAST ) ??
+		spread.reduce( ( best, color ) => ( weakest( color ) > weakest( best ) ? color : best ) );
 
-	return { low: low ?? extreme, high };
+	return { low, high };
 };

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

@@ -486,8 +486,8 @@ describe( 'HeatmapChart', () => {
 		);
 		const grid = screen.getByRole( 'grid', { name: /heatmap/i } );
 
-		expect( grid.style.getPropertyValue( '--a8c-charts-color-heatmap-low' ) ).toBe( '#6c83ef' );
-		expect( grid.style.getPropertyValue( '--a8c-charts-color-heatmap-high' ) ).toBe( '#283ea5' );
+		expect( grid.style.getPropertyValue( '--a8c-charts-color-heatmap-low' ) ).toBe( '#7f93f1' );
+		expect( grid.style.getPropertyValue( '--a8c-charts-color-heatmap-high' ) ).toBe( '#3554df' );
 
 		document.body.removeChild( scope );
 	} );
@@ -586,7 +586,7 @@ const mockRects = () =>
 describe( 'HeatmapChart value text contrast', () => {
 	// The low end, a mid-tone, and the high end of the scale.
 	const scale: HeatmapColumn[] = [
-		{ label: 'W1', data: [ { value: 1 }, { value: 30 }, { value: 100 } ] },
+		{ label: 'W1', data: [ { value: 1 }, { value: 60 }, { value: 100 } ] },
 	];
 
 	let injectedStyle: HTMLStyleElement | null = null;
@@ -619,7 +619,7 @@ describe( 'HeatmapChart value text contrast', () => {
 	test( 'falls back to black on a mid-tone cell where neither role reaches AA', () => {
 		renderScale();
 
-		expect( screen.getByText( '30' ) ).toHaveClass( 'heatmap-chart__cell-value--black' );
+		expect( screen.getByText( '60' ) ).toHaveClass( 'heatmap-chart__cell-value--black' );
 	} );
 
 	test( 'reads the label roles once data arrives after an empty first render', () => {
@@ -691,7 +691,7 @@ describe( 'HeatmapChart value text contrast', () => {
 
 		renderScale( 'pinned-heatmap' );
 
-		[ '1', '30', '100' ].forEach( value =>
+		[ '1', '60', '100' ].forEach( value =>
 			expect( screen.getByText( value ) ).toHaveClass( 'heatmap-chart__cell-value', {
 				exact: true,
 			} )
@@ -1222,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/test/heatmap-scale.test.ts

@@ -1,9 +1,13 @@
-import { MIN_BACKGROUND_CONTRAST } from '../../../providers/chart-context/private/palette-generator';
 import { contrastRatio } from '../../../providers/chart-context/private/perceptual-color';
 import { mixHexColors } from '../../../utils/color-utils';
-import { getHeatmapScale, HEATMAP_HIGH_CONTRAST } from '../private/heatmap-scale';
+import {
+	getHeatmapScale,
+	HEATMAP_HIGH_CONTRAST,
+	HEATMAP_LOW_CONTRAST,
+	HEATMAP_STEP_CONTRAST,
+} from '../private/heatmap-scale';
 
-// The wp-admin scheme colors, then the pre-7.0 ones, which include a sunrise below 3:1 on white.
+// The wp-admin scheme colors, then the pre-7.0 ones.
 const PRIMARIES = [
 	'#007cba',
 	'#3858e9',
@@ -22,17 +26,17 @@ describe.each( [
 	[ 'dark', '#242424', '#272727' ],
 ] )( 'getHeatmapScale on a %s background', ( _mode, background, emptyCell ) => {
 	it.each( PRIMARIES )(
-		'keeps the lowest step of %s at 3:1 against the background and empty cell, no further',
+		'keeps the lowest step of %s at 2.5:1 against the background and empty cell, no further',
 		primary => {
 			const { low } = getHeatmapScale( primary, background, emptyCell );
 			const contrasts = [ contrastRatio( low, background ), contrastRatio( low, emptyCell ) ];
 
-			expect( Math.min( ...contrasts ) ).toBeGreaterThanOrEqual( MIN_BACKGROUND_CONTRAST );
-			expect( Math.min( ...contrasts ) ).toBeLessThan( MIN_BACKGROUND_CONTRAST + 0.1 );
+			expect( Math.min( ...contrasts ) ).toBeGreaterThanOrEqual( HEATMAP_LOW_CONTRAST );
+			expect( Math.min( ...contrasts ) ).toBeLessThan( HEATMAP_LOW_CONTRAST + 0.1 );
 		}
 	);
 
-	it.each( PRIMARIES )( 'runs the scale of %s out to 9:1', primary => {
+	it.each( PRIMARIES )( 'runs the scale of %s out to 6:1', primary => {
 		const { high } = getHeatmapScale( primary, background );
 
 		expect( contrastRatio( high, background ) ).toBeGreaterThanOrEqual( HEATMAP_HIGH_CONTRAST );
@@ -40,39 +44,63 @@ describe.each( [
 } );
 
 describe( 'getHeatmapScale', () => {
-	it( 'keeps a primary already past 9:1 as the high end', () => {
+	it( 'keeps a primary already past 6:1 as the high end', () => {
 		expect( getHeatmapScale( '#1d2327', '#ffffff' ).high ).toBe( '#1d2327' );
 	} );
 
 	it.each( [
-		[ '#ffffff', '#808080' ],
-		[ '#ffd000', '#767676' ],
-		[ '#3858e9', '#808080' ],
-		[ '#1e1e1e', '#999999' ],
-	] )( 'keeps every step of %s at 3:1 on a mid-gray %s', ( primary, background ) => {
-		const { low, high } = getHeatmapScale( primary, background );
+		[ '#ffffff', '#808080', null ],
+		[ '#ffd000', '#767676', null ],
+		[ '#3858e9', '#808080', null ],
+		[ '#1e1e1e', '#999999', null ],
+		[ '#ffd000', '#8a8a8a', null ],
+		[ '#ffd000', '#8a8a8a', '#cccccc' ],
+		[ '#1d2327', '#555555', '#272727' ],
+	] )(
+		'keeps every step of %s at 2:1 on a mid-gray %s with a %s empty cell, ends apart',
+		( primary, background, emptyCell ) => {
+			const { low, high } = getHeatmapScale( primary, background, emptyCell );
 
-		for ( let step = 0; step <= 20; step++ ) {
-			expect(
-				contrastRatio( mixHexColors( low, high, step / 20 ), background )
-			).toBeGreaterThanOrEqual( MIN_BACKGROUND_CONTRAST );
+			expect( contrastRatio( low, high ) ).toBeGreaterThanOrEqual( HEATMAP_STEP_CONTRAST );
+			for ( let step = 0; step <= 20; step++ ) {
+				expect(
+					contrastRatio( mixHexColors( low, high, step / 20 ), background )
+				).toBeGreaterThanOrEqual( HEATMAP_STEP_CONTRAST );
+			}
 		}
-	} );
+	);
 
 	it.each( [
-		[ 'no step clears it', '#ffffff', '#555555' ],
-		[ 'clearing it would pass the high end', '#ffffff', '#767676' ],
-		[ 'clearing it would pass the high end', '#1e1e1e', '#6b6b6b' ],
+		[ '#ffffff', '#cccccc' ],
+		[ '#ffffff', '#959595' ],
+		[ '#1e1e1e', '#6b6b6b' ],
 	] )(
-		'measures against the background alone when %s (%s, %s)',
-		( _case, background, emptyCell ) => {
-			expect( getHeatmapScale( '#3858e9', background, emptyCell ) ).toEqual(
-				getHeatmapScale( '#3858e9', background )
+		'moves the low end on %s farther from a %s empty cell than the background alone would',
+		( background, emptyCell ) => {
+			const { low } = getHeatmapScale( '#3858e9', background, emptyCell );
+			const backgroundOnly = getHeatmapScale( '#3858e9', background ).low;
+
+			expect( contrastRatio( low, emptyCell ) ).toBeGreaterThan(
+				contrastRatio( backgroundOnly, emptyCell )
 			);
 		}
 	);
 
-	it( 'ends on black or white when the background leaves no room for 9:1', () => {
+	it.each( [
+		[ '#ffffff', '#959595' ],
+		[ '#ffffff', '#cccccc' ],
+		[ '#1e1e1e', '#555555' ],
+	] )(
+		'keeps the ends apart and in order on %s with a %s empty cell',
+		( background, emptyCell ) => {
+			const { low, high } = getHeatmapScale( '#3858e9', background, emptyCell );
+
+			expect( contrastRatio( low, high ) ).toBeGreaterThanOrEqual( HEATMAP_STEP_CONTRAST );
+			expect( contrastRatio( low, background ) ).toBeLessThan( contrastRatio( high, background ) );
+		}
+	);
+
+	it( 'ends on black or white when the background leaves no room for 6:1', () => {
 		expect( getHeatmapScale( '#3858e9', '#808080' ).high ).toBe( '#000000' );
 	} );
 } );