fix(SearchField): accessibility - do not exclude clear button from ta…

…b order (#5376)

* fix(SearchField): accessibility - do not exclude clear button from tab order

* Create eighty-candles-complain.md

---------

Co-authored-by: Tim Nguyen <[email protected]>

.changeset/eighty-candles-complain.md

@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui-react": patch
+---
+
+fix:(SearchField) accessibility - do not exclude clear button from tab order

packages/react/src/primitives/SearchField/SearchField.tsx

@@ -78,7 +78,6 @@ const SearchFieldPrimitive: Primitive<SearchFieldProps, 'input'> = (
       innerEndComponent={
         <FieldClearButton
           ariaLabel={clearButtonLabel}
-          excludeFromTabOrder
           isVisible={!isDisabled && strHasLength(composedValue)}
           onClick={onClearHandler}
           size={size}

packages/react/src/primitives/SearchField/__tests__/SearchField.test.tsx

@@ -1,5 +1,11 @@
 import * as React from 'react';
-import { act, fireEvent, render, screen } from '@testing-library/react';
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { ComponentClassName } from '@aws-amplify/ui';
@@ -214,6 +220,23 @@ describe('SearchField component', () => {
       expect(searchField).toHaveFocus();
     });
 
+    it('should be focusable via keyboard', async () => {
+      const user = userEvent.setup();
+      render(<SearchField label={label} name="q" />);
+
+      const searchField = await screen.findByLabelText(label);
+
+      await user.type(searchField, searchQuery);
+
+      const clearButton = await screen.findByLabelText(clearButtonLabel);
+      expect(clearButton).not.toHaveFocus();
+
+      await user.tab();
+      await waitFor(() => {
+        expect(clearButton).toHaveFocus();
+      });
+    });
+
     it('should clear text and refocus controlled input when clicked', async () => {
       render(<ControlledSearchField />);