@wordpress/components 28.8.5 → 28.8.6

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "28.8.5",
+	"version": "28.8.6",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -84,5 +84,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "21b3c2e9abda74edab42455041edc6e82fccc388"
+	"gitHead": "b7af02f8431034ee19cdc33dd105d21705823eed"
 }

package/src/drop-zone/index.tsx

@@ -99,6 +99,7 @@ export function DropZoneComponent( {
 			setType( _type );
 		},
 		onDragEnd() {
+			setIsDraggingOverElement( false );
 			setIsDraggingOverDocument( false );
 			setType( undefined );
 		},
@@ -116,8 +117,6 @@ export function DropZoneComponent( {
 			( ( type === 'file' && onFilesDrop ) ||
 				( type === 'html' && onHTMLDrop ) ||
 				( type === 'default' && onDrop ) ),
-		'has-dragged-out': ! isDraggingOverElement,
-		// Keeping the following classnames for legacy purposes
 		'is-dragging-over-document': isDraggingOverDocument,
 		'is-dragging-over-element': isDraggingOverElement,
 		[ `is-dragging-${ type }` ]: !! type,

package/src/drop-zone/style.scss

@@ -42,7 +42,7 @@
 		transform: scale(0.9);
 	}
 
-	&.is-active:not(.has-dragged-out) {
+	&.is-active.is-dragging-over-element {
 		.components-drop-zone__content {
 			opacity: 1;
 

package/src/palette-edit/index.tsx

@@ -49,7 +49,6 @@ import { kebabCase } from '../utils/strings';
 import type {
 	Color,
 	ColorPickerPopoverProps,
-	Gradient,
 	NameInputProps,
 	OptionProps,
 	PaletteEditListViewProps,
@@ -70,6 +69,28 @@ function NameInput( { value, onChange, label }: NameInputProps ) {
 	);
 }
 
+/*
+ * Deduplicates the slugs of the provided elements.
+ */
+export function deduplicateElementSlugs< T extends PaletteElement >(
+	elements: T[]
+) {
+	const slugCounts: { [ slug: string ]: number } = {};
+
+	return elements.map( ( element ) => {
+		let newSlug: string | undefined;
+
+		const { slug } = element;
+		slugCounts[ slug ] = ( slugCounts[ slug ] || 0 ) + 1;
+
+		if ( slugCounts[ slug ] > 1 ) {
+			newSlug = `${ slug }-${ slugCounts[ slug ] - 1 }`;
+		}
+
+		return { ...element, slug: newSlug ?? slug };
+	} );
+}
+
 /**
  * Returns a name and slug for a palette item. The name takes the format "Color + id".
  * To ensure there are no duplicate ids, this function checks all slugs.
@@ -109,7 +130,7 @@ export function getNameAndSlugForPosition(
 	};
 }
 
-function ColorPickerPopover< T extends Color | Gradient >( {
+function ColorPickerPopover< T extends PaletteElement >( {
 	isGradient,
 	element,
 	onChange,
@@ -167,7 +188,7 @@ function ColorPickerPopover< T extends Color | Gradient >( {
 	);
 }
 
-function Option< T extends Color | Gradient >( {
+function Option< T extends PaletteElement >( {
 	canOnlyChangeValues,
 	element,
 	onChange,
@@ -265,7 +286,7 @@ function Option< T extends Color | Gradient >( {
 	);
 }
 
-function PaletteEditListView< T extends Color | Gradient >( {
+function PaletteEditListView< T extends PaletteElement >( {
 	elements,
 	onChange,
 	canOnlyChangeValues,
@@ -280,7 +301,11 @@ function PaletteEditListView< T extends Color | Gradient >( {
 		elementsReferenceRef.current = elements;
 	}, [ elements ] );
 
-	const debounceOnChange = useDebounce( onChange, 100 );
+	const debounceOnChange = useDebounce(
+		( updatedElements: T[] ) =>
+			onChange( deduplicateElementSlugs( updatedElements ) ),
+		100
+	);
 
 	return (
 		<VStack spacing={ 3 }>

package/src/palette-edit/test/index.tsx

@@ -7,7 +7,10 @@ import { click, type, press } from '@ariakit/test';
 /**
  * Internal dependencies
  */
-import PaletteEdit, { getNameAndSlugForPosition } from '..';
+import PaletteEdit, {
+	getNameAndSlugForPosition,
+	deduplicateElementSlugs,
+} from '..';
 import type { PaletteElement } from '../types';
 
 const noop = () => {};
@@ -97,6 +100,52 @@ describe( 'getNameAndSlugForPosition', () => {
 	} );
 } );
 
+describe( 'deduplicateElementSlugs', () => {
+	it( 'should not change the slugs if they are unique', () => {
+		const elements: PaletteElement[] = [
+			{
+				slug: 'test-color-1',
+				color: '#ffffff',
+				name: 'Test Color 1',
+			},
+			{
+				slug: 'test-color-2',
+				color: '#1a4548',
+				name: 'Test Color 2',
+			},
+		];
+
+		expect( deduplicateElementSlugs( elements ) ).toEqual( elements );
+	} );
+	it( 'should change the slugs if they are not unique', () => {
+		const elements: PaletteElement[] = [
+			{
+				slug: 'test-color-1',
+				color: '#ffffff',
+				name: 'Test Color 1',
+			},
+			{
+				slug: 'test-color-1',
+				color: '#1a4548',
+				name: 'Test Color 2',
+			},
+		];
+
+		expect( deduplicateElementSlugs( elements ) ).toEqual( [
+			{
+				slug: 'test-color-1',
+				color: '#ffffff',
+				name: 'Test Color 1',
+			},
+			{
+				slug: 'test-color-1-1',
+				color: '#1a4548',
+				name: 'Test Color 2',
+			},
+		] );
+	} );
+} );
+
 describe( 'PaletteEdit', () => {
 	const defaultProps = {
 		paletteLabel: 'Test label',

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

@@ -244,7 +244,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
@@ -258,7 +258,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"
@@ -297,7 +297,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"
@@ -493,7 +493,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
@@ -506,7 +506,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"
@@ -528,7 +528,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,19 @@ 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();
+	} );
+
 	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

@@ -75,13 +75,15 @@ function UnforwardedToggleGroupControlAsRadioGroup(
 	const groupContextValue = useMemo(
 		() =>
 			( {
+				activeItemIsNotFirstItem: () =>
+					radio.getState().activeId !== radio.first(),
 				baseId,
 				isBlock: ! isAdaptiveWidth,
 				size,
 				value: selectedValue,
 				setValue,
 			} ) as ToggleGroupControlContextProps,
-		[ baseId, isAdaptiveWidth, size, selectedValue, setValue ]
+		[ baseId, isAdaptiveWidth, radio, size, selectedValue, setValue ]
 	);
 
 	return (

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

@@ -83,7 +83,6 @@ function ToggleGroupControlOptionBase(
 		value,
 		children,
 		showTooltip = false,
-		onFocus: onFocusProp,
 		disabled,
 		...otherButtonProps
 	} = buttonProps;
@@ -134,7 +133,6 @@ function ToggleGroupControlOptionBase(
 					<button
 						{ ...commonProps }
 						disabled={ disabled }
-						onFocus={ onFocusProp }
 						aria-pressed={ isPressed }
 						type="button"
 						onClick={ buttonOnClick }
@@ -144,19 +142,17 @@ function ToggleGroupControlOptionBase(
 				) : (
 					<Ariakit.Radio
 						disabled={ disabled }
-						render={
-							<button
-								type="button"
-								{ ...commonProps }
-								onFocus={ ( event ) => {
-									onFocusProp?.( event );
-									if ( event.defaultPrevented ) {
-										return;
-									}
-									toggleGroupControlContext.setValue( value );
-								} }
-							/>
-						}
+						onFocusVisible={ () => {
+							// Conditions ensure that the first visible focus to a radio group
+							// without a selected option will not automatically select the option.
+							if (
+								toggleGroupControlContext.value !== null ||
+								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/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;
 	}

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();
+		} );
+	} );
 } );