@automattic/charts 4.7.0 → 4.9.0

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

@@ -42,12 +42,12 @@ describe( 'BarChart', () => {
 	// visx renders bars and grid lines without accessible roles or configurable test IDs.
 	const getBarRects = () => {
 		// eslint-disable-next-line testing-library/no-node-access -- See the visx node constraint above.
-		return screen.getByRole( 'grid' ).querySelectorAll( '.visx-bar-group rect' );
+		return screen.getByRole( 'application' ).querySelectorAll( '.visx-bar-group rect' );
 	};
 
 	const getGridLines = () => {
 		// eslint-disable-next-line testing-library/no-node-access -- visx grid lines cannot receive test IDs.
-		return screen.getByRole( 'grid' ).querySelectorAll( '.visx-rows line' );
+		return screen.getByRole( 'application' ).querySelectorAll( '.visx-rows line' );
 	};
 
 	const renderWithTheme = ( props = {}, children = undefined ) => {
@@ -151,20 +151,21 @@ describe( 'BarChart', () => {
 
 		const pointer = ( type: string, clientX: number, clientY: number ) => {
 			// visx owns the pointer capture rect and does not expose an attribute prop for it.
+			const chart = screen.getByRole( 'application' );
 			// eslint-disable-next-line testing-library/no-node-access
-			const target = screen.getByRole( 'grid' ).querySelector( 'svg > rect[fill="transparent"]' );
+			const target = chart.querySelector( 'svg > rect[fill="transparent"]' );
 			fireEvent( target, new MouseEvent( type, { bubbles: true, clientX, clientY } ) );
 		};
 
 		const hover = ( clientX: number, clientY: number ) =>
 			pointer( 'pointermove', clientX, clientY );
 
-		test( 'Escape returns focus to the grid without reopening either tooltip', async () => {
+		test( 'Escape returns focus to the chart without reopening either tooltip', async () => {
 			jest.useFakeTimers();
 			try {
 				const user = userEvent.setup( { advanceTimers: jest.advanceTimersByTime } );
 				renderWithTheme( { withTooltips: true } );
-				const chart = screen.getByRole( 'grid', { name: /bar chart/i } );
+				const chart = screen.getByRole( 'application', { name: /bar chart/i } );
 				await user.tab();
 				await user.keyboard( '{ArrowRight}' );
 				expect( screen.getByTestId( 'chart-tooltip-0' ) ).toHaveFocus();
@@ -369,7 +370,7 @@ describe( 'BarChart', () => {
 			unmount();
 			renderWithTheme( { withBandHighlight: true, onBandHighlightChange } );
 			expect( warn ).toHaveBeenCalledTimes( 1 );
-			expect( screen.getByRole( 'grid' ) ).toBeInTheDocument();
+			expect( screen.getByRole( 'application' ) ).toBeInTheDocument();
 			expect( warn ).toHaveBeenCalledWith(
 				'[Charts] BarChart: withBandHighlight and onBandHighlightChange require withTooltips.'
 			);
@@ -473,7 +474,7 @@ describe( 'BarChart', () => {
 
 		test( 'labels a whole-number range smaller than the tick count once per whole number', () => {
 			renderWithTheme( { data: wholeNumberData } );
-			const chart = screen.getByRole( 'grid', { name: /bar chart/i } );
+			const chart = screen.getByRole( 'application', { name: /bar chart/i } );
 			const ticks = within( chart )
 				.getAllByText( /^-?[\d.,]+$/ )
 				.map( el => el.textContent );
@@ -482,7 +483,7 @@ describe( 'BarChart', () => {
 
 		test( 'labels a horizontal whole-number range once per whole number', () => {
 			renderWithTheme( { data: wholeNumberData, orientation: 'horizontal' } );
-			const chart = screen.getByRole( 'grid', { name: /bar chart/i } );
+			const chart = screen.getByRole( 'application', { name: /bar chart/i } );
 			const ticks = within( chart )
 				.getAllByText( /^-?[\d.,]+$/ )
 				.map( el => el.textContent );
@@ -501,7 +502,7 @@ describe( 'BarChart', () => {
 					},
 				],
 			} );
-			const chart = screen.getByRole( 'grid', { name: /bar chart/i } );
+			const chart = screen.getByRole( 'application', { name: /bar chart/i } );
 			const ticks = within( chart )
 				.getAllByText( /^-?[\d.,]+$/ )
 				.map( el => el.textContent );
@@ -530,7 +531,7 @@ describe( 'BarChart', () => {
 						},
 					},
 				} );
-				const chart = screen.getByRole( 'grid', { name: /bar chart/i } );
+				const chart = screen.getByRole( 'application', { name: /bar chart/i } );
 				expect( within( chart ).getAllByText( /^\d+%$/ ) ).toHaveLength( 6 );
 			}
 		);
@@ -540,7 +541,7 @@ describe( 'BarChart', () => {
 				data: wholeNumberData,
 				options: { axis: { y: { tickValues: [ 0, 0.5, 1 ] } } },
 			} );
-			const chart = screen.getByRole( 'grid', { name: /bar chart/i } );
+			const chart = screen.getByRole( 'application', { name: /bar chart/i } );
 			expect( within( chart ).getAllByText( /^-?[\d.,]+$/ ) ).toHaveLength( 3 );
 		} );
 	} );
@@ -584,7 +585,7 @@ describe( 'BarChart', () => {
 					},
 				],
 			} );
-			expect( screen.getByRole( 'grid', { name: /bar chart/i } ) ).toBeInTheDocument();
+			expect( screen.getByRole( 'application', { name: /bar chart/i } ) ).toBeInTheDocument();
 		} );
 
 		test( 'handles negative values', () => {
@@ -600,7 +601,7 @@ describe( 'BarChart', () => {
 					},
 				],
 			} );
-			expect( screen.getByRole( 'grid', { name: /bar chart/i } ) ).toBeInTheDocument();
+			expect( screen.getByRole( 'application', { name: /bar chart/i } ) ).toBeInTheDocument();
 		} );
 
 		test( 'renders a bucket with no reading instead of failing the whole chart', () => {
@@ -617,7 +618,7 @@ describe( 'BarChart', () => {
 				],
 			} );
 			expect( screen.queryByText( /invalid data/i ) ).not.toBeInTheDocument();
-			expect( screen.getByRole( 'grid', { name: /bar chart/i } ) ).toBeInTheDocument();
+			expect( screen.getByRole( 'application', { name: /bar chart/i } ) ).toBeInTheDocument();
 		} );
 
 		test( 'draws no bar for a bucket with no reading', () => {
@@ -736,7 +737,7 @@ describe( 'BarChart', () => {
 			expect( screen.getAllByTestId( 'legend-item' ) ).toHaveLength( 2 );
 			const html = document.body.innerHTML;
 			expect( html.indexOf( 'data-testid="legend-horizontal"' ) ).toBeLessThan(
-				html.indexOf( 'role="grid"' )
+				html.indexOf( 'role="application"' )
 			);
 		} );
 	} );
@@ -744,7 +745,7 @@ describe( 'BarChart', () => {
 	describe( 'Grid tick counts', () => {
 		const getPositions = ( selector: string, coordinate: string ) => {
 			// eslint-disable-next-line testing-library/no-node-access -- See the visx node constraint above.
-			const lines = screen.getByRole( 'grid' ).querySelectorAll( selector );
+			const lines = screen.getByRole( 'application' ).querySelectorAll( selector );
 			return Array.from( lines, line => Number( line.getAttribute( coordinate ) ) );
 		};
 
@@ -806,24 +807,49 @@ describe( 'BarChart', () => {
 		);
 	} );
 
+	describe( 'Axis display', () => {
+		test.each( [
+			[ 'vertical', 'x', 'y' ],
+			[ 'vertical', 'y', 'x' ],
+			[ 'horizontal', 'x', 'y' ],
+			[ 'horizontal', 'y', 'x' ],
+		] )( 'skips a hidden axis (%s, hidden %s)', ( orientation, hidden, shown ) => {
+			renderWithTheme( {
+				orientation,
+				options: {
+					axis: {
+						[ hidden ]: { display: false, axisClassName: 'test-hidden-axis' },
+						[ shown ]: { axisClassName: 'test-shown-axis' },
+					},
+				},
+			} );
+			const chart = screen.getByRole( 'application' );
+
+			// eslint-disable-next-line testing-library/no-node-access -- See the visx node constraint above.
+			expect( chart.querySelector( '.test-hidden-axis' ) ).toBeNull();
+			// eslint-disable-next-line testing-library/no-node-access -- See the visx node constraint above.
+			expect( chart.querySelector( '.test-shown-axis' ) ).not.toBeNull();
+		} );
+	} );
+
 	describe( 'Grid Visibility', () => {
 		test( 'renders with different grid visibility options', () => {
 			const { rerender } = renderWithTheme( { gridVisibility: 'x' } );
-			expect( screen.getByRole( 'grid', { name: /bar chart/i } ) ).toBeInTheDocument();
+			expect( screen.getByRole( 'application', { name: /bar chart/i } ) ).toBeInTheDocument();
 
 			rerender(
 				<GlobalChartsProvider>
 					<BarChart { ...defaultProps } gridVisibility="y" />
 				</GlobalChartsProvider>
 			);
-			expect( screen.getByRole( 'grid', { name: /bar chart/i } ) ).toBeInTheDocument();
+			expect( screen.getByRole( 'application', { name: /bar chart/i } ) ).toBeInTheDocument();
 
 			rerender(
 				<GlobalChartsProvider>
 					<BarChart { ...defaultProps } gridVisibility="xy" />
 				</GlobalChartsProvider>
 			);
-			expect( screen.getByRole( 'grid', { name: /bar chart/i } ) ).toBeInTheDocument();
+			expect( screen.getByRole( 'application', { name: /bar chart/i } ) ).toBeInTheDocument();
 		} );
 	} );
 
@@ -905,7 +931,7 @@ describe( 'BarChart', () => {
 
 		// Scoped to the chart: @visx/text parks a measuring node on document.body,
 		// which a negative assertion would otherwise match.
-		const inChart = () => within( screen.getByRole( 'grid', { name: /bar chart/i } ) );
+		const inChart = () => within( screen.getByRole( 'application', { name: /bar chart/i } ) );
 
 		test( 'leaves tick values alone when a bucket is labelled rather than dated', () => {
 			// visx builds the band domain from `label || date`, so a labelled bucket
@@ -1109,7 +1135,7 @@ describe( 'BarChart', () => {
 		// on document.body, which outlives RTL's cleanup still holding the last
 		// string measured. Query inside the chart so a previous test's measurement
 		// can't answer for this one's axis.
-		const inChart = () => within( screen.getByRole( 'grid', { name: /bar chart/i } ) );
+		const inChart = () => within( screen.getByRole( 'application', { name: /bar chart/i } ) );
 
 		test( 'renders distinct date ticks for daily buckets within a year', () => {
 			renderWithTheme( {
@@ -1545,7 +1571,7 @@ describe( 'BarChart', () => {
 				],
 			} );
 
-			screen.getByRole( 'grid', { name: /bar chart/i } ).focus();
+			screen.getByRole( 'application', { name: /bar chart/i } ).focus();
 			await user.keyboard( '{ArrowRight}' );
 
 			// The month tick reads "2024" here; the tooltip names the bucket itself.
@@ -1604,7 +1630,7 @@ describe( 'BarChart', () => {
 
 		test( 'renders with patterns', () => {
 			renderWithTheme( { withPatterns: true } );
-			expect( screen.getByRole( 'grid', { name: /bar chart/i } ) ).toBeInTheDocument();
+			expect( screen.getByRole( 'application', { name: /bar chart/i } ) ).toBeInTheDocument();
 
 			// Check that pattern definitions container is present
 			expect( screen.getByTestId( 'bar-chart-patterns' ) ).toBeInTheDocument();
@@ -1612,7 +1638,7 @@ describe( 'BarChart', () => {
 
 		test( 'renders without patterns by default', () => {
 			renderWithTheme( { withPatterns: false } );
-			expect( screen.getByRole( 'grid', { name: /bar chart/i } ) ).toBeInTheDocument();
+			expect( screen.getByRole( 'application', { name: /bar chart/i } ) ).toBeInTheDocument();
 
 			// Check that no pattern definitions container is present
 			expect( screen.queryByTestId( 'bar-chart-patterns' ) ).not.toBeInTheDocument();
@@ -1654,17 +1680,26 @@ describe( 'BarChart', () => {
 		describe( 'Chart Focus and Accessibility Attributes', () => {
 			test( 'chart container has proper accessibility attributes', () => {
 				renderWithTheme();
-				const chart = screen.getByRole( 'grid', { name: /bar chart/i } );
+				const chart = screen.getByRole( 'application', { name: /bar chart/i } );
 
 				expect( chart ).toHaveAttribute( 'tabIndex', '0' );
-				expect( chart ).toHaveAttribute( 'role', 'grid' );
+				expect( chart ).toHaveAttribute( 'role', 'application' );
 				expect( chart ).toHaveAttribute( 'aria-label', 'Bar chart' );
 			} );
 
+			test.each( [
+				[ undefined, 'Bar chart' ],
+				[ 'Views over time', 'Views over time' ],
+			] )( 'names the chart container from ariaLabel %p', ( ariaLabel, name ) => {
+				renderWithTheme( { ariaLabel } );
+				expect( screen.getByRole( 'application', { name } ) ).toBeInTheDocument();
+				expect( screen.queryByLabelText( 'XYChart' ) ).not.toBeInTheDocument();
+			} );
+
 			test( 'chart container can receive focus', async () => {
 				const user = userEvent.setup();
 				renderWithTheme();
-				const chart = screen.getByRole( 'grid', { name: /bar chart/i } );
+				const chart = screen.getByRole( 'application', { name: /bar chart/i } );
 
 				await user.tab();
 				expect( chart ).toHaveFocus();
@@ -1694,7 +1729,7 @@ describe( 'BarChart', () => {
 				const onDatumActivate = jest.fn();
 				renderWithTheme( { withTooltips: true, data: [ SERIES_A ], onDatumActivate } );
 
-				screen.getByRole( 'grid', { name: /bar chart/i } ).focus();
+				screen.getByRole( 'application', { name: /bar chart/i } ).focus();
 				await user.keyboard( '{ArrowRight}{ArrowRight}{Enter}' );
 
 				expect( onDatumActivate ).toHaveBeenCalledTimes( 1 );
@@ -1710,7 +1745,7 @@ describe( 'BarChart', () => {
 				const onDatumActivate = jest.fn();
 				renderWithTheme( { withTooltips: true, data: [ SERIES_A ], onDatumActivate } );
 
-				screen.getByRole( 'grid', { name: /bar chart/i } ).focus();
+				screen.getByRole( 'application', { name: /bar chart/i } ).focus();
 				await user.keyboard( '{ArrowRight}[Space]' );
 
 				expect( onDatumActivate ).toHaveBeenCalledWith( {
@@ -1728,7 +1763,7 @@ describe( 'BarChart', () => {
 				const onDatumActivate = jest.fn();
 				renderWithTheme( { withTooltips: true, data: [ SERIES_A, SERIES_B ], onDatumActivate } );
 
-				screen.getByRole( 'grid', { name: /bar chart/i } ).focus();
+				screen.getByRole( 'application', { name: /bar chart/i } ).focus();
 				await user.keyboard( '{ArrowRight}{ArrowRight}{Enter}' );
 
 				expect( onDatumActivate ).toHaveBeenCalledWith( {
@@ -1743,7 +1778,7 @@ describe( 'BarChart', () => {
 				const onDatumActivate = jest.fn();
 				renderWithTheme( { withTooltips: true, data: [ SERIES_A ], onDatumActivate } );
 
-				screen.getByRole( 'grid', { name: /bar chart/i } ).focus();
+				screen.getByRole( 'application', { name: /bar chart/i } ).focus();
 				await user.keyboard( '{Enter}' );
 
 				expect( onDatumActivate ).not.toHaveBeenCalled();
@@ -1777,7 +1812,7 @@ describe( 'BarChart', () => {
 					],
 				} );
 
-				const chart = screen.getByRole( 'grid', { name: /bar chart/i } );
+				const chart = screen.getByRole( 'application', { name: /bar chart/i } );
 				chart.focus();
 
 				// Single tab should focus on the first tooltip.
@@ -1828,7 +1863,7 @@ describe( 'BarChart', () => {
 						],
 					} );
 
-					const chart = screen.getByRole( 'grid', { name: /bar chart/i } );
+					const chart = screen.getByRole( 'application', { name: /bar chart/i } );
 					chart.focus();
 
 					await user.keyboard( '{ArrowRight}' );
@@ -1877,7 +1912,7 @@ describe( 'BarChart', () => {
 					],
 				} );
 
-				const chart = screen.getByRole( 'grid', { name: /bar chart/i } );
+				const chart = screen.getByRole( 'application', { name: /bar chart/i } );
 				chart.focus();
 
 				// Right arrow key should focus on the first tooltip.
@@ -1900,7 +1935,7 @@ describe( 'BarChart', () => {
 			} );
 		} );
 
-		describe( 'ARIA grid boundaries', () => {
+		describe( 'Keyboard navigation boundaries', () => {
 			// Three points, so a clamp at a boundary lands on a different index than a wrap would.
 			const threePointData = [
 				{
@@ -1918,7 +1953,7 @@ describe( 'BarChart', () => {
 				const user = userEvent.setup();
 				renderWithTheme( { withTooltips: true, data: threePointData } );
 
-				const chart = screen.getByRole( 'grid', { name: /bar chart/i } );
+				const chart = screen.getByRole( 'application', { name: /bar chart/i } );
 				chart.focus();
 
 				// Move to the first, then on to the last (third) point.
@@ -1928,7 +1963,7 @@ describe( 'BarChart', () => {
 				expect( screen.getByTestId( 'chart-tooltip-2' ) ).toHaveFocus();
 
 				// Right arrow at the last point must not move focus: the highlighted
-				// bar/tooltip stays visible and focused (ARIA grid: focus does not move).
+				// bar/tooltip stays visible and focused (focus does not move).
 				await user.keyboard( '{ArrowRight}' );
 				expect( screen.getByTestId( 'chart-tooltip-2' ) ).toBeInTheDocument();
 				expect( screen.getByTestId( 'chart-tooltip-2' ) ).toHaveFocus();
@@ -1943,7 +1978,7 @@ describe( 'BarChart', () => {
 				const user = userEvent.setup();
 				renderWithTheme( { withTooltips: true, data: threePointData } );
 
-				screen.getByRole( 'grid', { name: /bar chart/i } ).focus();
+				screen.getByRole( 'application', { name: /bar chart/i } ).focus();
 				await user.keyboard( '{ArrowLeft}' );
 
 				expect( screen.getByTestId( 'chart-tooltip-0' ) ).toHaveFocus();
@@ -1977,7 +2012,7 @@ describe( 'BarChart', () => {
 					],
 				} );
 
-				const chart = screen.getByRole( 'grid', { name: /bar chart/i } );
+				const chart = screen.getByRole( 'application', { name: /bar chart/i } );
 				chart.focus();
 
 				await user.keyboard( '{ArrowRight}' );
@@ -2012,7 +2047,7 @@ describe( 'BarChart', () => {
 					],
 				} );
 
-				const chart = screen.getByRole( 'grid', { name: /bar chart/i } );
+				const chart = screen.getByRole( 'application', { name: /bar chart/i } );
 				chart.focus();
 
 				// Slot 0 is the first primary bar (Mon); slot 1 must be the SECOND primary
@@ -2044,7 +2079,7 @@ describe( 'BarChart', () => {
 					],
 				} );
 
-				screen.getByRole( 'grid', { name: /bar chart/i } ).focus();
+				screen.getByRole( 'application', { name: /bar chart/i } ).focus();
 				await user.keyboard( '{ArrowRight}' );
 
 				const tooltip = screen.getByTestId( 'chart-tooltip-0' );
@@ -2077,7 +2112,7 @@ describe( 'BarChart', () => {
 					],
 				} );
 
-				screen.getByRole( 'grid', { name: /bar chart/i } ).focus();
+				screen.getByRole( 'application', { name: /bar chart/i } ).focus();
 				await user.keyboard( '{ArrowRight}' );
 
 				const tooltip = screen.getByTestId( 'chart-tooltip-0' );
@@ -2137,7 +2172,7 @@ describe( 'BarChart', () => {
 					],
 				} );
 
-				const chart = screen.getByRole( 'grid', { name: /bar chart/i } );
+				const chart = screen.getByRole( 'application', { name: /bar chart/i } );
 				chart.focus();
 
 				// Chart should be in focus.
@@ -2177,7 +2212,7 @@ describe( 'BarChart', () => {
 					],
 				} );
 
-				const chart = screen.getByRole( 'grid', { name: /bar chart/i } );
+				const chart = screen.getByRole( 'application', { name: /bar chart/i } );
 				chart.focus();
 
 				// Navigate to the first bar
@@ -2212,7 +2247,7 @@ describe( 'BarChart', () => {
 					],
 				} );
 
-				const chart = screen.getByRole( 'grid', { name: /bar chart/i } );
+				const chart = screen.getByRole( 'application', { name: /bar chart/i } );
 				chart.focus();
 
 				// Navigate to the first bar (Series A, Jan 1)
@@ -2244,7 +2279,7 @@ describe( 'BarChart', () => {
 					const user = userEvent.setup();
 					renderWithTheme( { withTooltips: true, data } );
 
-					screen.getByRole( 'grid', { name: /bar chart/i } ).focus();
+					screen.getByRole( 'application', { name: /bar chart/i } ).focus();
 					await user.keyboard( '{ArrowRight}' );
 
 					expect( screen.getByTestId( 'chart-tooltip-0' ) ).toHaveTextContent( 'No data' );
@@ -2255,7 +2290,7 @@ describe( 'BarChart', () => {
 					const user = userEvent.setup();
 					renderWithTheme( { withTooltips: true, data } );
 
-					screen.getByRole( 'grid', { name: /bar chart/i } ).focus();
+					screen.getByRole( 'application', { name: /bar chart/i } ).focus();
 					await user.keyboard( '{ArrowRight}{ArrowRight}' );
 
 					expect( screen.getByTestId( 'chart-tooltip-1' ) ).toHaveTextContent( '20' );
@@ -2288,7 +2323,7 @@ describe( 'BarChart', () => {
 					];
 					renderWithTheme( { withTooltips: true, data: twoSeries } );
 
-					screen.getByRole( 'grid', { name: /bar chart/i } ).focus();
+					screen.getByRole( 'application', { name: /bar chart/i } ).focus();
 					await user.keyboard( '{ArrowRight}{ArrowRight}{ArrowRight}{ArrowRight}' );
 
 					expect( screen.getByTestId( 'chart-tooltip-3' ) ).toHaveTextContent( '15' );
@@ -2315,7 +2350,7 @@ describe( 'BarChart', () => {
 
 			renderWithTheme( { withTooltips: true, renderTooltip: customTooltipRenderer } );
 
-			const chart = screen.getByRole( 'grid', { name: /bar chart/i } );
+			const chart = screen.getByRole( 'application', { name: /bar chart/i } );
 			chart.focus();
 
 			// Click on right arrow key to focus on the first tooltip.
@@ -2347,7 +2382,9 @@ describe( 'BarChart', () => {
 				],
 			} );
 
-			const svgElement = screen.getByRole( 'grid', { name: /bar chart/i } ).querySelector( 'svg' );
+			const svgElement = screen
+				.getByRole( 'application', { name: /bar chart/i } )
+				.querySelector( 'svg' );
 			const bars = svgElement?.querySelectorAll( '.visx-bar-group rect' );
 
 			// Should have 2 bars
@@ -2374,7 +2411,9 @@ describe( 'BarChart', () => {
 				],
 			} );
 
-			const svgElement = screen.getByRole( 'grid', { name: /bar chart/i } ).querySelector( 'svg' );
+			const svgElement = screen
+				.getByRole( 'application', { name: /bar chart/i } )
+				.querySelector( 'svg' );
 			const bars = svgElement?.querySelectorAll( '.visx-bar-group rect' );
 
 			// Should have 2 bars
@@ -2407,7 +2446,9 @@ describe( 'BarChart', () => {
 				orientation: 'horizontal',
 			} );
 
-			const svgElement = screen.getByRole( 'grid', { name: /bar chart/i } ).querySelector( 'svg' );
+			const svgElement = screen
+				.getByRole( 'application', { name: /bar chart/i } )
+				.querySelector( 'svg' );
 			const bars = svgElement?.querySelectorAll( '.visx-bar-group rect' );
 
 			// Both bars should be visible in horizontal mode
@@ -2436,7 +2477,9 @@ describe( 'BarChart', () => {
 				],
 			} );
 
-			const svgElement = screen.getByRole( 'grid', { name: /bar chart/i } ).querySelector( 'svg' );
+			const svgElement = screen
+				.getByRole( 'application', { name: /bar chart/i } )
+				.querySelector( 'svg' );
 			const bars = svgElement?.querySelectorAll( '.visx-bar-group rect' );
 
 			expect( bars?.length ).toBe( 2 );
@@ -2476,7 +2519,7 @@ describe( 'BarChart', () => {
 				},
 			} );
 
-			expect( screen.getByRole( 'grid', { name: /bar chart/i } ) ).toBeInTheDocument();
+			expect( screen.getByRole( 'application', { name: /bar chart/i } ) ).toBeInTheDocument();
 		} );
 
 		test( 'truncates labels with CSS text-overflow ellipsis', () => {
@@ -2569,7 +2612,7 @@ describe( 'BarChart', () => {
 			} );
 
 			// Chart should still render without errors
-			expect( screen.getByRole( 'grid', { name: /bar chart/i } ) ).toBeInTheDocument();
+			expect( screen.getByRole( 'application', { name: /bar chart/i } ) ).toBeInTheDocument();
 
 			// Labels should still be present and have minimum width applied
 			const label = screen.getByText( /Very Long Category Label One/i );
@@ -2865,7 +2908,7 @@ describe( 'BarChart', () => {
 				</GlobalChartsProvider>
 			);
 
-			const chart = screen.getByRole( 'grid', { name: /bar chart/i } );
+			const chart = screen.getByRole( 'application', { name: /bar chart/i } );
 			chart.focus();
 
 			// Navigate through all 4 primary slots (2 series × 2 data points)
@@ -3151,8 +3194,9 @@ describe( 'BarChart', () => {
 				</GlobalChartsProvider>
 			);
 
+			const chart = screen.getByRole( 'application', { name: /bar chart/i } );
 			// eslint-disable-next-line testing-library/no-node-access
-			const svgElement = screen.getByRole( 'grid', { name: /bar chart/i } ).querySelector( 'svg' );
+			const svgElement = chart.querySelector( 'svg' );
 			// eslint-disable-next-line testing-library/no-node-access
 			expect( svgElement?.querySelectorAll( '.visx-bar-group rect' ) ).toHaveLength( 2 );
 
@@ -3357,7 +3401,7 @@ describe( 'BarChart', () => {
 			const user = userEvent.setup();
 			const toggle = mountWithVisibilityToggle();
 
-			screen.getByRole( 'grid', { name: /bar chart/i } ).focus();
+			screen.getByRole( 'application', { name: /bar chart/i } ).focus();
 			for ( let i = 0; i < 6; i++ ) {
 				await user.keyboard( '{ArrowRight}' );
 			}
@@ -3402,7 +3446,7 @@ describe( 'BarChart', () => {
 				],
 			} );
 
-			screen.getByRole( 'grid', { name: /bar chart/i } ).focus();
+			screen.getByRole( 'application', { name: /bar chart/i } ).focus();
 			for ( let i = 0; i < 6; i++ ) {
 				await user.keyboard( '{ArrowRight}' );
 			}
@@ -3459,12 +3503,12 @@ describe( 'BarChart', () => {
 				</GlobalChartsProvider>
 			);
 
-			screen.getByRole( 'grid', { name: /bar chart/i } ).focus();
+			screen.getByRole( 'application', { name: /bar chart/i } ).focus();
 			await user.keyboard( '{ArrowRight}{ArrowRight}' );
 			expect( screen.getByTestId( 'chart-tooltip-1' ) ).toHaveTextContent( 'Series A' );
 
 			// Move focus out of the chart, then swap which series is hidden without changing the count.
-			screen.getByRole( 'grid', { name: /bar chart/i } ).blur();
+			screen.getByRole( 'application', { name: /bar chart/i } ).blur();
 			act( () => context.setChartHiddenSeries( 'test-equal-count-swap', [ 'Series A' ] ) );
 
 			expect( screen.queryAllByTestId( /^chart-tooltip-/ ) ).toHaveLength( 0 );
@@ -3503,7 +3547,7 @@ describe( 'BarChart', () => {
 
 			await user.click( screen.getByRole( 'button', { name: /Series B: visible/i } ) );
 
-			const chart = screen.getByRole( 'grid', { name: /bar chart/i } );
+			const chart = screen.getByRole( 'application', { name: /bar chart/i } );
 			chart.focus();
 
 			for ( let i = 0; i < 5; i++ ) {

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

@@ -19,6 +19,8 @@ export type BandHighlightSelection = {
 };
 
 export interface BarChartProps extends BaseChartProps< SeriesData[] >, SeriesVisibilityProps {
+	/** Accessible name of the chart. Defaults to a localized "Bar chart". */
+	ariaLabel?: string;
 	/**
 	 * Legend configuration. Supports `collapseGroups` on top of the shared options.
 	 */

package/src/charts/bar-list-chart/test/bar-list-chart.test.tsx

@@ -72,7 +72,9 @@ describe( 'BarListChart', () => {
 		/* eslint-disable testing-library/no-node-access */
 		const barFills = () =>
 			Array.from(
-				screen.getByRole( 'grid' ).querySelectorAll< SVGRectElement >( '.visx-bar-group rect' )
+				screen
+					.getByRole( 'application' )
+					.querySelectorAll< SVGRectElement >( '.visx-bar-group rect' )
 			).map( bar => bar.getAttribute( 'fill' ) );
 		/* eslint-enable testing-library/no-node-access */
 

package/src/charts/conversion-funnel-chart/conversion-funnel-chart.tsx

@@ -427,7 +427,7 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 							className={ standaloneScopeClass }
 							style={ tooltipStyle }
 						>
-							{ tooltipContent }
+							<div role="tooltip">{ tooltipContent }</div>
 						</BoundedTooltip>
 					);
 				} )() }

package/src/charts/conversion-funnel-chart/test/conversion-funnel-chart.test.tsx

@@ -430,6 +430,15 @@ describe( 'ConversionFunnelChart', () => {
 			} );
 		} );
 
+		it( 'exposes the tooltip content with role="tooltip"', async () => {
+			const user = userEvent.setup();
+			renderWithoutTheme( <ConversionFunnelChart { ...defaultProps } /> );
+
+			await user.click( screen.getByRole( 'button', { name: /cart/i } ) );
+
+			expect( screen.getByRole( 'tooltip' ) ).toHaveTextContent( 'Cart' );
+		} );
+
 		it( 'merges tooltipStyle onto the tooltip box', async () => {
 			const user = userEvent.setup();
 			renderWithoutTheme(