@wordpress/components 28.9.0 → 28.11.0

package/src/tooltip/test/index.tsx

@@ -516,4 +516,82 @@ describe( 'Tooltip', () => {
 			).not.toHaveClass( 'components-tooltip' );
 		} );
 	} );
+
+	describe( 'aria-describedby', () => {
+		it( "should not override the anchor's aria-describedby attribute if specified", async () => {
+			render(
+				<>
+					<Tooltip { ...props }>
+						<button aria-describedby="tooltip-test-description">
+							Tooltip anchor
+						</button>
+					</Tooltip>
+					{ /* eslint-disable-next-line no-restricted-syntax */ }
+					<p id="tooltip-test-description">Tooltip description</p>
+					<button>focus trap outside</button>
+				</>
+			);
+
+			expect(
+				screen.getByRole( 'button', { name: 'Tooltip anchor' } )
+			).toHaveAccessibleDescription( 'Tooltip description' );
+
+			// Focus the anchor, tooltip should show
+			await press.Tab();
+			expect(
+				screen.getByRole( 'button', { name: 'Tooltip anchor' } )
+			).toHaveFocus();
+			await waitExpectTooltipToShow();
+
+			// The anchors should retain its previous accessible description,
+			// since the tooltip shouldn't override it.
+			expect(
+				screen.getByRole( 'button', { name: 'Tooltip anchor' } )
+			).toHaveAccessibleDescription( 'Tooltip description' );
+
+			// Focus the other button, tooltip should hide
+			await press.Tab();
+			expect(
+				screen.getByRole( 'button', { name: 'focus trap outside' } )
+			).toHaveFocus();
+			await waitExpectTooltipToHide();
+		} );
+
+		it( "should not add the aria-describedby attribute to the anchor if the tooltip text matches the anchor's aria-label", async () => {
+			render(
+				<>
+					<Tooltip { ...props }>
+						<button aria-label={ props.text }>
+							Tooltip anchor
+						</button>
+					</Tooltip>
+					<button>focus trap outside</button>
+				</>
+			);
+
+			expect(
+				screen.getByRole( 'button', { name: props.text } )
+			).not.toHaveAccessibleDescription();
+
+			// Focus the anchor, tooltip should show
+			await press.Tab();
+			expect(
+				screen.getByRole( 'button', { name: props.text } )
+			).toHaveFocus();
+			await waitExpectTooltipToShow();
+
+			// The anchor shouldn't have an aria-describedby prop
+			// because its aria-label matches the tooltip text.
+			expect(
+				screen.getByRole( 'button', { name: props.text } )
+			).not.toHaveAccessibleDescription();
+
+			// Focus the other button, tooltip should hide
+			await press.Tab();
+			expect(
+				screen.getByRole( 'button', { name: 'focus trap outside' } )
+			).toHaveFocus();
+			await waitExpectTooltipToHide();
+		} );
+	} );
 } );

package/src/unit-control/index.native.js

@@ -47,10 +47,8 @@ function UnitControl( {
 		if ( pickerRef?.current ) {
 			pickerRef.current.presentPicker();
 		}
-		// Disable reason: this should be fixed by the native team.
-		// It would be great if this could be done in the context of
+		// It would be great if the deps could be addressed in the context of
 		// https://github.com/WordPress/gutenberg/pull/39218
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ pickerRef?.current ] );
 
 	const currentInputValue = currentInput === null ? value : currentInput;
@@ -106,10 +104,8 @@ function UnitControl( {
 			anchorNodeRef?.current
 				? findNodeHandle( anchorNodeRef?.current )
 				: undefined,
-		// Disable reason: this should be fixed by the native team.
-		// It would be great if this could be done in the context of
+		// It would be great if the deps could be addressed in the context of
 		// https://github.com/WordPress/gutenberg/pull/39218
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[ anchorNodeRef?.current ]
 	);
 

package/src/utils/deprecated-36px-size.ts

@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import deprecated from '@wordpress/deprecated';
+
+export function maybeWarnDeprecated36pxSize( {
+	componentName,
+	__next40pxDefaultSize,
+	size,
+}: {
+	componentName: string;
+	__next40pxDefaultSize: boolean | undefined;
+	size: string;
+} ) {
+	if ( __next40pxDefaultSize || size !== 'default' ) {
+		return;
+	}
+
+	deprecated( `36px default size for wp.components.${ componentName }`, {
+		since: '6.8',
+		version: '7.1',
+		hint: 'Set the `__next40pxDefaultSize` prop to true to start opting into the new default size, which will become the default in a future version.',
+	} );
+}

package/src/utils/element-rect.ts

@@ -134,14 +134,17 @@ const POLL_RATE = 100;
  * milliseconds until it succeeds.
  */
 export function useTrackElementOffsetRect(
-	targetElement: HTMLElement | undefined | null
+	targetElement: HTMLElement | undefined | null,
+	deps: unknown[] = []
 ) {
 	const [ indicatorPosition, setIndicatorPosition ] =
 		useState< ElementOffsetRect >( NULL_ELEMENT_OFFSET_RECT );
 	const intervalRef = useRef< ReturnType< typeof setInterval > >();
 
 	const measure = useEvent( () => {
-		if ( targetElement ) {
+		// Check that the targetElement is still attached to the DOM, in case
+		// it was removed since the last `measure` call.
+		if ( targetElement && targetElement.isConnected ) {
 			const elementOffsetRect = getElementOffsetRect( targetElement );
 			if ( elementOffsetRect ) {
 				setIndicatorPosition( elementOffsetRect );
@@ -171,6 +174,15 @@ export function useTrackElementOffsetRect(
 		}
 	}, [ setElement, targetElement ] );
 
+	// Escape hatch to force a remeasurement when something else changes rather
+	// than the target elements' ref or size (for example, the target element
+	// can change its position within the tablist).
+	useLayoutEffect( () => {
+		measure();
+		// `measure` is a stable function, so it's safe to omit it from the deps array.
+		// deps can't be statically analyzed by ESLint
+	}, deps );
+
 	return indicatorPosition;
 }
 

package/src/utils/hooks/use-animated-offset-rect.ts

@@ -0,0 +1,119 @@
+/* eslint-disable jsdoc/require-param */
+
+/**
+ * WordPress dependencies
+ */
+import { useEvent } from '@wordpress/compose';
+import { useLayoutEffect } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import type { ElementOffsetRect } from '../element-rect';
+import { useOnValueUpdate } from './use-on-value-update';
+
+/**
+ * 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.
+ */
+export function useAnimatedOffsetRect(
+	/**
+	 * The container element.
+	 */
+	container: HTMLElement | undefined,
+	/**
+	 * The rect of the tracked element.
+	 */
+	rect: ElementOffsetRect,
+	{
+		prefix = 'subelement',
+		dataAttribute = `${ prefix }-animated`,
+		transitionEndFilter = () => true,
+		roundRect = false,
+	}: {
+		/**
+		 * 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;
+		/**
+		 * Whether the `rect` measurements should be rounded down when applied
+		 * to the CSS variables. This can be useful to avoid blurry animations or
+		 * to avoid subpixel rendering issues.
+		 * @default false
+		 */
+		roundRect?: boolean;
+	} = {}
+) {
+	const setProperties = useEvent( () => {
+		( Object.keys( rect ) as Array< keyof typeof rect > ).forEach(
+			( property ) =>
+				property !== 'element' &&
+				container?.style.setProperty(
+					`--${ prefix }-${ property }`,
+					String(
+						roundRect
+							? Math.floor( rect[ property ] )
+							: 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 ] );
+}
+/* eslint-enable jsdoc/require-param */

package/src/utils/hooks/use-update-effect.js

@@ -19,11 +19,9 @@ function useUpdateEffect( effect, deps ) {
 		}
 		mountedRef.current = true;
 		return undefined;
-		// Disable reasons:
 		// 1. This hook needs to pass a dep list that isn't an array literal
 		// 2. `effect` is missing from the array, and will need to be added carefully to avoid additional warnings
 		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, deps );
 
 	useEffect(

package/src/visually-hidden/stories/index.story.tsx

@@ -10,7 +10,8 @@ import { VisuallyHidden } from '..';
 
 const meta: Meta< typeof VisuallyHidden > = {
 	component: VisuallyHidden,
-	title: 'Components/VisuallyHidden',
+	title: 'Components/Utilities/VisuallyHidden',
+	id: 'components-visuallyhidden',
 	argTypes: {
 		children: { control: { type: null } },
 		as: { control: { type: 'text' } },