ColorPicker: Add accessible label for copy button (#67094)

* ColorPicker: Add accessible label for copy button * Add changelog * Use variable Co-authored-by: mirka <[email protected]> Co-authored-by: tyxla <[email protected]>
WordPress · Nov 19, 2024 · dea308b · dea308b
1 parent d478c08
commit dea308b
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 7 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -11,6 +11,7 @@
 
 -   `ToggleGroupControl`: Fix active background for `0` value ([#66855](https://github.com/WordPress/gutenberg/pull/66855)).
 -   `SlotFill`: Fix a bug where a stale value of `fillProps` could be used ([#67000](https://github.com/WordPress/gutenberg/pull/67000)).
+-   `ColorPicker`: Add accessible label for copy button ([#67094](https://github.com/WordPress/gutenberg/pull/67094)).
 
 ### Enhancements
 

diff --git a/packages/components/src/color-picker/color-copy-button.tsx b/packages/components/src/color-picker/color-copy-button.tsx
@@ -55,16 +55,14 @@ export const ColorCopyButton = ( props: ColorCopyButtonProps ) => {
 		};
 	}, [] );
 
+	const label =
+		copiedColor === color.toHex() ? __( 'Copied!' ) : __( 'Copy' );
+
 	return (
-		<Tooltip
-			delay={ 0 }
-			hideOnClick={ false }
-			text={
-				copiedColor === color.toHex() ? __( 'Copied!' ) : __( 'Copy' )
-			}
-		>
+		<Tooltip delay={ 0 } hideOnClick={ false } text={ label }>
 			<Button
 				size="compact"
+				aria-label={ label }
 				ref={ copyRef }
 				icon={ copy }
 				showTooltip={ false }