ToolbarButton: Always keep focusable when disabled (WordPress#63102)

* ToolbarButton: Always keep focusable when disabled * Omit `__experimentalIsFocusable` from TS types * Fixup * Add changelog * Clarify deprecation comment Co-authored-by: Marco Ciampini <[email protected]> --------- Co-authored-by: mirka <[email protected]> Co-authored-by: ciampo <[email protected]> Co-authored-by: tyxla <[email protected]> Co-authored-by: jeryj <[email protected]> Co-authored-by: t-hamano <[email protected]>
carstingaxion · Jul 4, 2024 · 9d4176c · 9d4176c
1 parent 307a0f7
commit 9d4176c
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -50,6 +50,7 @@ function ToolbarItem(
 
 	return (
 		<Ariakit.ToolbarItem
+			accessibleWhenDisabled
 			{ ...allProps }
 			store={ accessibleToolbarStore }
 			render={ render }