Fix usage of tooltip in the Circular option picker. (#68602)

afercia · Mamaduka · web-flow · commit 130b6e248da3 · 2025-01-14T10:58:50.000+01:00
* Fix usage of tooltip in the Circular option picker.

* Add changelog entry.

* Adjust tests.

* Adjust more tests.

* Adjust one more test.

* Update test snapshot.

* Adjust more tests.

* Adjust more tests.

* Adjust one more test.

Co-authored-by: afercia &lt;afercia@git.wordpress.org&gt;
Co-authored-by: Mamaduka &lt;mamaduka@git.wordpress.org&gt;
diff --git a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
@@ -217,7 +217,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
                         class="components-circular-option-picker__option-wrapper"
                       >
                         <button
-                          aria-label="Color: red"
+                          aria-label="red"
                           aria-selected="true"
                           class="components-button components-circular-option-picker__option is-next-40px-default-size"
                           data-active-item="true"
diff --git a/packages/block-editor/src/components/colors-gradients/test/control.js b/packages/block-editor/src/components/colors-gradients/test/control.js
@@ -51,7 +51,7 @@ describe( 'ColorPaletteControl', () => {
 		).toBeInTheDocument();
 
 		// Is showing the two predefined Colors.
-		expect( screen.getAllByLabelText( /^Color:/ ) ).toHaveLength( 2 );
+		expect( screen.getAllByRole( 'option' ) ).toHaveLength( 2 );
 	} );
 
 	it( 'renders the color picker and does not render tabs if it is only possible to select a color', async () => {
@@ -80,7 +80,7 @@ describe( 'ColorPaletteControl', () => {
 		).not.toBeInTheDocument();
 
 		// Is showing the two predefined Colors.
-		expect( screen.getAllByLabelText( /^Color:/ ) ).toHaveLength( 2 );
+		expect( screen.getAllByRole( 'option' ) ).toHaveLength( 2 );
 	} );
 
 	it( 'renders the gradient picker and does not render tabs if it is only possible to select a gradient', async () => {
diff --git a/packages/block-library/src/cover/test/edit.js b/packages/block-library/src/cover/test/edit.js
@@ -48,7 +48,7 @@ async function setup( attributes, useCoreBlocks, customSettings ) {
 async function createAndSelectBlock() {
 	await userEvent.click(
 		screen.getByRole( 'option', {
-			name: 'Color: Black',
+			name: 'Black',
 		} )
 	);
 	await userEvent.click(
@@ -73,7 +73,7 @@ describe( 'Cover block', () => {
 		test( 'can set overlay color using color picker on block placeholder', async () => {
 			const { container } = await setup();
 			const colorPicker = screen.getByRole( 'option', {
-				name: 'Color: Black',
+				name: 'Black',
 			} );
 			await userEvent.click( colorPicker );
 			const color = colorPicker.style.backgroundColor;
@@ -97,7 +97,7 @@ describe( 'Cover block', () => {
 
 			await userEvent.click(
 				screen.getByRole( 'option', {
-					name: 'Color: Black',
+					name: 'Black',
 				} )
 			);
 
@@ -390,7 +390,7 @@ describe( 'Cover block', () => {
 		test( 'should toggle is-light class if background changed from light to dark', async () => {
 			await setup();
 			const colorPicker = screen.getByRole( 'option', {
-				name: 'Color: White',
+				name: 'White',
 			} );
 			await userEvent.click( colorPicker );
 
@@ -406,15 +406,15 @@ describe( 'Cover block', () => {
 			);
 			await userEvent.click( screen.getByText( 'Overlay' ) );
 			const popupColorPicker = screen.getByRole( 'option', {
-				name: 'Color: Black',
+				name: 'Black',
 			} );
 			await userEvent.click( popupColorPicker );
 			expect( coverBlock ).not.toHaveClass( 'is-light' );
 		} );
 		test( 'should remove is-light class if overlay color is removed', async () => {
 			await setup();
 			const colorPicker = screen.getByRole( 'option', {
-				name: 'Color: White',
+				name: 'White',
 			} );
 			await userEvent.click( colorPicker );
 			const coverBlock = screen.getByLabelText( 'Block: Cover' );
@@ -429,7 +429,7 @@ describe( 'Cover block', () => {
 			// The default color is black, so clicking the black color option will remove the background color,
 			// which should remove the isDark setting and assign the is-light class.
 			const popupColorPicker = screen.getByRole( 'option', {
-				name: 'Color: White',
+				name: 'White',
 			} );
 			await userEvent.click( popupColorPicker );
 			expect( coverBlock ).not.toHaveClass( 'is-light' );
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -8,6 +8,7 @@
 
 ### Bug Fixes
 
+-   `CircularOptionPicker`, `ColorPalette`: Fix usage of tooltip in the Circular option picker. ([#68602](https://github.com/WordPress/gutenberg/pull/68602)).
 -   `InputControl`: Ensures email and url inputs have consistent LTR alignment in RTL languages ([#68188](https://github.com/WordPress/gutenberg/pull/68188)).
 
 ## 29.1.0 (2025-01-02)
diff --git a/packages/components/src/border-control/test/index.js b/packages/components/src/border-control/test/index.js
@@ -1,7 +1,13 @@
 /**
  * External dependencies
  */
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import {
+	fireEvent,
+	render,
+	screen,
+	waitFor,
+	within,
+} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
@@ -56,7 +62,7 @@ const getButton = ( name ) => {
 };
 
 const getColorOption = ( color ) => {
-	return screen.getByRole( 'option', { name: `Color: ${ color }` } );
+	return screen.getByRole( 'option', { name: `${ color }` } );
 };
 
 const queryButton = ( name ) => {
@@ -131,9 +137,11 @@ describe( 'BorderControl', () => {
 			await openPopover( user );
 
 			const customColorPicker = getButton( /Custom color picker/ );
-			const colorSwatchButtons = screen.getAllByRole( 'option', {
-				name: /^Color:/,
+			const circularOptionPicker = screen.getByRole( 'listbox', {
+				name: 'Custom color picker.',
 			} );
+			const colorSwatchButtons =
+				within( circularOptionPicker ).getAllByRole( 'option' );
 			const styleLabel = screen.getByText( 'Style' );
 			const solidButton = getButton( 'Solid' );
 			const dashedButton = getButton( 'Dashed' );
diff --git a/packages/components/src/circular-option-picker/README.md b/packages/components/src/circular-option-picker/README.md
@@ -29,7 +29,6 @@ const Example = () => {
 						style={ { backgroundColor: color, color } }
 						isSelected={ index === currentColor }
 						onClick={ () => setCurrentColor( index ) }
-						aria-label={ name }
 					/>
 				);
 			} ) }
@@ -150,6 +149,6 @@ Inherits all of the [`Dropdown` props](/packages/components/src/dropdown/README.
 
 Props for the underlying `Button` component.
 
-Inherits all of the [`Button` props](/packages/components/src/button/README.md#props), except for `href`, `target`, and `children`. 
+Inherits all of the [`Button` props](/packages/components/src/button/README.md#props), except for `href`, `target`, and `children`.
 
 - Required: No
diff --git a/packages/components/src/circular-option-picker/circular-option-picker-option.tsx b/packages/components/src/circular-option-picker/circular-option-picker-option.tsx
@@ -17,23 +17,24 @@ import { Icon, check } from '@wordpress/icons';
 import { CircularOptionPickerContext } from './circular-option-picker-context';
 import Button from '../button';
 import { Composite } from '../composite';
-import Tooltip from '../tooltip';
 import type { OptionProps } from './types';
 
 function UnforwardedOptionAsButton(
 	props: {
 		id?: string;
 		className?: string;
 		isPressed?: boolean;
+		label?: string;
 	},
 	forwardedRef: ForwardedRef< any >
 ) {
-	const { isPressed, ...additionalProps } = props;
+	const { isPressed, label, ...additionalProps } = props;
 	return (
 		<Button
 			{ ...additionalProps }
 			aria-pressed={ isPressed }
 			ref={ forwardedRef }
+			label={ label }
 		/>
 	);
 }
@@ -45,10 +46,11 @@ function UnforwardedOptionAsOption(
 		id: string;
 		className?: string;
 		isSelected?: boolean;
+		label?: string;
 	},
 	forwardedRef: ForwardedRef< any >
 ) {
-	const { id, isSelected, ...additionalProps } = props;
+	const { id, isSelected, label, ...additionalProps } = props;
 
 	const { setActiveId, activeId } = useContext( CircularOptionPickerContext );
 
@@ -69,6 +71,7 @@ function UnforwardedOptionAsOption(
 					role="option"
 					aria-selected={ !! isSelected }
 					ref={ forwardedRef }
+					label={ label }
 				/>
 			}
 			id={ id }
@@ -100,9 +103,17 @@ export function Option( {
 
 	const isListbox = setActiveId !== undefined;
 	const optionControl = isListbox ? (
-		<OptionAsOption { ...commonProps } isSelected={ isSelected } />
+		<OptionAsOption
+			{ ...commonProps }
+			label={ tooltipText }
+			isSelected={ isSelected }
+		/>
 	) : (
-		<OptionAsButton { ...commonProps } isPressed={ isSelected } />
+		<OptionAsButton
+			{ ...commonProps }
+			label={ tooltipText }
+			isPressed={ isSelected }
+		/>
 	);
 
 	return (
@@ -112,11 +123,7 @@ export function Option( {
 				'components-circular-option-picker__option-wrapper'
 			) }
 		>
-			{ tooltipText ? (
-				<Tooltip text={ tooltipText }>{ optionControl }</Tooltip>
-			) : (
-				optionControl
-			) }
+			{ optionControl }
 			{ isSelected && <Icon icon={ check } { ...selectedIconProps } /> }
 		</div>
 	);
diff --git a/packages/components/src/circular-option-picker/circular-option-picker.tsx b/packages/components/src/circular-option-picker/circular-option-picker.tsx
@@ -51,7 +51,6 @@ import {
  * 						style={ { backgroundColor: color, color } }
  * 						isSelected={ index === currentColor }
  * 						onClick={ () => setCurrentColor( index ) }
- * 						aria-label={ name }
  * 					/>
  * 				);
  * 			} ) }
diff --git a/packages/components/src/circular-option-picker/stories/index.story.tsx b/packages/components/src/circular-option-picker/stories/index.story.tsx
@@ -87,7 +87,6 @@ const DefaultOptions = () => {
 						onClick={ () => {
 							setCurrentColor?.( color );
 						} }
-						aria-label={ name }
 					/>
 				);
 			} ) }
diff --git a/packages/components/src/color-palette/index.tsx b/packages/components/src/color-palette/index.tsx
@@ -79,13 +79,6 @@ function SinglePalette( {
 					onClick={
 						isSelected ? clearColor : () => onChange( color, index )
 					}
-					aria-label={
-						name
-							? // translators: %s: The name of the color e.g: "vivid red".
-							  sprintf( __( 'Color: %s' ), name )
-							: // translators: %s: color hex code e.g: "#f00".
-							  sprintf( __( 'Color code: %s' ), color )
-					}
 				/>
 			);
 		} );
diff --git a/packages/components/src/color-palette/test/index.tsx b/packages/components/src/color-palette/test/index.tsx
@@ -50,9 +50,7 @@ describe( 'ColorPalette', () => {
 			/>
 		);
 
-		expect(
-			screen.getAllByRole( 'option', { name: /^Color:/ } )
-		).toHaveLength( 3 );
+		expect( screen.getAllByRole( 'option' ) ).toHaveLength( 3 );
 	} );
 
 	it( 'should call onClick on an active button with undefined', async () => {
@@ -67,9 +65,7 @@ describe( 'ColorPalette', () => {
 			/>
 		);
 
-		await user.click(
-			screen.getByRole( 'option', { name: /^Color:/, selected: true } )
-		);
+		await user.click( screen.getByRole( 'option', { selected: true } ) );
 
 		expect( onChange ).toHaveBeenCalledTimes( 1 );
 		expect( onChange ).toHaveBeenCalledWith( undefined );
@@ -91,7 +87,6 @@ describe( 'ColorPalette', () => {
 		// (i.e. a button representing a color that is not the current color)
 		await user.click(
 			screen.getAllByRole( 'option', {
-				name: /^Color:/,
 				selected: false,
 			} )[ 0 ]
 		);
@@ -230,7 +225,6 @@ describe( 'ColorPalette', () => {
 		// Click the first unpressed button
 		await user.click(
 			screen.getAllByRole( 'option', {
-				name: /^Color:/,
 				selected: false,
 			} )[ 0 ]
 		);
diff --git a/packages/components/src/palette-edit/test/index.tsx b/packages/components/src/palette-edit/test/index.tsx
@@ -416,7 +416,7 @@ describe( 'PaletteEdit', () => {
 			/>
 		);
 
-		await click( screen.getByLabelText( 'Color: Primary' ) );
+		await click( screen.getByLabelText( 'Primary' ) );
 		const hexInput = screen.getByRole( 'textbox', {
 			name: 'Hex color',
 		} );
diff --git a/test/e2e/specs/editor/blocks/buttons.spec.js b/test/e2e/specs/editor/blocks/buttons.spec.js
@@ -295,11 +295,11 @@ test.describe( 'Buttons', () => {
 		await page.click(
 			'role=region[name="Editor settings"i] >> role=button[name="Text"i]'
 		);
-		await page.click( 'role=option[name="Color: Cyan bluish gray"i]' );
+		await page.click( 'role=option[name="Cyan bluish gray"i]' );
 		await page.click(
 			'role=region[name="Editor settings"i] >> role=button[name="Background"i]'
 		);
-		await page.click( 'role=option[name="Color: Vivid red"i]' );
+		await page.click( 'role=option[name="Vivid red"i]' );
 
 		// Check the content.
 		const content = await editor.getEditedPostContent();
diff --git a/test/e2e/specs/editor/blocks/cover.spec.js b/test/e2e/specs/editor/blocks/cover.spec.js
@@ -34,7 +34,7 @@ test.describe( 'Cover', () => {
 
 		// Locate the Black color swatch.
 		const blackColorSwatch = coverBlock.getByRole( 'option', {
-			name: 'Color: Black',
+			name: 'Black',
 		} );
 		await expect( blackColorSwatch ).toBeVisible();
 
@@ -106,7 +106,7 @@ test.describe( 'Cover', () => {
 		// a functioning block.
 		await coverBlock
 			.getByRole( 'option', {
-				name: 'Color: Black',
+				name: 'Black',
 			} )
 			.click();
 
@@ -129,7 +129,7 @@ test.describe( 'Cover', () => {
 		} );
 		await coverBlock
 			.getByRole( 'option', {
-				name: 'Color: Black',
+				name: 'Black',
 			} )
 			.click();
 
@@ -241,7 +241,7 @@ test.describe( 'Cover', () => {
 		// a functioning block.
 		await coverBlock
 			.getByRole( 'option', {
-				name: 'Color: Black',
+				name: 'Black',
 			} )
 			.click();
 
@@ -267,7 +267,7 @@ test.describe( 'Cover', () => {
 		// a functioning block.
 		await secondCoverBlock
 			.getByRole( 'option', {
-				name: 'Color: Black',
+				name: 'Black',
 			} )
 			.click();
 
diff --git a/test/e2e/specs/editor/blocks/heading.spec.js b/test/e2e/specs/editor/blocks/heading.spec.js
@@ -220,7 +220,7 @@ test.describe( 'Heading', () => {
 
 		await page
 			.getByRole( 'option', {
-				name: 'Color: Luminous vivid orange',
+				name: 'Luminous vivid orange',
 			} )
 			.click();
 
diff --git a/test/e2e/specs/editor/blocks/navigation-colors.spec.js b/test/e2e/specs/editor/blocks/navigation-colors.spec.js
diff --git a/test/e2e/specs/editor/various/format-library/text-color.spec.js b/test/e2e/specs/editor/various/format-library/text-color.spec.js
diff --git a/test/e2e/specs/editor/various/keep-styles-on-block-transforms.spec.js b/test/e2e/specs/editor/various/keep-styles-on-block-transforms.spec.js
diff --git a/test/e2e/specs/editor/various/list-view.spec.js b/test/e2e/specs/editor/various/list-view.spec.js
diff --git a/test/e2e/specs/site-editor/style-variations.spec.js b/test/e2e/specs/site-editor/style-variations.spec.js
diff --git a/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js b/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js

Original file line number	Diff line number	Diff line change
@@ -217,7 +217,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
`217`	`217`	`class="components-circular-option-picker__option-wrapper"`
`218`	`218`	`>`
`219`	`219`	`<button`
`220`		`- aria-label="Color: red"`
	`220`	`+ aria-label="red"`
`221`	`221`	`aria-selected="true"`
`222`	`222`	`class="components-button components-circular-option-picker__option is-next-40px-default-size"`
`223`	`223`	`data-active-item="true"`