From 629a35c07430f9a7eacf51697b12a33c8c4d7449 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Wed, 5 Jun 2024 08:58:58 +0900
Subject: [PATCH 01/12] Components: Fix inaccessible disabled `Button`s

---
 .eslintrc.js                                               | 1 +
 packages/components/src/autocomplete/autocompleter-ui.tsx  | 1 +
 packages/components/src/button/stories/e2e/index.story.tsx | 1 +
 packages/components/src/button/test/index.tsx              | 6 ++++++
 packages/components/src/combobox-control/index.tsx         | 2 ++
 packages/components/src/dropdown-menu/index.tsx            | 1 +
 packages/components/src/form-token-field/token.tsx         | 2 ++
 7 files changed, 14 insertions(+)

diff --git a/.eslintrc.js b/.eslintrc.js
index 177f3cf35b8ccf..7d1bb161a7c3f1 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -397,6 +397,7 @@ module.exports = {
 				'no-restricted-syntax': [
 					'error',
 					...restrictedSyntax,
+					...restrictedSyntaxComponents,
 					{
 						selector:
 							':matches(Literal[value=/--wp-admin-theme-/],TemplateElement[value.cooked=/--wp-admin-theme-/])',
diff --git a/packages/components/src/autocomplete/autocompleter-ui.tsx b/packages/components/src/autocomplete/autocompleter-ui.tsx
index a22e197decd154..59c88b4e41ecd1 100644
--- a/packages/components/src/autocomplete/autocompleter-ui.tsx
+++ b/packages/components/src/autocomplete/autocompleter-ui.tsx
@@ -58,6 +58,7 @@ function ListBox( {
 					id={ `components-autocomplete-item-${ instanceId }-${ option.key }` }
 					role="option"
 					aria-selected={ index === selectedIndex }
+					__experimentalIsFocusable
 					disabled={ option.isDisabled }
 					className={ clsx(
 						'components-autocomplete__result',
diff --git a/packages/components/src/button/stories/e2e/index.story.tsx b/packages/components/src/button/stories/e2e/index.story.tsx
index 1baeb08fb73e23..075438fe0579eb 100644
--- a/packages/components/src/button/stories/e2e/index.story.tsx
+++ b/packages/components/src/button/stories/e2e/index.story.tsx
@@ -39,6 +39,7 @@ export const VariantStates: StoryFn< typeof Button > = (
 					key={ variant ?? 'undefined' }
 				>
 					<Button { ...props } variant={ variant } />
+					{ /* eslint-disable-next-line no-restricted-syntax */ }
 					<Button { ...props } variant={ variant } disabled />
 					<Button
 						{ ...props }
diff --git a/packages/components/src/button/test/index.tsx b/packages/components/src/button/test/index.tsx
index 9d8980e04c9313..d9608f776d4101 100644
--- a/packages/components/src/button/test/index.tsx
+++ b/packages/components/src/button/test/index.tsx
@@ -235,6 +235,7 @@ describe( 'Button', () => {
 		} );
 
 		it( 'should add a disabled prop to the button', () => {
+			// eslint-disable-next-line no-restricted-syntax
 			render( <Button disabled /> );
 
 			expect( screen.getByRole( 'button' ) ).toBeDisabled();
@@ -536,6 +537,7 @@ describe( 'Button', () => {
 
 		it( 'should become a button again when disabled is supplied', () => {
 			// @ts-expect-error - a button should not have `href`
+			// eslint-disable-next-line no-restricted-syntax
 			render( <Button href="https://wordpress.org/" disabled /> );
 
 			expect( screen.getByRole( 'button' ) ).toBeVisible();
@@ -624,8 +626,12 @@ describe( 'Button', () => {
 			<Button href="foo" />
 			{ /* @ts-expect-error - `target` requires `href` */ }
 			<Button target="foo" />
+
+			{ /* eslint-disable no-restricted-syntax */ }
 			{ /* @ts-expect-error - `disabled` is only for buttons */ }
 			<Button href="foo" disabled />
+			{ /* eslint-enable no-restricted-syntax */ }
+
 			<Button href="foo" type="image/png" />
 			{ /* @ts-expect-error - if button, type must be submit/reset/button */ }
 			<Button type="image/png" />
diff --git a/packages/components/src/combobox-control/index.tsx b/packages/components/src/combobox-control/index.tsx
index a47e6ce5d8e451..d22bbba2a9d24a 100644
--- a/packages/components/src/combobox-control/index.tsx
+++ b/packages/components/src/combobox-control/index.tsx
@@ -346,6 +346,8 @@ function ComboboxControl( props: ComboboxControlProps ) {
 								<Button
 									className="components-combobox-control__reset"
 									icon={ closeSmall }
+									// Disable reason: Focus returns to input field when reset is clicked.
+									// eslint-disable-next-line no-restricted-syntax
 									disabled={ ! value }
 									onClick={ handleOnReset }
 									label={ __( 'Reset' ) }
diff --git a/packages/components/src/dropdown-menu/index.tsx b/packages/components/src/dropdown-menu/index.tsx
index e0b7a5884ed6de..b631be344c2b96 100644
--- a/packages/components/src/dropdown-menu/index.tsx
+++ b/packages/components/src/dropdown-menu/index.tsx
@@ -199,6 +199,7 @@ function UnconnectedDropdownMenu( dropdownMenuProps: DropdownMenuProps ) {
 											? control.role
 											: 'menuitem'
 									}
+									__experimentalIsFocusable
 									disabled={ control.isDisabled }
 								>
 									{ control.title }
diff --git a/packages/components/src/form-token-field/token.tsx b/packages/components/src/form-token-field/token.tsx
index 7afd703588228c..3e723c2bd78fc2 100644
--- a/packages/components/src/form-token-field/token.tsx
+++ b/packages/components/src/form-token-field/token.tsx
@@ -74,6 +74,8 @@ export default function Token( {
 				className="components-form-token-field__remove-token"
 				icon={ closeSmall }
 				onClick={ ! disabled ? onClick : undefined }
+				// Disable reason: Even when FormTokenField itself is accessibly disabled, token reset buttons shouldn't be in the tab sequence.
+				// eslint-disable-next-line no-restricted-syntax
 				disabled={ disabled }
 				label={ messages.remove }
 				aria-describedby={ `components-form-token-field__token-text-${ instanceId }` }

From 01d28f2c5b09a7f60497a27023a6a0dea7cdd605 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Tue, 2 Jul 2024 23:55:33 +0900
Subject: [PATCH 02/12] Fix in RangeControl

---
 packages/components/src/range-control/index.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/components/src/range-control/index.tsx b/packages/components/src/range-control/index.tsx
index ae39e08d41c032..c133e86cd3cf46 100644
--- a/packages/components/src/range-control/index.tsx
+++ b/packages/components/src/range-control/index.tsx
@@ -326,6 +326,8 @@ function UnforwardedRangeControl(
 					<ActionRightWrapper>
 						<Button
 							className="components-range-control__reset"
+							// If the RangeControl itself is disabled, the reset button shouldn't be in the tab sequence.
+							__experimentalIsFocusable={ ! disabled }
 							disabled={ disabled || value === undefined }
 							variant="secondary"
 							size="small"

From 2cea1eb53e098ab9d790d5a041feda82548efd1f Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Wed, 3 Jul 2024 01:46:05 +0900
Subject: [PATCH 03/12] Fix in ToolbarButton

---
 packages/components/src/toolbar/toolbar-button/index.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/components/src/toolbar/toolbar-button/index.tsx b/packages/components/src/toolbar/toolbar-button/index.tsx
index ea18c3a23e3ab8..ca73084467cc69 100644
--- a/packages/components/src/toolbar/toolbar-button/index.tsx
+++ b/packages/components/src/toolbar/toolbar-button/index.tsx
@@ -60,6 +60,7 @@ function UnforwardedToolbarButton(
 						className
 					) }
 					isPressed={ isActive }
+					__experimentalIsFocusable
 					disabled={ isDisabled }
 					data-toolbar-item
 					{ ...extraProps }
@@ -85,6 +86,7 @@ function UnforwardedToolbarButton(
 				<Button
 					label={ title }
 					isPressed={ isActive }
+					__experimentalIsFocusable
 					disabled={ isDisabled }
 					{ ...toolbarItemProps }
 				>

From ed03d97bebab4a17dd542a851d9db30cfb333568 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Wed, 3 Jul 2024 02:44:34 +0900
Subject: [PATCH 04/12] Fix unit test

---
 .../src/components/block-switcher/test/index.js      | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/block-editor/src/components/block-switcher/test/index.js b/packages/block-editor/src/components/block-switcher/test/index.js
index ce900003e7a603..bc1b7d1a4a3640 100644
--- a/packages/block-editor/src/components/block-switcher/test/index.js
+++ b/packages/block-editor/src/components/block-switcher/test/index.js
@@ -134,7 +134,7 @@ describe( 'BlockSwitcher', () => {
 		expect( items[ 1 ] ).toHaveTextContent( headingBlockType.title );
 	} );
 
-	test( 'should render disabled block switcher when we have a single selected block without styles and we cannot remove it', () => {
+	test( 'should render accessibly disabled block switcher when we have a single selected block without styles and we cannot remove it', () => {
 		useSelect.mockImplementation( () => ( {
 			blocks: [ headingBlock1 ],
 			icon: copy,
@@ -142,11 +142,11 @@ describe( 'BlockSwitcher', () => {
 			canRemove: false,
 		} ) );
 		render( <BlockSwitcher clientIds={ [ headingBlock1.clientId ] } /> );
-		expect(
-			screen.getByRole( 'button', {
-				name: 'Block Name',
-			} )
-		).toBeDisabled();
+		const blockSwitcher = screen.getByRole( 'button', {
+			name: 'Block Name',
+		} );
+		expect( blockSwitcher ).toBeEnabled();
+		expect( blockSwitcher ).toHaveAttribute( 'aria-disabled', 'true' );
 	} );
 
 	test( 'should render message for no available transforms', async () => {

From f95b0b253b588f1f1969e942bbd145133ab9526a Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Wed, 3 Jul 2024 06:36:21 +0900
Subject: [PATCH 05/12] List block: Try normalizing `disabled`

---
 packages/block-library/src/list/edit.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/list/edit.js b/packages/block-library/src/list/edit.js
index 94a7a0945d6294..68270ecce5686d 100644
--- a/packages/block-library/src/list/edit.js
+++ b/packages/block-library/src/list/edit.js
@@ -111,7 +111,7 @@ function IndentUI( { clientId } ) {
 				icon={ isRTL() ? formatOutdentRTL : formatOutdent }
 				title={ __( 'Outdent' ) }
 				describedBy={ __( 'Outdent list item' ) }
-				disabled={ ! canOutdent }
+				isDisabled={ ! canOutdent }
 				onClick={ outdentList }
 			/>
 		</>

From 747eb2b3c57deee54d0d4cf53bcd631fe7a2601f Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Wed, 3 Jul 2024 08:00:27 +0900
Subject: [PATCH 06/12] Revert "Fix in ToolbarButton"

This reverts commit 2cea1eb53e098ab9d790d5a041feda82548efd1f.
---
 packages/components/src/toolbar/toolbar-button/index.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/components/src/toolbar/toolbar-button/index.tsx b/packages/components/src/toolbar/toolbar-button/index.tsx
index ca73084467cc69..ea18c3a23e3ab8 100644
--- a/packages/components/src/toolbar/toolbar-button/index.tsx
+++ b/packages/components/src/toolbar/toolbar-button/index.tsx
@@ -60,7 +60,6 @@ function UnforwardedToolbarButton(
 						className
 					) }
 					isPressed={ isActive }
-					__experimentalIsFocusable
 					disabled={ isDisabled }
 					data-toolbar-item
 					{ ...extraProps }
@@ -86,7 +85,6 @@ function UnforwardedToolbarButton(
 				<Button
 					label={ title }
 					isPressed={ isActive }
-					__experimentalIsFocusable
 					disabled={ isDisabled }
 					{ ...toolbarItemProps }
 				>

From d80ba0ef8c4a2e26150a72314c9b71140c96977f Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Wed, 3 Jul 2024 08:00:27 +0900
Subject: [PATCH 07/12] Revert "List block: Try normalizing `disabled`"

This reverts commit f95b0b253b588f1f1969e942bbd145133ab9526a.
---
 packages/block-library/src/list/edit.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/list/edit.js b/packages/block-library/src/list/edit.js
index 68270ecce5686d..94a7a0945d6294 100644
--- a/packages/block-library/src/list/edit.js
+++ b/packages/block-library/src/list/edit.js
@@ -111,7 +111,7 @@ function IndentUI( { clientId } ) {
 				icon={ isRTL() ? formatOutdentRTL : formatOutdent }
 				title={ __( 'Outdent' ) }
 				describedBy={ __( 'Outdent list item' ) }
-				isDisabled={ ! canOutdent }
+				disabled={ ! canOutdent }
 				onClick={ outdentList }
 			/>
 		</>

From 74c34ef79d16b4ab763fc9f78b4c7713f8f5b7de Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Wed, 3 Jul 2024 08:04:08 +0900
Subject: [PATCH 08/12] ToolbarButton: Defer fix

---
 packages/components/src/toolbar/toolbar-button/index.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/components/src/toolbar/toolbar-button/index.tsx b/packages/components/src/toolbar/toolbar-button/index.tsx
index ea18c3a23e3ab8..34a577bbd61081 100644
--- a/packages/components/src/toolbar/toolbar-button/index.tsx
+++ b/packages/components/src/toolbar/toolbar-button/index.tsx
@@ -60,6 +60,10 @@ function UnforwardedToolbarButton(
 						className
 					) }
 					isPressed={ isActive }
+					// TODO: Should be focusable disabled, but adding `__experimentalIsFocusable` will trigger a
+					// focus bug when ToolbarButton is disabled via the `disabled` prop.
+					// Must address first: https://github.com/WordPress/gutenberg/issues/63070
+					// eslint-disable-next-line no-restricted-syntax
 					disabled={ isDisabled }
 					data-toolbar-item
 					{ ...extraProps }
@@ -85,6 +89,10 @@ function UnforwardedToolbarButton(
 				<Button
 					label={ title }
 					isPressed={ isActive }
+					// TODO: Should be focusable disabled, but adding `__experimentalIsFocusable` will trigger a
+					// focus bug when ToolbarButton is disabled via the `disabled` prop.
+					// Must address first: https://github.com/WordPress/gutenberg/issues/63070
+					// eslint-disable-next-line no-restricted-syntax
 					disabled={ isDisabled }
 					{ ...toolbarItemProps }
 				>

From 5f92fdc61f0db33e567ff11d58a4f86d2cb50c92 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Wed, 3 Jul 2024 08:05:17 +0900
Subject: [PATCH 09/12] Revert "Fix unit test"

This reverts commit ed03d97bebab4a17dd542a851d9db30cfb333568.
---
 .../src/components/block-switcher/test/index.js      | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/block-editor/src/components/block-switcher/test/index.js b/packages/block-editor/src/components/block-switcher/test/index.js
index bc1b7d1a4a3640..ce900003e7a603 100644
--- a/packages/block-editor/src/components/block-switcher/test/index.js
+++ b/packages/block-editor/src/components/block-switcher/test/index.js
@@ -134,7 +134,7 @@ describe( 'BlockSwitcher', () => {
 		expect( items[ 1 ] ).toHaveTextContent( headingBlockType.title );
 	} );
 
-	test( 'should render accessibly disabled block switcher when we have a single selected block without styles and we cannot remove it', () => {
+	test( 'should render disabled block switcher when we have a single selected block without styles and we cannot remove it', () => {
 		useSelect.mockImplementation( () => ( {
 			blocks: [ headingBlock1 ],
 			icon: copy,
@@ -142,11 +142,11 @@ describe( 'BlockSwitcher', () => {
 			canRemove: false,
 		} ) );
 		render( <BlockSwitcher clientIds={ [ headingBlock1.clientId ] } /> );
-		const blockSwitcher = screen.getByRole( 'button', {
-			name: 'Block Name',
-		} );
-		expect( blockSwitcher ).toBeEnabled();
-		expect( blockSwitcher ).toHaveAttribute( 'aria-disabled', 'true' );
+		expect(
+			screen.getByRole( 'button', {
+				name: 'Block Name',
+			} )
+		).toBeDisabled();
 	} );
 
 	test( 'should render message for no available transforms', async () => {

From 4291708e0a8bea87fd4be66cda8b8ae38655f6d6 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Wed, 3 Jul 2024 08:09:59 +0900
Subject: [PATCH 10/12] Add changelog

---
 packages/components/CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 70fbd64b380c64..29313168993cac 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -7,6 +7,7 @@
 -   `UnitControl`: Fix colors when disabled. ([#62970](https://github.com/WordPress/gutenberg/pull/62970))
 -   `useUpdateEffect`: Correctly track mounted state in strict mode. ([#62974](https://github.com/WordPress/gutenberg/pull/62974))
 -   `UnitControl`: Fix an issue where keyboard shortcuts unintentionally shift focus on Windows OS. ([#62988](https://github.com/WordPress/gutenberg/pull/62988))
+-   Fix inaccessibly disabled `Button`s ([#62306](https://github.com/WordPress/gutenberg/pull/62306)).
 
 ### Internal
 

From 8c1dce3416f1eca692645ee005ddb9f9dcb3c335 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Wed, 3 Jul 2024 08:23:27 +0900
Subject: [PATCH 11/12] ToolbarButton: Add back focusable when not within
 ToolbarItem

---
 packages/components/src/toolbar/toolbar-button/index.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/components/src/toolbar/toolbar-button/index.tsx b/packages/components/src/toolbar/toolbar-button/index.tsx
index 34a577bbd61081..05278bb37ba97c 100644
--- a/packages/components/src/toolbar/toolbar-button/index.tsx
+++ b/packages/components/src/toolbar/toolbar-button/index.tsx
@@ -60,10 +60,7 @@ function UnforwardedToolbarButton(
 						className
 					) }
 					isPressed={ isActive }
-					// TODO: Should be focusable disabled, but adding `__experimentalIsFocusable` will trigger a
-					// focus bug when ToolbarButton is disabled via the `disabled` prop.
-					// Must address first: https://github.com/WordPress/gutenberg/issues/63070
-					// eslint-disable-next-line no-restricted-syntax
+					__experimentalIsFocusable
 					disabled={ isDisabled }
 					data-toolbar-item
 					{ ...extraProps }

From f0b3b63ed3d8296b30f6dad08a2f99fde674dfca Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Wed, 3 Jul 2024 08:26:01 +0900
Subject: [PATCH 12/12] Revert "Revert "Fix unit test""

This reverts commit 5f92fdc61f0db33e567ff11d58a4f86d2cb50c92.
---
 .../src/components/block-switcher/test/index.js      | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/block-editor/src/components/block-switcher/test/index.js b/packages/block-editor/src/components/block-switcher/test/index.js
index ce900003e7a603..bc1b7d1a4a3640 100644
--- a/packages/block-editor/src/components/block-switcher/test/index.js
+++ b/packages/block-editor/src/components/block-switcher/test/index.js
@@ -134,7 +134,7 @@ describe( 'BlockSwitcher', () => {
 		expect( items[ 1 ] ).toHaveTextContent( headingBlockType.title );
 	} );
 
-	test( 'should render disabled block switcher when we have a single selected block without styles and we cannot remove it', () => {
+	test( 'should render accessibly disabled block switcher when we have a single selected block without styles and we cannot remove it', () => {
 		useSelect.mockImplementation( () => ( {
 			blocks: [ headingBlock1 ],
 			icon: copy,
@@ -142,11 +142,11 @@ describe( 'BlockSwitcher', () => {
 			canRemove: false,
 		} ) );
 		render( <BlockSwitcher clientIds={ [ headingBlock1.clientId ] } /> );
-		expect(
-			screen.getByRole( 'button', {
-				name: 'Block Name',
-			} )
-		).toBeDisabled();
+		const blockSwitcher = screen.getByRole( 'button', {
+			name: 'Block Name',
+		} );
+		expect( blockSwitcher ).toBeEnabled();
+		expect( blockSwitcher ).toHaveAttribute( 'aria-disabled', 'true' );
 	} );
 
 	test( 'should render message for no available transforms', async () => {