@automattic/charts 4.8.0 → 4.9.0

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

@@ -1,12 +1,11 @@
 import { Group } from '@visx/group';
-import { Pie } from '@visx/shape';
-import { useTooltip } from '@visx/tooltip';
+import { arc, pie } from '@visx/shape';
 import { color as d3Color } from '@visx/vendor/d3-color';
+import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import isEqual from 'fast-deep-equal';
-import { useCallback, useContext, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useContext, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { Legend, useChartLegendItems } from '../../components/legend';
-import { BoundedTooltip } from '../../components/tooltip/private/bounded-tooltip';
 import { LabelValueContent } from '../../components/tooltip/private/label-value-content';
 import {
 	useDataWithPercentages,
@@ -22,7 +21,6 @@ import {
 	GlobalChartsContext,
 } from '../../providers';
 import { CATALOG_POINTERS } from '../../providers/chart-context/private/catalog-pointers';
-import { useStandaloneScopeClass } from '../../providers/chart-scope';
 import { attachSubComponents, createCssVariableResolver, resolveFontSize } from '../../utils';
 import { getStringWidth } from '../../visx/text';
 import { Center } from '../private/center';
@@ -30,6 +28,12 @@ import { ChartSVG, ChartHTML, useChartChildren } from '../private/chart-composit
 import { ChartInstanceContext } from '../private/chart-instance-context';
 import { ChartLayout } from '../private/chart-layout';
 import { pickLabelTextColor, resolveLabelRoles } from '../private/label-text-color';
+import {
+	orderArcsForNavigation,
+	PieSelectionOutput,
+	SelectedSegmentRing,
+	usePieKeyboardNavigation,
+} from '../private/pie-keyboard-navigation';
 import { RadialWipeAnimation } from '../private/radial-wipe-animation/';
 import { getAllHiddenMessage, SvgEmptyState } from '../private/svg-empty-state';
 import { withResponsive, ResponsiveConfig } from '../private/with-responsive';
@@ -43,7 +47,11 @@ import type {
 } from '../../types';
 import type { ChartComponentWithComposition } from '../private/chart-composition';
 import type { LabelRoles, LabelTextColor } from '../private/label-text-color';
-import type { JSX, SVGProps, MouseEvent, ReactNode, FC } from 'react';
+import type { PieProvidedProps } from '@visx/shape';
+import type { JSX, ReactNode, FC } from 'react';
+
+type PieDatum = DataPointPercentageCalculated & { index: number };
+type PieArcDatum = PieProvidedProps< PieDatum >[ 'arcs' ][ number ];
 
 /**
  * Parameters passed to the renderTooltip function for pie charts.
@@ -130,6 +138,11 @@ export interface PieChartProps extends BaseChartProps< DataPointPercentage[] > {
 	 * When provided, replaces the default `label: value` tooltip with custom content.
 	 */
 	renderTooltip?: ( params: PieChartRenderTooltipParams ) => ReactNode;
+
+	/**
+	 * Accessible name of the chart. Defaults to a localized "Pie chart".
+	 */
+	ariaLabel?: string;
 }
 
 // Base props type with optional responsive properties
@@ -201,6 +214,7 @@ const PieChartInternal = ( {
 	tooltipOffsetX = 0,
 	tooltipOffsetY = -15,
 	renderTooltip = renderDefaultPieTooltip,
+	ariaLabel,
 	gap = 'md',
 }: PieChartProps ) => {
 	const legendInteractive = legend.interactive ?? false;
@@ -208,12 +222,6 @@ const PieChartInternal = ( {
 
 	const providerTheme = useGlobalChartsTheme();
 	const chartId = useChartId( providedChartId );
-	const { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip } =
-		useTooltip< DataPointPercentageCalculated >();
-	const standaloneScopeClass = useStandaloneScopeClass();
-
-	// The tooltip renders inside this element, so pointer coordinates are taken relative to it.
-	const containerRef = useRef< HTMLDivElement >( null );
 
 	// The element the chart's own `className` lands on, so an override set there reaches this
 	// decision the same way it reaches CSS.
@@ -221,13 +229,6 @@ const PieChartInternal = ( {
 	// 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 ) {
-			return;
-		}
-		hideTooltip();
-	}, [ withTooltips, hideTooltip ] );
-
 	const { getElementStyles, isSeriesVisible, isColorPaletteResolved } = useGlobalChartsContext();
 	const { isValid, message } = validateData( data );
 
@@ -292,14 +293,7 @@ const PieChartInternal = ( {
 	} );
 
 	const prefersReducedMotion = usePrefersReducedMotion();
-
-	if ( ! isValid ) {
-		return (
-			<div className={ clsx( 'pie-chart', styles[ 'pie-chart' ], className ) }>
-				<div className={ styles[ 'error-message' ] }>{ message }</div>
-			</div>
-		);
-	}
+	const wipeMask = animation && ! prefersReducedMotion ? `url(#radial-wipe-${ chartId })` : null;
 
 	// Calculate the angle between each (use original data length for consistent spacing)
 	const padAngle = gapScale * ( ( 2 * Math.PI ) / data.length );
@@ -321,6 +315,32 @@ const PieChartInternal = ( {
 		},
 	};
 
+	const arcs = pie< PieDatum >( { value: accessors.value, padAngle } )( dataWithIndex );
+	const navigationArcs = orderArcsForNavigation( arcs );
+
+	const {
+		chartRef,
+		svgRef,
+		selectedArc,
+		getSegmentHandlers,
+		getKeyboardTooltipAnchor,
+		selectionOutputProps,
+		chartProps,
+	} = usePieKeyboardNavigation( {
+		navigationArcs,
+		withTooltips,
+		tooltipOffsetX,
+		tooltipOffsetY,
+	} );
+
+	if ( ! isValid ) {
+		return (
+			<div className={ clsx( 'pie-chart', styles[ 'pie-chart' ], className ) }>
+				<div className={ styles[ 'error-message' ] }>{ message }</div>
+			</div>
+		);
+	}
+
 	const legendElement = showLegend && (
 		<Legend
 			orientation={ legend.orientation ?? 'horizontal' }
@@ -383,9 +403,72 @@ const PieChartInternal = ( {
 						? Math.min( cornerScale * outerRadius, maxCornerRadius )
 						: 0;
 
+					const path = arc< PieArcDatum >( { innerRadius, outerRadius, cornerRadius } );
+
+					const svgLabelSmall = providerTheme.svgLabelSmall;
+					const fontSize = resolveFontSize( svgLabelSmall?.fontSize ) ?? 12;
+
+					const renderLabel = ( arcDatum: PieArcDatum, index: number ) => {
+						if ( arcDatum.endAngle - arcDatum.startAngle < 0.25 ) {
+							return null;
+						}
+
+						const [ centroidX, centroidY ] = path.centroid( arcDatum );
+						const estimatedTextWidth = getStringWidth( arcDatum.data.label, {
+							fontSize,
+							fontFamily: svgLabelSmall?.fontFamily,
+							fontWeight: svgLabelSmall?.fontWeight,
+						} );
+						const labelPadding = 6;
+						const backgroundWidth = estimatedTextWidth + labelPadding * 2;
+						const backgroundHeight = fontSize + labelPadding * 2;
+
+						return (
+							<g key={ `label-${ index }` }>
+								<rect
+									className={ styles[ 'pie-chart__label-plate' ] }
+									x={ centroidX - backgroundWidth / 2 }
+									y={ centroidY - backgroundHeight / 2 }
+									width={ backgroundWidth }
+									height={ backgroundHeight }
+									rx={ 4 }
+									ry={ 4 }
+									pointerEvents="none"
+								/>
+								<text
+									className={ clsx(
+										styles[ 'pie-chart__label-text' ],
+										LABEL_TEXT_MODIFIER[
+											pickLabelTextColor(
+												accessors.fill( arcDatum.data ),
+												labelRoles,
+												'label-inverse'
+											)
+										]
+									) }
+									data-testid="pie-label"
+									x={ centroidX }
+									y={ centroidY }
+									dy=".33em"
+									fontSize={ fontSize }
+									textAnchor="middle"
+									pointerEvents="none"
+								>
+									{ arcDatum.data.label }
+								</text>
+							</g>
+						);
+					};
+
 					return (
-						<Center ref={ containerRef } className={ styles[ 'pie-chart__plot' ] }>
+						<Center
+							ref={ chartRef }
+							className={ styles[ 'pie-chart__plot' ] }
+							{ ...chartProps }
+							aria-label={ ariaLabel ?? __( 'Pie chart', 'jetpack-charts' ) }
+						>
 							<svg
+								ref={ svgRef }
 								viewBox={ `0 0 ${ width } ${ height }` }
 								preserveAspectRatio="xMidYMid meet"
 								width={ width }
@@ -399,125 +482,52 @@ const PieChartInternal = ( {
 									/>
 								</defs>
 
-								<Group
-									top={ centerY }
-									left={ centerX }
-									mask={
-										animation && ! prefersReducedMotion ? `url(#radial-wipe-${ chartId })` : null
-									}
-								>
+								<Group top={ centerY } left={ centerX } mask={ wipeMask }>
 									{ allSegmentsHidden ? (
 										<SvgEmptyState x={ 0 } y={ 0 } width={ width } height={ height }>
 											{ getAllHiddenMessage( legendInteractive, 'segments' ) }
 										</SvgEmptyState>
 									) : (
-										<Pie< DataPointPercentageCalculated & { index: number } >
-											data={ dataWithIndex }
-											pieValue={ accessors.value }
-											outerRadius={ outerRadius }
-											innerRadius={ innerRadius }
-											padAngle={ padAngle }
-											cornerRadius={ cornerRadius }
-										>
-											{ pie => {
-												return pie.arcs.map( ( arc, index ) => {
-													const [ centroidX, centroidY ] = pie.path.centroid( arc );
-													const hasSpaceForLabel = arc.endAngle - arc.startAngle >= 0.25;
-													const handleMouseMove = ( event: MouseEvent< SVGElement > ) => {
-														if ( ! withTooltips ) {
-															return;
-														}
-
-														const bounds = containerRef.current?.getBoundingClientRect();
-														if ( ! bounds ) {
-															return;
-														}
-
-														showTooltip( {
-															tooltipData: arc.data,
-															tooltipLeft: event.clientX - bounds.left + tooltipOffsetX,
-															tooltipTop: event.clientY - bounds.top + tooltipOffsetY,
-														} );
-													};
-
-													const fill = accessors.fill( arc.data );
-													const pathProps: SVGProps< SVGPathElement > & {
-														'data-testid'?: string;
-													} = {
-														d: pie.path( arc ) || '',
-														fill,
-														'data-testid': 'pie-segment',
-													};
-
-													const groupProps: SVGProps< SVGGElement > = {};
-													if ( withTooltips ) {
-														groupProps.onMouseMove = handleMouseMove;
-														groupProps.onMouseLeave = onMouseLeave;
-													}
-
-													const svgLabelSmall = providerTheme.svgLabelSmall;
-													const fontSize = resolveFontSize( svgLabelSmall?.fontSize ) ?? 12;
-													const estimatedTextWidth = getStringWidth( arc.data.label, {
-														fontSize,
-														fontFamily: svgLabelSmall?.fontFamily,
-														fontWeight: svgLabelSmall?.fontWeight,
-													} );
-													const labelPadding = 6;
-													const backgroundWidth = estimatedTextWidth + labelPadding * 2;
-													const backgroundHeight = fontSize + labelPadding * 2;
-
-													return (
-														<g key={ `arc-${ index }` } { ...groupProps }>
-															<path { ...pathProps } />
-															{ showLabels && hasSpaceForLabel && (
-																<g>
-																	<rect
-																		className={ styles[ 'pie-chart__label-plate' ] }
-																		x={ centroidX - backgroundWidth / 2 }
-																		y={ centroidY - backgroundHeight / 2 }
-																		width={ backgroundWidth }
-																		height={ backgroundHeight }
-																		rx={ 4 }
-																		ry={ 4 }
-																		pointerEvents="none"
-																	/>
-																	<text
-																		className={ clsx(
-																			styles[ 'pie-chart__label-text' ],
-																			LABEL_TEXT_MODIFIER[
-																				pickLabelTextColor( fill, labelRoles, 'label-inverse' )
-																			]
-																		) }
-																		data-testid="pie-label"
-																		x={ centroidX }
-																		y={ centroidY }
-																		dy=".33em"
-																		fontSize={ fontSize }
-																		textAnchor="middle"
-																		pointerEvents="none"
-																	>
-																		{ arc.data.label }
-																	</text>
-																</g>
-															) }
-														</g>
-													);
-												} );
-											} }
-										</Pie>
+										arcs.map( ( arcDatum, index ) => (
+											<g
+												key={ `arc-${ index }` }
+												{ ...getSegmentHandlers(
+													arcDatum.data,
+													navigationArcs.indexOf( arcDatum )
+												) }
+											>
+												<path
+													d={ path( arcDatum ) || '' }
+													fill={ accessors.fill( arcDatum.data ) }
+													data-testid="pie-segment"
+												/>
+											</g>
+										) )
 									) }
-
-									{ /* Render SVG children (like Group, Text) inside the SVG */ }
-									{ ! allSegmentsHidden && svgChildren }
 								</Group>
+								{ /* Unmasked so the entry wipe cannot hide the focus indicator. */ }
+								{ selectedArc && (
+									<Group top={ centerY } left={ centerX }>
+										<SelectedSegmentRing chartId={ chartId } d={ path( selectedArc ) || '' } />
+									</Group>
+								) }
+								{ ! allSegmentsHidden && (
+									<Group top={ centerY } left={ centerX } mask={ wipeMask }>
+										{ showLabels && arcs.map( renderLabel ) }
+
+										{ /* Render SVG children (like Group, Text) inside the SVG */ }
+										{ svgChildren }
+									</Group>
+								) }
 							</svg>
-							{ withTooltips && tooltipOpen && tooltipData && (
-								<BoundedTooltip top={ tooltipTop || 0 } left={ tooltipLeft || 0 }>
-									<div className={ standaloneScopeClass } role="tooltip">
-										{ renderTooltip( { tooltipData } ) }
-									</div>
-								</BoundedTooltip>
-							) }
+							<PieSelectionOutput
+								{ ...selectionOutputProps }
+								keyboardTooltipAnchor={
+									selectedArc &&
+									getKeyboardTooltipAnchor( centerX, centerY, path.centroid( selectedArc ) )
+								}
+								renderTooltip={ renderTooltip }
+							/>
 						</Center>
 					);
 				} }

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

@@ -773,6 +773,121 @@ describe( 'PieChart', () => {
 			expect( screen.queryByText( /Click legend items to show data/i ) ).not.toBeInTheDocument();
 		} );
 	} );
+
+	describe( 'Keyboard navigation', () => {
+		const data = [
+			{ label: 'MacOS', value: 30000, valueDisplay: '30K' },
+			{ label: 'Linux', value: 22000, valueDisplay: '22K' },
+		];
+
+		test.each( [
+			[ undefined, 'Pie chart' ],
+			[ 'Devices', 'Devices' ],
+		] )( 'names the focusable chart from ariaLabel %p', ( ariaLabel, name ) => {
+			render( <PieChart data={ data } ariaLabel={ ariaLabel } /> );
+			expect( screen.getByRole( 'application', { name } ) ).toHaveAttribute( 'tabindex', '0' );
+		} );
+
+		const expectRingOn = ( segment: HTMLElement ) =>
+			expect( screen.getByTestId( 'pie-selected-ring' ) ).toHaveAttribute(
+				'd',
+				segment.getAttribute( 'd' )
+			);
+
+		test( 'arrow keys move the focused tooltip and highlight across segments', async () => {
+			const user = userEvent.setup();
+			render( <PieChart data={ data } withTooltips /> );
+			const [ macos, linux ] = screen.getAllByTestId( 'pie-segment' );
+			expect( screen.queryByTestId( 'pie-selected-ring' ) ).not.toBeInTheDocument();
+
+			await user.tab();
+			await user.keyboard( '{ArrowRight}' );
+			await expect( screen.findByTestId( 'chart-tooltip-0' ) ).resolves.toHaveTextContent(
+				'MacOS'
+			);
+			expect( screen.getByTestId( 'chart-tooltip-0' ) ).toHaveFocus();
+			expectRingOn( macos );
+
+			await user.keyboard( '{ArrowRight}' );
+			await expect( screen.findByTestId( 'chart-tooltip-1' ) ).resolves.toHaveTextContent(
+				'Linux'
+			);
+			expectRingOn( linux );
+		} );
+
+		test( 'announces and highlights a segment without a tooltip when withTooltips is false', async () => {
+			const user = userEvent.setup();
+			render( <PieChart data={ data } /> );
+			const status = screen.getByRole( 'status' );
+			expect( status ).toBeEmptyDOMElement();
+
+			await user.tab();
+			await user.keyboard( '{ArrowRight}' );
+			expectRingOn( screen.getAllByTestId( 'pie-segment' )[ 0 ] );
+			expect( screen.queryByRole( 'tooltip' ) ).not.toBeInTheDocument();
+			expect( status ).toHaveTextContent( 'MacOS: 30K' );
+		} );
+
+		test( 'leaves the announcement to the focused tooltip when withTooltips is true', async () => {
+			const user = userEvent.setup();
+			render( <PieChart data={ data } withTooltips /> );
+
+			await user.tab();
+			await user.keyboard( '{ArrowRight}' );
+			await expect( screen.findByTestId( 'chart-tooltip-0' ) ).resolves.toBeInTheDocument();
+			expect( screen.getByRole( 'status' ) ).toBeEmptyDOMElement();
+		} );
+
+		test.each( [
+			[ true, [ 'Linux: 22K' ] ],
+			[ false, [] ],
+		] )(
+			'hovering a segment ends the keyboard selection (withTooltips %p)',
+			async ( withTooltips, tooltips ) => {
+				const user = userEvent.setup();
+				render( <PieChart data={ data } withTooltips={ withTooltips } /> );
+
+				await user.tab();
+				await user.keyboard( '{ArrowRight}' );
+				expect( screen.getByTestId( 'pie-selected-ring' ) ).toBeInTheDocument();
+
+				await user.hover( screen.getAllByTestId( 'pie-segment' )[ 1 ] );
+
+				expect( screen.queryByTestId( 'pie-selected-ring' ) ).not.toBeInTheDocument();
+				expect( screen.queryByTestId( 'chart-tooltip-0' ) ).not.toBeInTheDocument();
+				expect( screen.queryAllByRole( 'tooltip' ).map( tooltip => tooltip.textContent ) ).toEqual(
+					tooltips
+				);
+			}
+		);
+
+		test( 'keeps focus in the chart when tooltips are turned off under a keyboard selection', async () => {
+			const user = userEvent.setup();
+			const { rerender } = render( <PieChart data={ data } withTooltips /> );
+
+			await user.tab();
+			await user.keyboard( '{ArrowRight}{ArrowRight}' );
+			await expect( screen.findByTestId( 'chart-tooltip-1' ) ).resolves.toHaveFocus();
+
+			rerender( <PieChart data={ data } withTooltips={ false } /> );
+
+			expect( screen.getByRole( 'application' ) ).toHaveFocus();
+			expectRingOn( screen.getAllByTestId( 'pie-segment' )[ 1 ] );
+		} );
+
+		test( 'keeps focus in the chart when an update removes the selected segment', async () => {
+			const user = userEvent.setup();
+			const { rerender } = render( <PieChart data={ data } withTooltips /> );
+
+			await user.tab();
+			await user.keyboard( '{ArrowRight}{ArrowRight}' );
+			await expect( screen.findByTestId( 'chart-tooltip-1' ) ).resolves.toHaveFocus();
+
+			rerender( <PieChart data={ data.slice( 0, 1 ) } withTooltips /> );
+
+			await expect( screen.findByTestId( 'chart-tooltip-0' ) ).resolves.toHaveFocus();
+		} );
+	} );
 } );
 
 // Chart container at (100, 50); the tooltip box measures 120x40. Everything
@@ -829,4 +944,60 @@ describe( 'PieChart tooltip position', () => {
 			transform: 'translate(60px, 65px)',
 		} );
 	} );
+
+	test( 'moves the keyboard tooltip with the segment when the chart resizes', async () => {
+		const rects = mockRects();
+		const rectOf = rects.getMockImplementation();
+		let svgShift = 0;
+		// The plot is centered in the 400x300 container, so its offset follows its committed size.
+		rects.mockImplementation( function ( this: Element ) {
+			const rect = rectOf.call( this );
+			if ( ! ( this instanceof SVGSVGElement && this.hasAttribute( 'viewBox' ) ) ) {
+				return rect;
+			}
+			const size = Number( this.getAttribute( 'width' ) );
+			return {
+				...rect,
+				left: 100 + ( 400 - size ) / 2 + svgShift,
+				top: 50 + ( 300 - size ) / 2 + svgShift,
+			};
+		} );
+		const user = userEvent.setup();
+		const data = [
+			{ label: 'A', value: 60, valueDisplay: '60' },
+			{ label: 'B', value: 40, valueDisplay: '40' },
+		];
+		const renderAtSize = ( size: number ) => (
+			<GlobalChartsProvider>
+				<PieChart data={ data } width={ 400 } height={ 300 } size={ size } withTooltips />
+			</GlobalChartsProvider>
+		);
+		const selectFirstSegment = async () => {
+			await user.tab();
+			await user.keyboard( '{ArrowRight}' );
+			await expect( screen.findByTestId( 'chart-tooltip-0' ) ).resolves.toHaveFocus();
+			return screen.getByTestId( 'bounded-tooltip' ).style.transform;
+		};
+
+		const translation = ( transform: string ) => transform.match( /-?[\d.]+/g )?.map( Number );
+
+		const view = render( renderAtSize( 100 ) );
+		const expected = await selectFirstSegment();
+		view.unmount();
+
+		svgShift = 7;
+		const { unmount } = render( renderAtSize( 100 ) );
+		expect( translation( await selectFirstSegment() ) ).toEqual(
+			translation( expected )?.map( value => value + 7 )
+		);
+		unmount();
+		svgShift = 0;
+
+		const { rerender } = render( renderAtSize( 200 ) );
+		await expect( selectFirstSegment() ).resolves.not.toBe( expected );
+		rerender( renderAtSize( 100 ) );
+
+		await expect( screen.findByTestId( 'chart-tooltip-0' ) ).resolves.toHaveFocus();
+		expect( screen.getByTestId( 'bounded-tooltip' ) ).toHaveStyle( { transform: expected } );
+	} );
 } );