From 9d4176ca0fafcb069190d715cbdbfaa77aa9b948 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Thu, 4 Jul 2024 19:44:19 +0900
Subject: [PATCH] ToolbarButton: Always keep focusable when disabled (#63102)

* ToolbarButton: Always keep focusable when disabled

* Omit `__experimentalIsFocusable` from TS types

* Fixup

* Add changelog

* Clarify deprecation comment

Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>

---------

Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: jeryj <jeryj@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
---
 packages/components/CHANGELOG.md                       |  1 +
 .../components/src/toolbar/toolbar-button/index.tsx    |  8 ++++++--
 .../components/src/toolbar/toolbar-button/types.ts     | 10 ++++++++++
 packages/components/src/toolbar/toolbar-item/index.tsx |  1 +
 4 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 70f6ebd704f74..9d3903f70e2ad 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -12,6 +12,7 @@
 ### Enhancements
 
 -   `ToolbarButton`: Deprecate `isDisabled` prop and merge with `disabled` ([#63101](https://github.com/WordPress/gutenberg/pull/63101)).
+-   `ToolbarButton`: Always keep focusable when disabled ([#63102](https://github.com/WordPress/gutenberg/pull/63102)).
 
 ### Internal
 
diff --git a/packages/components/src/toolbar/toolbar-button/index.tsx b/packages/components/src/toolbar/toolbar-button/index.tsx
index 48f385fa1abaf..a8967df75690c 100644
--- a/packages/components/src/toolbar/toolbar-button/index.tsx
+++ b/packages/components/src/toolbar/toolbar-button/index.tsx
@@ -16,7 +16,7 @@ import Button from '../../button';
 import ToolbarItem from '../toolbar-item';
 import ToolbarContext from '../toolbar-context';
 import ToolbarButtonContainer from './toolbar-button-container';
-import type { ToolbarButtonProps } from './types';
+import type { ToolbarButtonDeprecatedProps, ToolbarButtonProps } from './types';
 import type { WordPressComponentProps } from '../../context';
 
 function useDeprecatedProps( {
@@ -30,7 +30,11 @@ function useDeprecatedProps( {
 }
 
 function UnforwardedToolbarButton(
-	props: WordPressComponentProps< ToolbarButtonProps, typeof Button, false >,
+	props: Omit<
+		WordPressComponentProps< ToolbarButtonProps, typeof Button, false >,
+		'__experimentalIsFocusable' // ToolbarButton will always be focusable even when disabled.
+	> &
+		ToolbarButtonDeprecatedProps,
 	ref: ForwardedRef< any >
 ) {
 	const {
diff --git a/packages/components/src/toolbar/toolbar-button/types.ts b/packages/components/src/toolbar/toolbar-button/types.ts
index bcd349c0d8936..59965e66d1347 100644
--- a/packages/components/src/toolbar/toolbar-button/types.ts
+++ b/packages/components/src/toolbar/toolbar-button/types.ts
@@ -37,6 +37,16 @@ export type ToolbarButtonProps = {
 	title?: string;
 };
 
+export type ToolbarButtonDeprecatedProps = {
+	/**
+	 * Whether to keep the button focusable when disabled.
+	 *
+	 * @deprecated ToolbarButton will always be focusable even when disabled.
+	 * @ignore
+	 */
+	__experimentalIsFocusable?: boolean;
+};
+
 export type ToolbarButtonContainerProps = {
 	/**
 	 * Children to be rendered inside the button container.
diff --git a/packages/components/src/toolbar/toolbar-item/index.tsx b/packages/components/src/toolbar/toolbar-item/index.tsx
index 2c343eb173a27..7f4ccb7f659cd 100644
--- a/packages/components/src/toolbar/toolbar-item/index.tsx
+++ b/packages/components/src/toolbar/toolbar-item/index.tsx
@@ -50,6 +50,7 @@ function ToolbarItem(
 
 	return (
 		<Ariakit.ToolbarItem
+			accessibleWhenDisabled
 			{ ...allProps }
 			store={ accessibleToolbarStore }
 			render={ render }