diff --git a/packages/react-components/react-search-preview/src/components/SearchBox/SearchBox.test.tsx b/packages/react-components/react-search-preview/src/components/SearchBox/SearchBox.test.tsx index 4965620ef30b2e..5e2cb0198178b2 100644 --- a/packages/react-components/react-search-preview/src/components/SearchBox/SearchBox.test.tsx +++ b/packages/react-components/react-search-preview/src/components/SearchBox/SearchBox.test.tsx @@ -130,4 +130,32 @@ describe('SearchBox', () => { expect(onChange).toHaveBeenCalledTimes(1); expect(onChange).toHaveBeenCalledWith(expect.anything(), expect.objectContaining({ value: '' })); }); + + it('can tab into the dismiss button', () => { + const onChange = jest.fn(); + renderedComponent = render(); + + // First click into the text box + userEvent.click(renderedComponent.getByRole('searchbox')); + userEvent.tab(); + + const focusedElement = document.activeElement; + expect(focusedElement).toBeDefined(); + expect(focusedElement?.tagName.toLowerCase()).toEqual('span'); + expect(focusedElement?.getAttribute('aria-label')).toEqual('clear'); + }); + + it('clears the searchbox when pressing {enter} on the dismiss button', () => { + const onChange = jest.fn(); + renderedComponent = render(); + + const input = renderedComponent.getByRole('searchbox'); + const dismissButton = renderedComponent.getByLabelText('clear'); + const previousValue = (input as HTMLInputElement).value; + userEvent.type(dismissButton, '{enter}'); + + expect(onChange).toHaveBeenLastCalledWith(expect.objectContaining({ key: 'Enter' }), { value: '' }); + expect(previousValue).toEqual('hello'); + expect((input as HTMLInputElement).value).toEqual(''); + }); }); diff --git a/packages/react-components/react-search-preview/src/components/SearchBox/SearchBox.types.ts b/packages/react-components/react-search-preview/src/components/SearchBox/SearchBox.types.ts index 11aa98d2fdf0a1..2c0b9e75a6e006 100644 --- a/packages/react-components/react-search-preview/src/components/SearchBox/SearchBox.types.ts +++ b/packages/react-components/react-search-preview/src/components/SearchBox/SearchBox.types.ts @@ -37,4 +37,7 @@ export type SearchBoxState = ComponentState & }; /** Overloaded onChange event type, used to merge functionality of regular text entry and the dismiss button */ -export type SearchBoxChangeEvent = React.ChangeEvent | React.MouseEvent; +export type SearchBoxChangeEvent = + | React.ChangeEvent + | React.MouseEvent + | React.KeyboardEvent; diff --git a/packages/react-components/react-search-preview/src/components/SearchBox/__snapshots__/SearchBox.test.tsx.snap b/packages/react-components/react-search-preview/src/components/SearchBox/__snapshots__/SearchBox.test.tsx.snap index c524fe5a1393c6..71ba35069d6e8b 100644 --- a/packages/react-components/react-search-preview/src/components/SearchBox/__snapshots__/SearchBox.test.tsx.snap +++ b/packages/react-components/react-search-preview/src/components/SearchBox/__snapshots__/SearchBox.test.tsx.snap @@ -35,7 +35,7 @@ exports[`SearchBox renders a default state 1`] = ` aria-label="clear" class="fui-SearchBox__dismiss" role="button" - tabindex="-1" + tabindex="0" >