From 50d781e8aae86ade99e7c9b0b80c3ce7daf661ee Mon Sep 17 00:00:00 2001
From: Juan Aldasoro <juanfraa@gmail.com>
Date: Tue, 19 Nov 2024 15:53:28 +0100
Subject: [PATCH] Set gradient and duotone clear button as disabled if there's
 no value. Add `accessibleWhenDisabled` for all the changes.

---
 packages/components/CHANGELOG.md                          | 2 ++
 packages/components/src/color-palette/index.tsx           | 1 +
 packages/components/src/duotone-picker/duotone-picker.tsx | 2 ++
 packages/components/src/gradient-picker/index.tsx         | 2 ++
 4 files changed, 7 insertions(+)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index a3886b4b640bf..51ca7eb2e6ee9 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -12,6 +12,8 @@
 -   `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)).
 -   `ColorPalette`: Disable `Clear` button if there's no color value. ([#67108](https://github.com/WordPress/gutenberg/pull/67108)).
+-   `GradientPicker`: Disable `Clear` button if there's no value. ([#67108](https://github.com/WordPress/gutenberg/pull/67108)).
+-   `DuotonePicker`: Disable `Clear` button if there's no value. ([#67108](https://github.com/WordPress/gutenberg/pull/67108)).
 
 ### Experimental
 
diff --git a/packages/components/src/color-palette/index.tsx b/packages/components/src/color-palette/index.tsx
index e67c540365241..ed3e903970417 100644
--- a/packages/components/src/color-palette/index.tsx
+++ b/packages/components/src/color-palette/index.tsx
@@ -251,6 +251,7 @@ function UnforwardedColorPalette(
 	const actions = !! clearable && (
 		<CircularOptionPicker.ButtonAction
 			onClick={ clearColor }
+			accessibleWhenDisabled
 			disabled={ ! value }
 		>
 			{ __( 'Clear' ) }
diff --git a/packages/components/src/duotone-picker/duotone-picker.tsx b/packages/components/src/duotone-picker/duotone-picker.tsx
index ee54c9cdf4235..8764b401c3829 100644
--- a/packages/components/src/duotone-picker/duotone-picker.tsx
+++ b/packages/components/src/duotone-picker/duotone-picker.tsx
@@ -168,6 +168,8 @@ function DuotonePicker( {
 				!! clearable && (
 					<CircularOptionPicker.ButtonAction
 						onClick={ () => onChange( undefined ) }
+						accessibleWhenDisabled
+						disabled={ ! value }
 					>
 						{ __( 'Clear' ) }
 					</CircularOptionPicker.ButtonAction>
diff --git a/packages/components/src/gradient-picker/index.tsx b/packages/components/src/gradient-picker/index.tsx
index 8368279b8afd7..f0607badd1b03 100644
--- a/packages/components/src/gradient-picker/index.tsx
+++ b/packages/components/src/gradient-picker/index.tsx
@@ -247,6 +247,8 @@ export function GradientPicker( {
 						! disableCustomGradients && (
 							<CircularOptionPicker.ButtonAction
 								onClick={ clearGradient }
+								accessibleWhenDisabled
+								disabled={ ! value }
 							>
 								{ __( 'Clear' ) }
 							</CircularOptionPicker.ButtonAction>