@wordpress/components 28.9.0 → 28.11.0

package/src/tabs/types.ts

@@ -18,98 +18,138 @@ export type TabsContextProps =
 
 export type TabsProps = {
 	/**
-	 * The children elements, which should be at least a
-	 * `Tabs.Tablist` component and a series of `Tabs.TabPanel`
-	 * components.
+	 * The children elements, which should include one instance of the
+	 * `Tabs.Tablist` component and as many instances of the `Tabs.TabPanel`
+	 * components as there are `Tabs.Tab` components.
 	 */
-	children: React.ReactNode;
+	children: Ariakit.TabProps[ 'children' ];
 	/**
-	 * When `true`, the tab will be selected when receiving focus (automatic tab
-	 * activation). When `false`, the tab will be selected only when clicked
-	 * (manual tab activation). See the official W3C docs for more info.
+	 * Determines if the tab should be selected when it receives focus. If set to
+	 * `false`, the tab will only be selected upon clicking, not when using arrow
+	 * keys to shift focus (manual tab activation). See the official W3C docs
+	 * for more info.
 	 *
 	 * @default true
 	 *
 	 * @see https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/
 	 */
-	selectOnMove?: boolean;
+	selectOnMove?: Ariakit.TabStoreProps[ 'selectOnMove' ];
 	/**
-	 * The id of the tab to be selected upon mounting of component.
-	 * If this prop is not set, the first tab will be selected by default.
-	 * The id provided will be internally prefixed with the
-	 * `TabsContextProps.instanceId`.
+	 * The id of the tab whose panel is currently visible.
+	 *
+	 * If left `undefined`, it will be automatically set to the first enabled
+	 * tab, and the component assumes it is being used in "uncontrolled" mode.
+	 *
+	 * Consequently, any value different than `undefined` will set the component
+	 * in "controlled" mode. When in "controlled" mode, the `null` value will
+	 * result in no tabs being selected, and the tablist becoming tabbable.
+	 */
+	selectedTabId?: Ariakit.TabStoreProps[ 'selectedId' ];
+	/**
+	 * The id of the tab whose panel is currently visible.
+	 *
+	 * If left `undefined`, it will be automatically set to the first enabled
+	 * tab. If set to `null`, no tab will be selected, and the tablist will be
+	 * tabbable.
 	 *
 	 * Note: this prop will be overridden by the `selectedTabId` prop if it is
-	 * provided. (Controlled Mode)
+	 * provided (meaning the component will be used in "controlled" mode).
 	 */
-	defaultTabId?: string;
+	defaultTabId?: Ariakit.TabStoreProps[ 'defaultSelectedId' ];
 	/**
-	 * The function called when a tab has been selected.
-	 * It is passed the id of the newly selected tab as an argument.
+	 * The function called when the `selectedTabId` changes.
 	 */
-	onSelect?: ( selectedId: string | null | undefined ) => void;
-
+	onSelect?: Ariakit.TabStoreProps[ 'setSelectedId' ];
 	/**
-	 * The orientation of the tablist.
+	 * The current active tab `id`. The active tab is the tab element within the
+	 * tablist widget that has DOM focus.
+	 * - `null` represents the tablist (ie. the base composite element). Users
+	 *   will be able to navigate out of it using arrow keys.
+	 * - If `activeTabId` is initially set to `null`, the base composite element
+	 *   itself will have focus and users will be able to navigate to it using
+	 *   arrow keys.activeTabId
+	 */
+	activeTabId?: Ariakit.TabStoreProps[ 'activeId' ];
+	/**
+	 * The tab id that should be active by default when the composite widget is
+	 * rendered. If `null`, the tablist element itself will have focus
+	 * and users will be able to navigate to it using arrow keys. If `undefined`,
+	 * the first enabled item will be focused.
 	 *
-	 * @default `horizontal`
+	 * Note: this prop will be overridden by the `activeTabId` prop if it is
+	 * provided.
+	 */
+	defaultActiveTabId?: Ariakit.TabStoreProps[ 'defaultActiveId' ];
+	/**
+	 * A callback that gets called when the `activeTabId` state changes.
 	 */
-	orientation?: 'horizontal' | 'vertical';
+	onActiveTabIdChange?: Ariakit.TabStoreProps[ 'setActiveId' ];
 	/**
-	 * The Id of the tab to display. This id is prepended with the `Tabs`
-	 * instanceId internally.
+	 * Defines the orientation of the tablist and determines which arrow keys
+	 * can be used to move focus:
+	 * - `both`: all arrow keys work.
+	 * - `horizontal`: only left and right arrow keys work.
+	 * - `vertical`: only up and down arrow keys work.
 	 *
-	 * If left `undefined`, the component assumes it is being used in
-	 * uncontrolled mode. Consequently, any value different than `undefined`
-	 * will set the component in `controlled` mode.
-	 * When in controlled mode, the `null` value will result in no tab being selected.
+	 * @default "horizontal"
 	 */
-	selectedTabId?: string | null;
+	orientation?: Ariakit.TabStoreProps[ 'orientation' ];
 };
 
 export type TabListProps = {
 	/**
-	 * The children elements, which should be a series of `Tabs.TabPanel` components.
+	 * The children elements, which should include one or more instances of the
+	 * `Tabs.Tab` component.
 	 */
-	children?: React.ReactNode;
+	children: Ariakit.TabListProps[ 'children' ];
 };
 
+// TODO: consider prop name changes (tabId, selectedTabId)
+// switch to auto-generated README
+// compound technique
+
 export type TabProps = {
 	/**
-	 * The id of the tab, which is prepended with the `Tabs` instanceId.
-	 * The value of this prop should match with the value of the `tabId` prop on
-	 * the corresponding `Tabs.TabPanel` component.
+	 * The unique ID of the tab. It will be used to register the tab and match
+	 * it to a corresponding `Tabs.TabPanel` component.
 	 */
-	tabId: string;
+	tabId: NonNullable< Ariakit.TabProps[ 'id' ] >;
 	/**
-	 * The children elements, generally the text to display on the tab.
+	 * The contents of the tab.
 	 */
-	children?: React.ReactNode;
+	children?: Ariakit.TabProps[ 'children' ];
 	/**
-	 * Determines if the tab button should be disabled.
+	 * Determines if the tab should be disabled. Note that disabled tabs can
+	 * still be accessed via the keyboard when navigating through the tablist.
 	 *
 	 * @default false
 	 */
-	disabled?: boolean;
+	disabled?: Ariakit.TabProps[ 'disabled' ];
 	/**
-	 * The type of component to render the tab button as. If this prop is not
-	 * provided, the tab button will be rendered as a `button` element.
+	 * Allows the component to be rendered as a different HTML element or React
+	 * component. The value can be a React element or a function that takes in the
+	 * original component props and gives back a React element with the props
+	 * merged.
+	 *
+	 * By default, the tab will be rendered as a `button` element.
 	 */
-	render?: React.ReactElement;
+	render?: Ariakit.TabProps[ 'render' ];
 };
 
 export type TabPanelProps = {
 	/**
-	 * The children elements, generally the content to display on the tabpanel.
+	 * The contents of the tab panel.
 	 */
-	children?: React.ReactNode;
+	children?: Ariakit.TabPanelProps[ 'children' ];
 	/**
-	 * A unique identifier for the tabpanel, which is used to generate an
-	 * instanced id for the underlying element.
-	 * The value of this prop should match with the value of the `tabId` prop on
-	 * the corresponding `Tabs.Tab` component.
+	 * The unique `id` of the `Tabs.Tab` component controlling this panel. This
+	 * connection is used to assign the `aria-labelledby` attribute to the tab
+	 * panel and to determine if the tab panel should be visible.
+	 *
+	 * If not provided, this link is automatically established by matching the
+	 * order of `Tabs.Tab` and `Tabs.TabPanel` elements in the DOM.
 	 */
-	tabId: string;
+	tabId: NonNullable< Ariakit.TabPanelProps[ 'tabId' ] >;
 	/**
 	 * Determines whether or not the tabpanel element should be focusable.
 	 * If `false`, pressing the tab key will skip over the tabpanel, and instead
@@ -117,5 +157,5 @@ export type TabPanelProps = {
 	 *
 	 * @default true
 	 */
-	focusable?: boolean;
+	focusable?: Ariakit.TabPanelProps[ 'focusable' ];
 };

package/src/theme/stories/index.story.tsx

@@ -13,7 +13,8 @@ import { HStack } from '../../h-stack';
 
 const meta: Meta< typeof Theme > = {
 	component: Theme,
-	title: 'Components/Theme',
+	title: 'Components/Utilities/Theme',
+	id: 'components-theme',
 	argTypes: {
 		accent: { control: { type: 'color' } },
 		background: { control: { type: 'color' } },

package/src/toggle-group-control/test/__snapshots__/index.tsx.snap

@@ -283,7 +283,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
         class="components-toggle-group-control emotion-8 emotion-9"
         data-wp-c16t="true"
         data-wp-component="ToggleGroupControl"
-        id="toggle-group-control-as-radio-group-11"
+        id="toggle-group-control-as-radio-group-12"
         role="radiogroup"
       >
         <div
@@ -297,7 +297,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
             data-value="uppercase"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
-            id="toggle-group-control-as-radio-group-11-30"
+            id="toggle-group-control-as-radio-group-12-32"
             role="radio"
             type="button"
             value="uppercase"
@@ -330,7 +330,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
             data-value="lowercase"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
-            id="toggle-group-control-as-radio-group-11-31"
+            id="toggle-group-control-as-radio-group-12-33"
             role="radio"
             type="button"
             value="lowercase"
@@ -575,7 +575,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
         class="components-toggle-group-control emotion-8 emotion-9"
         data-wp-c16t="true"
         data-wp-component="ToggleGroupControl"
-        id="toggle-group-control-as-radio-group-10"
+        id="toggle-group-control-as-radio-group-11"
         role="radiogroup"
       >
         <div
@@ -588,7 +588,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
             data-value="rigas"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
-            id="toggle-group-control-as-radio-group-10-28"
+            id="toggle-group-control-as-radio-group-11-30"
             role="radio"
             type="button"
             value="rigas"
@@ -610,7 +610,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
             data-value="jack"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
-            id="toggle-group-control-as-radio-group-10-29"
+            id="toggle-group-control-as-radio-group-11-31"
             role="radio"
             type="button"
             value="jack"

package/src/toggle-group-control/test/index.tsx

@@ -162,6 +162,45 @@ describe.each( [
 		expect( mockOnChange ).toHaveBeenCalledWith( 'rigas' );
 	} );
 
+	it( 'should not set a value on focus', async () => {
+		render(
+			<Component label="Test Toggle Group Control">{ options }</Component>
+		);
+
+		const radio = screen.getByRole( 'radio', { name: 'R' } );
+		expect( radio ).not.toBeChecked();
+
+		await press.Tab();
+		expect( radio ).toHaveFocus();
+		expect( radio ).not.toBeChecked();
+	} );
+
+	if ( mode === 'controlled' ) {
+		it( 'should not set a value on focus, after the value is reset', async () => {
+			render(
+				<Component label="Test Toggle Group Control" value="jack">
+					{ options }
+				</Component>
+			);
+
+			expect( screen.getByRole( 'radio', { name: 'J' } ) ).toBeChecked();
+
+			await click( screen.getByRole( 'button', { name: 'Reset' } ) );
+
+			expect(
+				screen.getByRole( 'radio', { name: 'J' } )
+			).not.toBeChecked();
+
+			await press.ShiftTab();
+			expect(
+				screen.getByRole( 'radio', { name: 'R' } )
+			).not.toBeChecked();
+			expect(
+				screen.getByRole( 'radio', { name: 'J' } )
+			).not.toBeChecked();
+		} );
+	}
+
 	it( 'should render tooltip where `showTooltip` === `true`', async () => {
 		render(
 			<Component label="Test Toggle Group Control">

package/src/toggle-group-control/toggle-group-control/as-radio-group.tsx

@@ -9,7 +9,7 @@ import { useStoreState } from '@ariakit/react';
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
-import { forwardRef, useMemo } from '@wordpress/element';
+import { forwardRef, useEffect, useMemo } from '@wordpress/element';
 import { isRTL } from '@wordpress/i18n';
 
 /**
@@ -73,8 +73,17 @@ function UnforwardedToggleGroupControlAsRadioGroup(
 	const selectedValue = useStoreState( radio, 'value' );
 	const setValue = radio.setValue;
 
+	// Ensures that the active id is also reset after the value is "reset" by the consumer.
+	useEffect( () => {
+		if ( selectedValue === '' ) {
+			radio.setActiveId( undefined );
+		}
+	}, [ radio, selectedValue ] );
+
 	const groupContextValue = useMemo(
 		(): ToggleGroupControlContextProps => ( {
+			activeItemIsNotFirstItem: () =>
+				radio.getState().activeId !== radio.first(),
 			baseId,
 			isBlock: ! isAdaptiveWidth,
 			size,
@@ -87,6 +96,7 @@ function UnforwardedToggleGroupControlAsRadioGroup(
 		[
 			baseId,
 			isAdaptiveWidth,
+			radio,
 			selectedValue,
 			setSelectedElement,
 			setValue,

package/src/toggle-group-control/toggle-group-control/component.tsx

@@ -6,7 +6,7 @@ import type { ForwardedRef } from 'react';
 /**
  * WordPress dependencies
  */
-import { useLayoutEffect, useMemo, useState } from '@wordpress/element';
+import { useMemo, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -20,104 +20,9 @@ import { VisualLabelWrapper } from './styles';
 import * as styles from './styles';
 import { ToggleGroupControlAsRadioGroup } from './as-radio-group';
 import { ToggleGroupControlAsButtonGroup } from './as-button-group';
-import type { ElementOffsetRect } from '../../utils/element-rect';
 import { useTrackElementOffsetRect } from '../../utils/element-rect';
-import { useOnValueUpdate } from '../../utils/hooks/use-on-value-update';
-import { useEvent, useMergeRefs } from '@wordpress/compose';
-
-/**
- * A utility used to animate something in a container component based on the "offset
- * rect" (position relative to the container and size) of a subelement. For example,
- * this is useful to render an indicator for the selected option of a component, and
- * to animate it when the selected option changes.
- *
- * Takes in a container element and the up-to-date "offset rect" of the target
- * subelement, obtained with `useTrackElementOffsetRect`. Then it does the following:
- *
- * - Adds CSS variables with rect information to the container, so that the indicator
- *   can be rendered and animated with them. These are kept up-to-date, enabling CSS
- *   transitions on change.
- * - Sets an attribute (`data-subelement-animated` by default) when the tracked
- *   element changes, so that the target (e.g. the indicator) can be animated to its
- *   new size and position.
- * - Removes the attribute when the animation is done.
- *
- * The need for the attribute is due to the fact that the rect might update in
- * situations other than when the tracked element changes, e.g. the tracked element
- * might be resized. In such cases, there is no need to animate the indicator, and
- * the change in size or position of the indicator needs to be reflected immediately.
- */
-function useAnimatedOffsetRect(
-	/**
-	 * The container element.
-	 */
-	container: HTMLElement | undefined,
-	/**
-	 * The rect of the tracked element.
-	 */
-	rect: ElementOffsetRect,
-	{
-		prefix = 'subelement',
-		dataAttribute = `${ prefix }-animated`,
-		transitionEndFilter = () => true,
-	}: {
-		/**
-		 * The prefix used for the CSS variables, e.g. if `prefix` is `selected`, the
-		 * CSS variables will be `--selected-top`, `--selected-left`, etc.
-		 * @default 'subelement'
-		 */
-		prefix?: string;
-		/**
-		 * The name of the data attribute used to indicate that the animation is in
-		 * progress. The `data-` prefix is added automatically.
-		 *
-		 * For example, if `dataAttribute` is `indicator-animated`, the attribute will
-		 * be `data-indicator-animated`.
-		 * @default `${ prefix }-animated`
-		 */
-		dataAttribute?: string;
-		/**
-		 * A function that is called with the transition event and returns a boolean
-		 * indicating whether the animation should be stopped. The default is a function
-		 * that always returns `true`.
-		 *
-		 * For example, if the animated element is the `::before` pseudo-element, the
-		 * function can be written as `( event ) => event.pseudoElement === '::before'`.
-		 * @default () => true
-		 */
-		transitionEndFilter?: ( event: TransitionEvent ) => boolean;
-	} = {}
-) {
-	const setProperties = useEvent( () => {
-		( Object.keys( rect ) as Array< keyof typeof rect > ).forEach(
-			( property ) =>
-				property !== 'element' &&
-				container?.style.setProperty(
-					`--${ prefix }-${ property }`,
-					String( rect[ property ] )
-				)
-		);
-	} );
-	useLayoutEffect( () => {
-		setProperties();
-	}, [ rect, setProperties ] );
-	useOnValueUpdate( rect.element, ( { previousValue } ) => {
-		// Only enable the animation when moving from one element to another.
-		if ( rect.element && previousValue ) {
-			container?.setAttribute( `data-${ dataAttribute }`, '' );
-		}
-	} );
-	useLayoutEffect( () => {
-		function onTransitionEnd( event: TransitionEvent ) {
-			if ( transitionEndFilter( event ) ) {
-				container?.removeAttribute( `data-${ dataAttribute }` );
-			}
-		}
-		container?.addEventListener( 'transitionend', onTransitionEnd );
-		return () =>
-			container?.removeEventListener( 'transitionend', onTransitionEnd );
-	}, [ dataAttribute, container, transitionEndFilter ] );
-}
+import { useMergeRefs } from '@wordpress/compose';
+import { useAnimatedOffsetRect } from '../../utils/hooks/use-animated-offset-rect';
 
 function UnconnectedToggleGroupControl(
 	props: WordPressComponentProps< ToggleGroupControlProps, 'div', false >,
@@ -153,6 +58,7 @@ function UnconnectedToggleGroupControl(
 		prefix: 'selected',
 		dataAttribute: 'indicator-animated',
 		transitionEndFilter: ( event ) => event.pseudoElement === '::before',
+		roundRect: true,
 	} );
 
 	const cx = useCx();

package/src/toggle-group-control/toggle-group-control-option-base/component.tsx

@@ -75,7 +75,6 @@ function ToggleGroupControlOptionBase(
 		value,
 		children,
 		showTooltip = false,
-		onFocus: onFocusProp,
 		disabled,
 		...otherButtonProps
 	} = buttonProps;
@@ -132,7 +131,6 @@ function ToggleGroupControlOptionBase(
 					<button
 						{ ...commonProps }
 						disabled={ disabled }
-						onFocus={ onFocusProp }
 						aria-pressed={ isPressed }
 						type="button"
 						onClick={ buttonOnClick }
@@ -142,19 +140,21 @@ function ToggleGroupControlOptionBase(
 				) : (
 					<Ariakit.Radio
 						disabled={ disabled }
-						render={
-							<button
-								type="button"
-								{ ...commonProps }
-								onFocus={ ( event ) => {
-									onFocusProp?.( event );
-									if ( event.defaultPrevented ) {
-										return;
-									}
-									toggleGroupControlContext.setValue( value );
-								} }
-							/>
-						}
+						onFocusVisible={ () => {
+							const selectedValueIsEmpty =
+								toggleGroupControlContext.value === null ||
+								toggleGroupControlContext.value === '';
+
+							// Conditions ensure that the first visible focus to a radio group
+							// without a selected option will not automatically select the option.
+							if (
+								! selectedValueIsEmpty ||
+								toggleGroupControlContext.activeItemIsNotFirstItem?.()
+							) {
+								toggleGroupControlContext.setValue( value );
+							}
+						} }
+						render={ <button type="button" { ...commonProps } /> }
 						value={ value }
 					>
 						<ButtonContentView>{ children }</ButtonContentView>

package/src/toggle-group-control/types.ts

@@ -131,6 +131,7 @@ export type ToggleGroupControlProps = Pick<
 };
 
 export type ToggleGroupControlContextProps = {
+	activeItemIsNotFirstItem?: () => boolean;
 	isDeselectable?: boolean;
 	baseId: string;
 	isBlock: ToggleGroupControlProps[ 'isBlock' ];

package/src/toolbar/toolbar/index.tsx

@@ -40,6 +40,9 @@ function UnforwardedToolbar(
 			Dropdown: {
 				variant: 'toolbar',
 			},
+			Menu: {
+				variant: 'toolbar',
+			},
 		};
 	}, [ isVariantDefined ] );
 

package/src/tools-panel/tools-panel-header/component.tsx

@@ -106,7 +106,7 @@ const OptionalControlsGroup = ( {
 					  )
 					: sprintf(
 							// translators: %s: The name of the control to display e.g. "Padding".
-							__( 'Show %s' ),
+							_x( 'Show %s', 'input control' ),
 							label
 					  );
 

package/src/tools-panel/tools-panel-item/hook.ts

@@ -54,11 +54,9 @@ export function useToolsPanelItem(
 
 	// hasValue is a new function on every render, so do not add it as a
 	// dependency to the useCallback hook! If needed, we should use a ref.
-	// eslint-disable-next-line react-hooks/exhaustive-deps
 	const hasValueCallback = useCallback( hasValue, [ panelId ] );
 	// resetAllFilter is a new function on every render, so do not add it as a
 	// dependency to the useCallback hook! If needed, we should use a ref.
-	// eslint-disable-next-line react-hooks/exhaustive-deps
 	const resetAllFilterCallback = useCallback( resetAllFilter, [ panelId ] );
 	const previousPanelId = usePrevious( currentPanelId );
 

package/src/tooltip/index.native.js

@@ -62,9 +62,7 @@ const useKeyboardVisibility = () => {
 			showListener.remove();
 			hideListener.remove();
 		};
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [] );
 
 	return keyboardVisible;
@@ -105,9 +103,7 @@ const Tooltip = ( {
 			} );
 		}
 		return () => onHandleScreenTouch( null );
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ visible ] );
 
 	// Manage visibility animation.
@@ -121,9 +117,7 @@ const Tooltip = ( {
 			setAnimating( true );
 			startAnimation();
 		}
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ visible ] );
 
 	// Manage tooltip visibility and position in relation to keyboard.
@@ -142,9 +136,7 @@ const Tooltip = ( {
 			setAnimating( true );
 			setVisible( false );
 		}
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ visible, keyboardVisible ] );
 
 	// Manage tooltip position during keyboard frame changes.
@@ -273,9 +265,7 @@ const TooltipSlot = ( { children, ...rest } ) => {
 		setHandleScreenTouch( null );
 	};
 	// Memoize context value to avoid unnecessary rerenders of the Provider's children
-	// Disable reason: deferring this refactor to the native team.
-	// see https://github.com/WordPress/gutenberg/pull/41166
-	// eslint-disable-next-line react-hooks/exhaustive-deps
+	// See https://github.com/WordPress/gutenberg/pull/41166
 	const value = useMemo( () => ( { onHandleScreenTouch } ) );
 
 	return (

package/src/tooltip/index.tsx

@@ -107,9 +107,16 @@ function UnforwardedTooltip(
 	// TODO: this is a temporary workaround to minimize the effects of the
 	// Ariakit upgrade. Ariakit doesn't pass the `aria-describedby` prop to
 	// the tooltip anchor anymore since 0.4.0, so we need to add it manually.
+	// The `aria-describedby` attribute is added only if the anchor doesn't have
+	// one already, and if the tooltip text is not the same as the anchor's
+	// `aria-label`
 	// See: https://github.com/WordPress/gutenberg/pull/64066
+	// See: https://github.com/WordPress/gutenberg/pull/65989
 	function addDescribedById( element: React.ReactElement ) {
-		return describedById && mounted
+		return describedById &&
+			mounted &&
+			element.props[ 'aria-describedby' ] === undefined &&
+			element.props[ 'aria-label' ] !== text
 			? cloneElement( element, { 'aria-describedby': describedById } )
 			: element;
 	}