@automattic/charts 4.1.0 → 4.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "4.1.0",
+	"version": "4.1.1",
 	"description": "Display charts within Automattic products.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/charts/#readme",
 	"bugs": {
@@ -63,7 +63,7 @@
 		"typecheck": "tsgo --noEmit"
 	},
 	"dependencies": {
-		"@automattic/number-formatters": "^1.2.8",
+		"@automattic/number-formatters": "^1.2.9",
 		"@babel/runtime": "7.29.7",
 		"@date-fns/tz": "1.4.1",
 		"@react-spring/web": "10.1.1",
@@ -114,9 +114,9 @@
 		"@wordpress/components": "40.0.0",
 		"@wordpress/element": "8.6.0",
 		"@wordpress/private-apis": "1.54.0",
-		"babel-jest": "30.4.1",
+		"babel-jest": "30.5.1",
 		"identity-obj-proxy": "^3.0.0",
-		"jest": "30.4.2",
+		"jest": "30.5.1",
 		"jest-extended": "7.0.0",
 		"magic-string": "0.30.21",
 		"react": "18.3.1",

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

@@ -411,6 +411,7 @@ const AreaChartInternal = forwardRef< ChartInstanceRef, AreaChartProps >(
 
 						return (
 							<div
+								ref={ chartRef }
 								role="grid"
 								aria-label={ __( 'Area chart', 'jetpack-charts' ) }
 								tabIndex={ 0 }
@@ -419,7 +420,7 @@ const AreaChartInternal = forwardRef< ChartInstanceRef, AreaChartProps >(
 								onBlur={ onChartBlur }
 							>
 								{ chartHeight > 0 && (
-									<div ref={ chartRef } className={ plotStyles[ 'xy-plot' ] }>
+									<div className={ plotStyles[ 'xy-plot' ] }>
 										{ zoomable && zoom.domain && <ZoomResetButton onClick={ zoom.reset } /> }
 										<XYChart
 											theme={ theme }

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

@@ -52,6 +52,37 @@ describe( 'AreaChart', () => {
 		);
 	};
 
+	test.each( [ [ 'Escape', '{Escape}' ] ] )(
+		'returns focus to the grid after %s',
+		async ( _name, keys ) => {
+			jest.useFakeTimers();
+			try {
+				const user = userEvent.setup( { advanceTimers: jest.advanceTimersByTime } );
+				renderWithProvider();
+				const chart = screen.getByRole( 'grid', { name: /area chart/i } );
+
+				await user.tab();
+				expect( chart ).toHaveFocus();
+				await user.keyboard( '{ArrowRight}' );
+				expect( screen.getByRole( 'tooltip' ) ).toHaveFocus();
+
+				await user.keyboard( keys );
+				await act( async () => {
+					jest.advanceTimersByTime( 5000 );
+				} );
+				expect( chart ).toHaveFocus();
+				expect( screen.queryByRole( 'tooltip' ) ).not.toBeInTheDocument();
+
+				await user.keyboard( '{ArrowRight}' );
+				const tooltip = screen.getByRole( 'tooltip' );
+				expect( tooltip ).toHaveFocus();
+				expect( tooltip ).toHaveTextContent( 'Series A:10' );
+			} finally {
+				jest.useRealTimers();
+			}
+		}
+	);
+
 	describe( 'Data Validation', () => {
 		test( 'shows error when data is empty', () => {
 			renderWithProvider( { data: [] } );

package/src/charts/heatmap-chart/{private/build-calendar-data.ts → build-calendar-data.ts}

@@ -1,5 +1,5 @@
-import { createDateFormatter, sanitizeFormatting } from '../../../utils/date-formatting';
-import { warnOnce } from '../../../utils/warn-once';
+import { createDateFormatter, sanitizeFormatting } from '../../utils/date-formatting';
+import { warnOnce } from '../../utils/warn-once';
 import {
 	addCivilDays,
 	civilDate,
@@ -9,39 +9,15 @@ import {
 	pointDayKey,
 	startOfCivilWeek,
 	writtenDayKey,
-} from './civil-day';
-import type { DataPointDate } from '../../../types';
-import type { HeatmapCell, HeatmapColumn } from '../types';
-import type { CivilDate, DayKey } from './civil-day';
-
-export type CalendarHeatmapResult = {
-	data: HeatmapColumn[];
-	rowLabels: string[];
-};
-
-export type CalendarHeatmapOptions = {
-	weekStartsOn?: 0 | 1;
-	/**
-	 * Mark the days completing the first and last week outside the series' span as
-	 * hidden cells rather than blank ones, giving the calendar ragged edges. Days
-	 * inside the span stay blank even where the series has no entry.
-	 */
-	hideOutOfRangeDays?: boolean;
-	/**
-	 * Draw the grid over this span (`yyyy-MM-dd` bounds) instead of the series' own.
-	 * Days inside the grid but outside the series become placeholder cells: painted,
-	 * but reporting nothing, since they were never measured. A start bound opens from
-	 * the beginning of its week, and bounds narrower than the series are ignored.
-	 */
-	gridSpan?: { start?: string; end?: string };
-	/** BCP-47 tag the labels are written in. Defaults to the runtime's locale. */
-	locale?: string;
-	/**
-	 * IANA zone the series' instants are bucketed into days in. Defaults to the
-	 * runtime's zone. A `dateString` carrying no offset is taken as written.
-	 */
-	timeZone?: string;
-};
+} from './private/civil-day';
+import type { CivilDate, DayKey } from './private/civil-day';
+import type {
+	CalendarHeatmapOptions,
+	CalendarHeatmapResult,
+	HeatmapCell,
+	HeatmapColumn,
+} from './types';
+import type { DataPointDate } from '../../types';
 
 /** Rows that get a weekday label (Mon, Wed, Fri with a Monday week start). */
 const LABELLED_ROWS = [ 0, 2, 4 ];

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

@@ -1,5 +1,11 @@
 export { default as HeatmapChart, HeatmapChartUnresponsive } from './heatmap-chart';
-export { buildCalendarHeatmapData } from './private';
+export { buildCalendarHeatmapData } from './build-calendar-data';
 export { useCalendarHeatmapData } from './use-calendar-heatmap-data';
-export type { CalendarHeatmapOptions, CalendarHeatmapResult } from './private';
-export type { HeatmapChartProps, HeatmapColumn, HeatmapCell, HeatmapTooltipData } from './types';
+export type {
+	CalendarHeatmapOptions,
+	CalendarHeatmapResult,
+	HeatmapChartProps,
+	HeatmapColumn,
+	HeatmapCell,
+	HeatmapTooltipData,
+} from './types';

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

@@ -1,7 +1,5 @@
 export { getValueExtent, getNormalizedValue, isPresent } from './use-heatmap-colors';
-export { buildCalendarHeatmapData } from './build-calendar-data';
 export { HeatmapLegend } from './heatmap-legend';
 export { HeatmapContext } from './heatmap-context';
-export type { CalendarHeatmapOptions, CalendarHeatmapResult } from './build-calendar-data';
 export type { HeatmapLegendProps } from './heatmap-legend';
 export type { HeatmapContextValue } from './heatmap-context';

package/src/charts/heatmap-chart/test/build-calendar-data.test.ts

@@ -1,4 +1,4 @@
-import { buildCalendarHeatmapData } from '../private/build-calendar-data';
+import { buildCalendarHeatmapData } from '../build-calendar-data';
 import type { DataPointDate } from '../../../types';
 
 const series: DataPointDate[] = [

package/src/charts/heatmap-chart/test/use-calendar-heatmap-data.test.tsx

@@ -8,7 +8,7 @@ import { render } from '@testing-library/react';
 import { GlobalChartsProvider } from '../../../providers';
 import { useCalendarHeatmapData } from '../use-calendar-heatmap-data';
 import type { DataPointDate } from '../../../types';
-import type { CalendarHeatmapOptions, CalendarHeatmapResult } from '../private';
+import type { CalendarHeatmapOptions, CalendarHeatmapResult } from '../types';
 
 // 2026-08-03 08:00 in Asia/Tokyo, 2026-08-02 16:00 in America/Los_Angeles.
 const series: DataPointDate[] = [ { date: new Date( '2026-08-02T23:00:00Z' ), value: 7 } ];

package/src/charts/heatmap-chart/test/zoned-calendar-data.test.ts

@@ -4,7 +4,7 @@
 
 // Chatham runs ahead of UTC. A worker behind it renders a UTC-midnight proxy on
 // its own day, so it cannot tell the grid's UTC arithmetic from local arithmetic.
-import { buildCalendarHeatmapData } from '../private/build-calendar-data';
+import { buildCalendarHeatmapData } from '../build-calendar-data';
 import type { DataPointDate } from '../../../types';
 
 const labelsCarryingValues = ( data: ReturnType< typeof buildCalendarHeatmapData >[ 'data' ] ) =>

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

@@ -82,3 +82,32 @@ export interface HeatmapChartProps
 	renderTooltip?: ( data: HeatmapTooltipData ) => ReactNode;
 	children?: ReactNode;
 }
+
+export type CalendarHeatmapResult = {
+	data: HeatmapColumn[];
+	rowLabels: string[];
+};
+
+export type CalendarHeatmapOptions = {
+	weekStartsOn?: 0 | 1;
+	/**
+	 * Mark the days completing the first and last week outside the series' span as
+	 * hidden cells rather than blank ones, giving the calendar ragged edges. Days
+	 * inside the span stay blank even where the series has no entry.
+	 */
+	hideOutOfRangeDays?: boolean;
+	/**
+	 * Draw the grid over this span (`yyyy-MM-dd` bounds) instead of the series' own.
+	 * Days inside the grid but outside the series become placeholder cells: painted,
+	 * but reporting nothing, since they were never measured. A start bound opens from
+	 * the beginning of its week, and bounds narrower than the series are ignored.
+	 */
+	gridSpan?: { start?: string; end?: string };
+	/** BCP-47 tag the labels are written in. Defaults to the runtime's locale. */
+	locale?: string;
+	/**
+	 * IANA zone the series' instants are bucketed into days in. Defaults to the
+	 * runtime's zone. A `dateString` carrying no offset is taken as written.
+	 */
+	timeZone?: string;
+};

package/src/charts/heatmap-chart/use-calendar-heatmap-data.ts

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { useChartFormatting } from '../../providers';
-import { buildCalendarHeatmapData } from './private';
-import type { CalendarHeatmapOptions, CalendarHeatmapResult } from './private';
+import { buildCalendarHeatmapData } from './build-calendar-data';
+import type { CalendarHeatmapOptions, CalendarHeatmapResult } from './types';
 import type { DataPointDate } from '../../types';
 
 /**

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

@@ -562,6 +562,7 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 
 						return (
 							<div
+								ref={ chartRef }
 								role="grid"
 								aria-label={ __( 'Line chart', 'jetpack-charts' ) }
 								tabIndex={ 0 }
@@ -570,7 +571,7 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 								onBlur={ onChartBlur }
 							>
 								{ chartHeight > 0 && (
-									<div ref={ chartRef } className={ plotStyles[ 'xy-plot' ] }>
+									<div className={ plotStyles[ 'xy-plot' ] }>
 										{ zoomable && zoom.domain && <ZoomResetButton onClick={ zoom.reset } /> }
 										<XYChart
 											theme={ theme }

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

@@ -204,6 +204,37 @@ describe( 'LineChart', () => {
 		);
 	} );
 
+	test.each( [ [ 'Escape', '{Escape}' ] ] )(
+		'returns focus to the grid after %s',
+		async ( _name, keys ) => {
+			jest.useFakeTimers();
+			try {
+				const user = userEvent.setup( { advanceTimers: jest.advanceTimersByTime } );
+				renderWithTheme();
+				const chart = screen.getByRole( 'grid', { name: /line chart/i } );
+
+				await user.tab();
+				expect( chart ).toHaveFocus();
+				await user.keyboard( '{ArrowRight}' );
+				expect( screen.getByRole( 'tooltip' ) ).toHaveFocus();
+
+				await user.keyboard( keys );
+				await act( async () => {
+					jest.advanceTimersByTime( 5000 );
+				} );
+				expect( chart ).toHaveFocus();
+				expect( screen.queryByRole( 'tooltip' ) ).not.toBeInTheDocument();
+
+				await user.keyboard( '{ArrowRight}' );
+				const tooltip = screen.getByRole( 'tooltip' );
+				expect( tooltip ).toHaveFocus();
+				expect( tooltip ).toHaveTextContent( 'Series A:10' );
+			} finally {
+				jest.useRealTimers();
+			}
+		}
+	);
+
 	describe( 'Data Validation', () => {
 		test( 'handles empty data array', () => {
 			renderWithTheme( { data: [] } );

package/src/components/tooltip/accessible-tooltip.tsx

@@ -227,12 +227,18 @@ export const useKeyboardNavigation = ( {
 		[ preventTooltipScroll, selectedIndex ]
 	);
 
-	// On each focus of chart, reset the selectedIndex to 0, if keyboard navigation is not already active
-	const onChartFocus = useCallback( () => {
-		if ( ! isNavigating && selectedIndex !== undefined ) {
-			setSelectedIndex( 0 );
-		}
-	}, [ isNavigating, selectedIndex, setSelectedIndex ] );
+	// Returning focus from the tooltip must not restore the selection Escape just cleared.
+	const onChartFocus = useCallback(
+		( event: React.FocusEvent< HTMLDivElement > ) => {
+			if ( event.currentTarget.contains( event.relatedTarget ) ) {
+				return;
+			}
+			if ( ! isNavigating && selectedIndex !== undefined ) {
+				setSelectedIndex( 0 );
+			}
+		},
+		[ isNavigating, selectedIndex, setSelectedIndex ]
+	);
 
 	// On each blur of chart, keyboard navigation should restart from first tooltip
 	const onChartBlur = useCallback( () => {
@@ -243,9 +249,17 @@ export const useKeyboardNavigation = ( {
 		( event: React.KeyboardEvent< HTMLDivElement > ) => {
 			if ( totalPoints === 0 ) return;
 
+			const focusChart = () => {
+				if ( preventTooltipScroll ) {
+					chartRef.current?.focus( { preventScroll: true } );
+				} else {
+					chartRef.current?.focus();
+				}
+			};
+
 			// Keep focus on the chart if tab is pressed
 			if ( event.key === 'Tab' ) {
-				chartRef.current?.focus();
+				focusChart();
 				setSelectedIndex( undefined );
 				setIsNavigating( false );
 				return;
@@ -254,7 +268,7 @@ export const useKeyboardNavigation = ( {
 			const currentSelectedIndex = selectedIndex === undefined ? -1 : selectedIndex;
 
 			if ( currentSelectedIndex + 1 >= totalPoints && [ 'ArrowRight' ].includes( event.key ) ) {
-				chartRef.current?.focus();
+				focusChart();
 				setSelectedIndex( undefined );
 				setIsNavigating( false );
 				return;
@@ -271,12 +285,20 @@ export const useKeyboardNavigation = ( {
 			} else if ( event.key === 'Escape' ) {
 				setSelectedIndex( undefined );
 				setIsNavigating( false );
-				chartRef.current?.focus();
+				focusChart();
 			} else if ( ( event.key === 'Enter' || event.key === ' ' ) && selectedIndex !== undefined ) {
 				onActivate?.( selectedIndex );
 			}
 		},
-		[ totalPoints, selectedIndex, setSelectedIndex, setIsNavigating, chartRef, onActivate ]
+		[
+			totalPoints,
+			selectedIndex,
+			setSelectedIndex,
+			setIsNavigating,
+			chartRef,
+			onActivate,
+			preventTooltipScroll,
+		]
 	);
 
 	return {

package/src/components/tooltip/test/accessible-tooltip.test.tsx

@@ -86,6 +86,38 @@ describe( 'AccessibleTooltip', () => {
 		}
 	} );
 
+	it.each( [
+		[ 'Tab', '{Tab}' ],
+		[ 'Escape', '{Escape}' ],
+	] )( 'requests scroll suppression when returning focus after %s', async ( _name, keys ) => {
+		const user = userEvent.setup();
+		renderChart( undefined, 'below-axis' );
+		await openTooltip();
+		const focus = jest.spyOn( screen.getByRole( 'grid' ), 'focus' );
+		try {
+			await user.keyboard( keys );
+			expect( focus ).toHaveBeenCalledWith( { preventScroll: true } );
+		} finally {
+			focus.mockRestore();
+		}
+	} );
+
+	it.each( [
+		[ 'Tab', '{Tab}' ],
+		[ 'Escape', '{Escape}' ],
+	] )( 'keeps default focus scrolling when returning focus after %s', async ( _name, keys ) => {
+		const user = userEvent.setup();
+		renderChart();
+		await openTooltip();
+		const focus = jest.spyOn( screen.getByRole( 'grid' ), 'focus' );
+		try {
+			await user.keyboard( keys );
+			expect( focus ).toHaveBeenCalledWith();
+		} finally {
+			focus.mockRestore();
+		}
+	} );
+
 	it( 'falls back to the catalog default when the role is unset', async () => {
 		renderChart();
 

package/src/components/tooltip/test/xy-chart-tooltip.test.tsx

@@ -1,9 +1,9 @@
 import { render, screen, waitFor } from '@testing-library/react';
-import { BarSeries, LineSeries, TooltipContext, XYChart } from '@visx/xychart';
+import { BarSeries, buildChartTheme, LineSeries, TooltipContext, XYChart } from '@visx/xychart';
 import { useContext, useEffect } from 'react';
 import { XyChartTooltip } from '../xy-chart-tooltip';
 import type { XyChartTooltipProps } from '../../../visx/types';
-import type { EventHandlerParams } from '@visx/xychart';
+import type { EventHandlerParams, XYChartTheme } from '@visx/xychart';
 
 type Datum = { x: number; y: number };
 
@@ -76,7 +76,8 @@ const renderChart = (
 	params: EventHandlerParams< Datum >[] = [
 		{ key: 'A', index: 1, datum: SERIES_A[ 1 ], svgPoint: { x: 123, y: 45 } },
 	],
-	margin = NO_MARGIN
+	margin = NO_MARGIN,
+	theme?: XYChartTheme
 ) =>
 	render(
 		<div data-testid="wrapper" style={ { position: 'relative' } }>
@@ -84,6 +85,7 @@ const renderChart = (
 				width={ 200 }
 				height={ 100 }
 				margin={ margin }
+				theme={ theme }
 				xScale={ { type: 'linear', domain: [ 0, 10 ] } }
 				yScale={ { type: 'linear', domain: [ 0, 100 ] } }
 			>
@@ -100,6 +102,23 @@ const renderChart = (
 	);
 
 describe( 'XyChartTooltip', () => {
+	test.each( [
+		[ 'CanvasText', '0 1px 2px #22222255' ],
+		[ '#123456', '0 1px 2px #12345655' ],
+	] )( 'renders a valid shadow for htmlLabel color %s', async ( color, boxShadow ) => {
+		const theme = buildChartTheme( {
+			backgroundColor: '#ffffff',
+			colors: [ '#123456' ],
+			tickLength: 4,
+			gridColor: '#dddddd',
+			gridColorDark: '#222222',
+			htmlLabel: { color },
+		} );
+		renderChart( {}, undefined, undefined, theme );
+
+		await expect( screen.findByTestId( 'tooltip-box' ) ).resolves.toHaveStyle( { boxShadow } );
+	} );
+
 	test( 'renders the tooltip box inside the chart wrapper, not in a body-level portal', async () => {
 		const { container } = renderChart();
 

package/src/components/tooltip/xy-chart-tooltip.tsx

@@ -2,6 +2,7 @@ import { Tooltip, defaultStyles } from '@visx/tooltip';
 import { DataContext, TooltipContext } from '@visx/xychart';
 import { useCallback, useContext, useState } from 'react';
 import { createPortal } from 'react-dom';
+import { isValidHexColor } from '../../utils';
 import { BoundedTooltip } from './private/bounded-tooltip';
 import type {
 	CrosshairStyle,
@@ -220,7 +221,7 @@ const XyChartTooltipContent = < Datum extends object >( {
 		zIndex,
 		backgroundColor: theme?.backgroundColor ?? 'white',
 		boxShadow: `0 1px 2px ${
-			theme?.htmlLabel?.color ? `${ theme.htmlLabel.color }55` : '#22222255'
+			isValidHexColor( theme?.htmlLabel?.color ) ? `${ theme.htmlLabel.color }55` : '#22222255'
 		}`,
 		...theme?.htmlLabel,
 		...style,

package/src/styles/chart-scope.scss

@@ -42,9 +42,7 @@
 	// The literal is load-bearing: a `fill` reading a fallback-less var() on an
 	// undeclared property drops the declaration and paints black instead.
 	--a8c-charts-color-label-background: transparent;
-	// The SVG axis and tick labels. Narrower than --a8c-charts-color-label and
-	// derived from it, so setting the broad role moves every label at once while
-	// setting this one moves only the axis.
+	// See TOKENS.md's "Broad roles and narrow ones" for label inheritance.
 	--a8c-charts-color-label-axis: var(--a8c-charts-color-label);
 	--a8c-charts-color-annotation: var(--wpds-color-foreground-content-neutral);
 	--a8c-charts-color-trend-up: var(--wpds-color-foreground-content-success-weak);
@@ -86,3 +84,13 @@
 	--a8c-charts-dimension-leaderboard-row-gap: var(--wpds-dimension-gap-md);
 	--a8c-charts-dimension-leaderboard-column-gap: var(--wpds-dimension-gap-xs);
 }
+
+@media (forced-colors: active) {
+
+	:where(.a8c-charts-scope) {
+		--a8c-charts-color-label-axis: CanvasText;
+		--a8c-charts-color-grid: GrayText;
+		--a8c-charts-color-axis-x: GrayText;
+		--a8c-charts-color-tick-x: GrayText;
+	}
+}

package/src/styles/test/chart-scope.test.ts

@@ -1,5 +1,6 @@
 import { readFileSync } from 'node:fs';
 import { join } from 'node:path';
+import { compileString } from 'sass-embedded';
 
 const stylesheet = readFileSync( join( __dirname, '..', 'chart-scope.scss' ), 'utf8' );
 const tokensDoc = readFileSync( join( __dirname, '..', '..', '..', 'TOKENS.md' ), 'utf8' );
@@ -19,7 +20,7 @@ type Entry = {
  * @return Every declared `--a8c-charts-*` property, keyed by name.
  */
 function parseStylesheet(): Map< string, Entry > {
-	const body = stylesheet.slice( stylesheet.indexOf( '{' ) + 1, stylesheet.lastIndexOf( '}' ) );
+	const body = stylesheet.slice( stylesheet.indexOf( '{' ) + 1, stylesheet.indexOf( '}' ) );
 	const entries = new Map< string, Entry >();
 
 	for ( const declaration of body
@@ -112,6 +113,39 @@ const declared = parseStylesheet();
 const documented = parseTokensDoc();
 
 describe( 'chart scope catalog', () => {
+	it( 'uses system colors for axis text and visible lines only under forced colors', () => {
+		const style = document.createElement( 'style' );
+		style.textContent = compileString( stylesheet ).css;
+		document.head.appendChild( style );
+
+		try {
+			const mediaRules = Array.from( style.sheet!.cssRules ).filter(
+				( rule ): rule is CSSMediaRule => rule.type === CSSRule.MEDIA_RULE
+			);
+			expect( mediaRules ).toHaveLength( 1 );
+			expect( mediaRules[ 0 ].conditionText ).toBe( '(forced-colors: active)' );
+			expect( mediaRules[ 0 ].cssRules ).toHaveLength( 1 );
+
+			const rule = mediaRules[ 0 ].cssRules[ 0 ] as CSSStyleRule;
+			expect( rule.selectorText ).toBe( ':where(.a8c-charts-scope)' );
+			expect(
+				Object.fromEntries(
+					Array.from( rule.style ).map( property => [
+						property,
+						rule.style.getPropertyValue( property ).trim().toLowerCase(),
+					] )
+				)
+			).toEqual( {
+				'--a8c-charts-color-label-axis': 'canvastext',
+				'--a8c-charts-color-grid': 'graytext',
+				'--a8c-charts-color-axis-x': 'graytext',
+				'--a8c-charts-color-tick-x': 'graytext',
+			} );
+		} finally {
+			style.remove();
+		}
+	} );
+
 	it( 'documents every declared role, and declares every documented one', () => {
 		expect( [ ...documented.keys() ].sort() ).toEqual( [ ...declared.keys() ].sort() );
 	} );