Fix usage of tooltip in the Circular option picker.

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

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>
 	);

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 }
  * 					/>
  * 				);
  * 			} ) }

packages/components/src/circular-option-picker/stories/index.story.tsx

@@ -87,7 +87,6 @@ const DefaultOptions = () => {
 						onClick={ () => {
 							setCurrentColor?.( color );
 						} }
-						aria-label={ name }
 					/>
 				);
 			} ) }

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 )
-					}
 				/>
 			);
 		} );