From cb8e1101e76cd5dbe64aaf8d1c50d7d13691b7e6 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Wed, 5 Jun 2024 08:58:58 +0900
Subject: [PATCH] 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 }` }