Update wordpress monorepo: Merge trunk and rename the @wordpress/ui 0.24 components it added

.phan/stubs/phpunit-stubs.php

@@ -1,6 +1,6 @@
 <?php
 /**
- * Stubs automatically generated from PHPUnit 12.5.38
+ * Stubs automatically generated from PHPUnit 12.5.39
  * using the definition file `tools/stubs/phpunit-stub-defs.php` in the Jetpack monorepo.
  *
  * Do not edit this directly! Run tools/stubs/update-stubs.sh to regenerate it.
@@ -13309,7 +13309,7 @@ public function matchesName(string $methodName): bool
 final class Parameters implements \PHPUnit\Framework\MockObject\Rule\ParametersRule
 {
     /**
-     * @param array<mixed> $parameters
+     * @param array<int|string, mixed> $parameters
      * @throws \PHPUnit\Framework\Exception
      */
     public function __construct(array $parameters)
@@ -25730,6 +25730,20 @@ public function download(string $url): false|string
 final class PhpProcessException extends \RuntimeException implements \PHPUnit\Util\Exception
 {
 }
+/**
+ * @no-named-arguments
+ * @internal
+ */
+final class ExtensionSettings
+{
+    /**
+     * @param \Closure(): list<string> $parameters
+     * @return list<non-empty-string>
+     */
+    public static function forChildProcess(\Closure $parameters): array
+    {
+    }
+}
 /**
  * @immutable
  * @no-named-arguments

.phan/stubs/woocommerce-internal-stubs.php

@@ -1,6 +1,6 @@
 <?php
 /**
- * Stubs automatically generated from WooCommerce 11.2.0
+ * Stubs automatically generated from WooCommerce 11.2.1
  * using the definition file `tools/stubs/woocommerce-internal-stub-defs.php` in the Jetpack monorepo.
  *
  * Do not edit this directly! Run tools/stubs/update-stubs.sh to regenerate it.

.phan/stubs/woocommerce-payments-stubs.php

@@ -1,6 +1,6 @@
 <?php
 /**
- * Stubs automatically generated from WooPayments 11.1.0
+ * Stubs automatically generated from WooPayments 11.2.0
  * using the definition file `tools/stubs/woocommerce-payments-stub-defs.php` in the Jetpack monorepo.
  *
  * Do not edit this directly! Run tools/stubs/update-stubs.sh to regenerate it.

projects/js-packages/api/changelog/add-cnx-ownership-transfer

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Add methods to list connection owner candidates and set a new connection owner.

projects/js-packages/api/index.jsx

@@ -172,6 +172,18 @@ function JetpackRestApiClient( root, nonce ) {
 				.then( parseJsonResponse );
 		},
 
+		fetchConnectionOwnerCandidates: () =>
+			getRequest( `${ apiRoot }jetpack/v4/connection/owner/candidates`, getParams )
+				.then( checkStatus )
+				.then( parseJsonResponse ),
+
+		setConnectionOwner: ownerId =>
+			postRequest( `${ apiRoot }jetpack/v4/connection/owner`, postParams, {
+				body: JSON.stringify( { owner: ownerId } ),
+			} )
+				.then( checkStatus )
+				.then( parseJsonResponse ),
+
 		reconnect: () =>
 			postRequest( `${ apiRoot }jetpack/v4/connection/reconnect`, postParams )
 				.then( checkStatus )

projects/js-packages/charts/changelog/charts-300-charts-give-every-chart-an-accessible-name

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Give the geo, leaderboard, conversion funnel and bar list charts an accessible name, and accept `ariaLabel` on every chart except Sparkline.

projects/js-packages/charts/src/charts/area-chart/stories/index.api.mdx

@@ -13,7 +13,7 @@ Stacked-by-default area chart component with responsive behaviour.
 | Prop | Type | Default | Description |
 | ---- | ---- | ------- | ----------- |
 | `data` | `SeriesData[]` | - | **Required.** Array of data series to display |
-| `ariaLabel` | `string` | `'Area chart'` | Accessible name of the chart. Name it after what it shows; give each chart on a page a different name. |
+| `ariaLabel` | `string` | `'Area chart'` | Accessible name. See [Accessible names](./?path=/docs/js-packages-charts-library-introduction--docs#accessible-names). |
 | `width` | `number?` | responsive | Chart width in pixels |
 | `height` | `number?` | responsive | Chart height in pixels |
 | `aspectRatio` | `number` | - | Height-to-width ratio (e.g. `0.4`) for responsive charts; the chart is contained within its parent on both axes. Used when `width`/`height` are omitted. |

projects/js-packages/charts/src/charts/area-chart/stories/index.docs.mdx

@@ -162,8 +162,8 @@ The Area Chart supports an optional entry animation:
 
 ## Accessibility
 
-- Chart container has `role="application"` and an `aria-label` of `"Area chart"`, so screen readers pass arrow keys through to the chart's point navigation.
-- Set `ariaLabel` to name the chart after what it shows, so a screen reader user with several charts on a page can tell them apart.
+- Chart container has `role="application"`, so screen readers pass arrow keys through to the chart's point navigation.
+- Set `ariaLabel` to name the chart. See [Accessible names](./?path=/docs/js-packages-charts-library-introduction--docs#accessible-names).
 - Tab to focus the chart; arrow keys navigate data points; tooltips are announced to screen readers.
 - **Escape**: Close a keyboard-opened tooltip and return focus to the chart
 - All series colors can be overridden through the palette custom properties; do not rely on color alone to distinguish series.

projects/js-packages/charts/src/charts/area-chart/test/area-chart.test.tsx

@@ -785,14 +785,6 @@ describe( 'AreaChart', () => {
 			const chart = screen.getByRole( 'application', { name: /area chart/i } );
 			expect( chart ).toHaveAttribute( 'tabIndex', '0' );
 			expect( chart ).toHaveAttribute( 'aria-label', 'Area chart' );
-		} );
-
-		test.each( [
-			[ undefined, 'Area chart' ],
-			[ 'Views over time', 'Views over time' ],
-		] )( 'names the chart container from ariaLabel %p', ( ariaLabel, name ) => {
-			renderWithProvider( { ariaLabel } );
-			expect( screen.getByRole( 'application', { name } ) ).toBeInTheDocument();
 			expect( screen.queryByLabelText( 'XYChart' ) ).not.toBeInTheDocument();
 		} );
 	} );

projects/js-packages/charts/src/charts/area-chart/types.ts

@@ -11,8 +11,6 @@ import type { CurveType } from '../line-chart/types';
 import type { ReactNode } from 'react';
 
 export interface AreaChartProps extends BaseChartProps< SeriesData[] >, SeriesVisibilityProps {
-	/** Accessible name of the chart. Defaults to a localized "Area chart". */
-	ariaLabel?: string;
 	/**
 	 * Legend configuration. Supports `collapseGroups` on top of the shared options.
 	 */

projects/js-packages/charts/src/charts/bar-chart/stories/index.api.mdx

@@ -13,7 +13,7 @@ Main chart component with responsive behavior by default.
 | Prop | Type | Default | Description |
 | ---- | ---- | ------- | ----------- |
 | `data` | `SeriesData[]` | - | **Required.** Array of data series to display |
-| `ariaLabel` | `string` | `'Bar chart'` | Accessible name of the chart. Name it after what it shows; give each chart on a page a different name. |
+| `ariaLabel` | `string` | `'Bar chart'` | Accessible name. See [Accessible names](./?path=/docs/js-packages-charts-library-introduction--docs#accessible-names). |
 | `chartId` | `string` | auto-generated | Optional unique identifier for the chart |
 | `width` | `number` | responsive | Chart width in pixels |
 | `height` | `number` | `400` | Chart height in pixels |

projects/js-packages/charts/src/charts/bar-chart/stories/index.docs.mdx

@@ -607,7 +607,7 @@ See [Keyboard Navigation](#keyboard-navigation) for supported keys and focus beh
 ### Screen Reader Support
 
 - Chart container has `role="application"`, so screen readers pass arrow keys through to the chart's point navigation.
-- Set `ariaLabel` to name the chart after what it shows, so a screen reader user with several charts on a page can tell them apart.
+- Set `ariaLabel` to name the chart. See [Accessible names](./?path=/docs/js-packages-charts-library-introduction--docs#accessible-names).
 - Individual bars are navigable and announced with their values
 - Interactive elements have appropriate ARIA attributes
 - Color information is supplemented with patterns when `withPatterns` is enabled

projects/js-packages/charts/src/charts/bar-chart/test/bar-chart.test.tsx

@@ -1685,14 +1685,6 @@ describe( 'BarChart', () => {
 				expect( chart ).toHaveAttribute( 'tabIndex', '0' );
 				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();
 			} );
 

projects/js-packages/charts/src/charts/bar-chart/types.ts

@@ -19,8 +19,6 @@ 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.
 	 */

projects/js-packages/charts/src/charts/bar-list-chart/bar-list-chart.tsx

@@ -2,6 +2,7 @@ import { formatNumberCompact } from '@automattic/number-formatters';
 import { Group } from '@visx/group';
 import { createScale, scaleBand } from '@visx/scale';
 import { Text, type TextProps } from '@visx/text';
+import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import { useContext, useMemo } from 'react';
 import { GlobalChartsContext, GlobalChartsProvider, useGlobalChartsContext } from '../../providers';
@@ -235,6 +236,7 @@ const BarListChartInternal: FC< BarListChartProps > = ( {
 		top: 0,
 	},
 	className,
+	ariaLabel,
 	...rest
 } ) => {
 	const { getElementStyles } = useGlobalChartsContext();
@@ -333,6 +335,7 @@ const BarListChartInternal: FC< BarListChartProps > = ( {
 				xScale: chartOptions.xScale,
 				yScale: chartOptions.yScale,
 			} }
+			ariaLabel={ ariaLabel ?? __( 'Bar list chart', 'jetpack-charts' ) }
 			{ ...rest }
 		/>
 	);

projects/js-packages/charts/src/charts/bar-list-chart/stories/index.api.mdx

@@ -13,7 +13,7 @@ A horizontal bar chart component optimized for list-style data presentation.
 | Prop | Type | Default | Description |
 | ---- | ---- | ------- | ----------- |
 | `data` | `SeriesData[]` | - | **Required.** Array of series data objects |
-| `ariaLabel` | `string` | `'Bar chart'` | Accessible name of the chart. Name it after what it shows; give each chart on a page a different name. |
+| `ariaLabel` | `string` | `'Bar list chart'` | Accessible name. See [Accessible names](./?path=/docs/js-packages-charts-library-introduction--docs#accessible-names). |
 | `width` | `number` | - | Chart width in pixels |
 | `height` | `number` | `400` | Chart height in pixels |
 | `aspectRatio` | `number` | - | Height-to-width ratio (e.g. `0.4`) for responsive charts; the chart is contained within its parent on both axes. Used when `width`/`height` are omitted. |

projects/js-packages/charts/src/charts/bar-list-chart/stories/index.docs.mdx

@@ -375,7 +375,7 @@ Override automatic positioning when needed:
 
 ## Accessibility
 
-BarListChart inherits accessibility features from the underlying BarChart component, including keyboard navigation support when tooltips are enabled and proper ARIA attributes for screen readers.
+BarListChart inherits accessibility features from the underlying BarChart component, including keyboard navigation support when tooltips are enabled and proper ARIA attributes for screen readers. See [Bar Chart accessibility](./?path=/docs/js-packages-charts-library-charts-bar-chart--docs#accessibility).
 
 ## Migration from Bar Chart
 

projects/js-packages/charts/src/charts/conversion-funnel-chart/conversion-funnel-chart.tsx

@@ -1,4 +1,5 @@
 import { useTooltip } from '@visx/tooltip';
+import { __ } from '@wordpress/i18n';
 import { Stack } from '@wordpress/ui';
 import clsx from 'clsx';
 import { type FC, useRef, useMemo, useEffect, useState, useCallback, useContext } from 'react';
@@ -30,6 +31,7 @@ import type { FunnelStep, ConversionFunnelChartProps } from './types';
  * @param props.loading          - Whether the chart is in loading state
  * @param props.animation        - Whether to show chart animation on initial render or not
  * @param props.className        - Additional CSS class name
+ * @param props.ariaLabel        - Accessible name for the chart group
  * @param props.height           - Height of the chart container. Falls back to style.height if set, otherwise defaults to "100%".
  * @param props.style            - Custom styling
  * @param props.renderStepLabel  - Custom render function for step labels
@@ -46,6 +48,7 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 	loading = false,
 	animation,
 	className,
+	ariaLabel,
 	chartId: providedChartId,
 	height,
 	style,
@@ -311,6 +314,8 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 			direction="column"
 			gap="xl"
 			data-testid="conversion-funnel-chart"
+			role="group"
+			aria-label={ ariaLabel ?? __( 'Conversion funnel chart', 'jetpack-charts' ) }
 			ref={ setChartRef }
 			className={ clsx(
 				'conversion-funnel-chart',

projects/js-packages/charts/src/charts/conversion-funnel-chart/stories/index.api.mdx

@@ -15,6 +15,7 @@ Main component for displaying conversion funnel visualizations.
 | `mainRate` | `number` | - | **Required.** Main conversion rate to highlight (0-100) |
 | `steps` | `FunnelStep[]` | - | **Required.** Array of funnel steps |
 | `changeIndicator` | `string` | - | Change indicator (e.g., "+2%", "-1.5%") |
+| `ariaLabel` | `string` | `'Conversion funnel chart'` | Accessible name. See [Accessible names](./?path=/docs/js-packages-charts-library-introduction--docs#accessible-names). |
 | `loading` | `boolean` | `false` | Whether the chart is in loading state |
 | `animation` | `boolean` | `false` | Enable entry animation on initial render. Funnel bars grow from bottom to full height. Automatically respects user's `prefers-reduced-motion` system setting |
 | `height` | `string \| number` | `"100%"` | Height of the chart container. Accepts a number (pixels) or CSS string (e.g., `"400px"`, `"100%"`). Falls back to `style.height` if set, otherwise defaults to `"100%"` |

projects/js-packages/charts/src/charts/conversion-funnel-chart/stories/index.docs.mdx

@@ -388,6 +388,7 @@ Measure content consumption funnel from page views to conversions.
 
 ### Screen Reader Support
 
+- Set `ariaLabel` to name the chart. See [Accessible names](./?path=/docs/js-packages-charts-library-introduction--docs#accessible-names).
 - **ARIA Roles**: Each funnel step uses `role="button"` for proper semantic meaning
 - **ARIA Labels**: Each step has `aria-label` with the step name
 - **Alternative Text**: Step labels and rates are accessible to screen readers

projects/js-packages/charts/src/charts/conversion-funnel-chart/types.ts

@@ -59,7 +59,7 @@ export interface TooltipRenderProps {
  */
 export interface ConversionFunnelChartProps extends Pick<
 	BaseChartProps,
-	'className' | 'chartId' | 'animation'
+	'className' | 'chartId' | 'animation' | 'ariaLabel'
 > {
 	/** Main conversion rate to highlight */
 	mainRate: number;

projects/js-packages/charts/src/charts/geo-chart/geo-chart.tsx

@@ -126,6 +126,7 @@ function normalizeGeoChartError( eventArgs: unknown ): GeoChartError {
  *
  * @param props                   - The props for the GeoChart component
  * @param props.data              - Data in Google Charts format (array of arrays with headers)
+ * @param props.ariaLabel         - Accessible name of the chart
  * @param props.width             - Width of the chart in pixels
  * @param props.height            - Height of the chart in pixels
  * @param props.region            - Region to display ('world', 'US', or ISO 3166-1 alpha-2 code)
@@ -140,6 +141,7 @@ function normalizeGeoChartError( eventArgs: unknown ): GeoChartError {
 const GeoChartInternal: FC< GeoChartProps > = ( {
 	className,
 	data,
+	ariaLabel,
 	width,
 	height,
 	region = 'world',
@@ -289,12 +291,23 @@ const GeoChartInternal: FC< GeoChartProps > = ( {
 		]
 	);
 
-	const chartEvents = useMemo< ReactGoogleChartEvent[] | undefined >( () => {
+	const chartEvents = useMemo< ReactGoogleChartEvent[] >( () => {
+		const readyEvent: ReactGoogleChartEvent = {
+			eventName: 'ready',
+			// Google hardcodes aria-label="A chart." on its SVG, which repeats the chart's own name.
+			callback: () => {
+				containerRef.current
+					?.querySelectorAll( 'svg' )
+					.forEach( svg => svg.setAttribute( 'aria-hidden', 'true' ) );
+			},
+		};
+
 		if ( ! onError ) {
-			return undefined;
+			return [ readyEvent ];
 		}
 
 		return [
+			readyEvent,
 			{
 				eventName: 'error',
 				callback: ( { eventArgs } ) => {
@@ -307,6 +320,8 @@ const GeoChartInternal: FC< GeoChartProps > = ( {
 	return (
 		<Center
 			ref={ containerRef }
+			role="group"
+			aria-label={ ariaLabel ?? __( 'Geo chart', 'jetpack-charts' ) }
 			className={ clsx( 'geo-chart', styles.container, className ) }
 			data-testid="geo-chart"
 			style={ { width, height } }

projects/js-packages/charts/src/charts/geo-chart/stories/index.api.mdx

@@ -21,6 +21,7 @@ Main component for rendering geographical data on an interactive world map using
 | `displayMode` | `GeoDisplayMode` | `'regions'` | `'regions'` shades each area the rows name; `'markers'` draws a circle per row, placed by name or by `[ latitude, longitude ]` in the first two columns |
 | `domain` | `string` | - | ISO 3166-1 alpha-2 code of the country whose viewpoint sets the disputed borders (e.g., `'IN'`). Google's default borders apply when omitted |
 | `onError` | `(error: GeoChartError) => void` | - | Callback fired when Google Charts emits a chart error, including draw errors Google renders into the chart container (e.g. a missing map file) |
+| `ariaLabel` | `string` | `'Geo chart'` | Accessible name. See [Accessible names](./?path=/docs/js-packages-charts-library-introduction--docs#accessible-names). |
 | `className` | `string` | - | Additional CSS class name for the chart container |
 | `chartId` | `string` | - | Custom chart identifier for accessibility |
 | `renderPlaceholder` | `() => React.ReactNode` | - | Optional render function for custom loading placeholder. Called while Google Charts is loading |
@@ -29,7 +30,7 @@ Main component for rendering geographical data on an interactive world map using
 
 ```typescript
 interface GeoChartProps
-  extends Pick<BaseChartProps, 'className' | 'chartId' | 'width' | 'height'> {
+  extends Pick<BaseChartProps, 'className' | 'chartId' | 'width' | 'height' | 'ariaLabel'> {
   data: GeoData;
   region?: GeoRegion;
   resolution?: GeoResolution;

projects/js-packages/charts/src/charts/geo-chart/stories/index.docs.mdx

@@ -385,11 +385,9 @@ The Geo Chart uses Google Charts' default Mercator projection for world map visu
 
 ### Screen Reader Support
 
-Google Charts provides some built-in accessibility features. For better accessibility:
-
+- Set `ariaLabel` to name the chart. See [Accessible names](./?path=/docs/js-packages-charts-library-introduction--docs#accessible-names).
 - Provide a data table or list alongside the chart
 - Use descriptive headings to introduce the geographical data
-- Consider adding `aria-label` or `aria-describedby` to the container element
 
 ### Focus Management
 

projects/js-packages/charts/src/charts/geo-chart/test/geo-chart.test.tsx

@@ -281,13 +281,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', () => {