From a87f98b3858aa5d8b3434f3856b0a0aa1dba613b Mon Sep 17 00:00:00 2001 From: Carlos Esteban Lopez Date: Wed, 19 Apr 2023 18:45:28 -0500 Subject: [PATCH] fix(search): Revert placeholder & sync label & aria-label Signed-off-by: Carlos Esteban Lopez --- .changeset/mighty-bears-glow.md | 2 +- .../SearchAutocomplete.test.tsx | 6 ++--- .../components/SearchBar/SearchBar.test.tsx | 26 +++++-------------- .../src/components/SearchBar/SearchBar.tsx | 19 +++++++++----- .../SearchModal/SearchModal.test.tsx | 2 +- 5 files changed, 25 insertions(+), 30 deletions(-) diff --git a/.changeset/mighty-bears-glow.md b/.changeset/mighty-bears-glow.md index 578e017866..e540cdd8ae 100644 --- a/.changeset/mighty-bears-glow.md +++ b/.changeset/mighty-bears-glow.md @@ -7,4 +7,4 @@ Add close button & improve search input. MUI's Paper wrapping the SearchBar in the SearchPage was removed, we recommend users update their apps accordingly. -SearchBarBase's TextField's placeholder was changed into a label, tests relying on the placeholder should be updated to query for the label instead. +SearchBarBase's TextField's label support added & aria-label uses label string if present, tests relying on the default placeholder value should still work unless custom placeholder was given. diff --git a/plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.test.tsx b/plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.test.tsx index 54deca5f5d..41f45e840d 100644 --- a/plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.test.tsx +++ b/plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.test.tsx @@ -74,7 +74,7 @@ describe('SearchAutocomplete', () => { expect(screen.queryByText(options[1])).not.toBeInTheDocument(); expect(screen.queryByText(options[2])).not.toBeInTheDocument(); - await userEvent.click(screen.getByLabelText(`Search in ${title}`)); + await userEvent.click(screen.getByLabelText(`Search`)); await waitFor(() => { expect(screen.getByText(options[0])).toBeInTheDocument(); @@ -150,7 +150,7 @@ describe('SearchAutocomplete', () => { , ); - await userEvent.click(screen.getByLabelText(`Search in ${title}`)); + await userEvent.click(screen.getByLabelText(`Search`)); await userEvent.click(screen.getByText(options[0])); @@ -218,7 +218,7 @@ describe('SearchAutocomplete', () => { , ); - await userEvent.click(screen.getByLabelText(`Search in ${title}`)); + await userEvent.click(screen.getByLabelText(`Search`)); await waitFor(() => { expect(screen.getAllByTitle('Option icon')).toHaveLength(3); diff --git a/plugins/search-react/src/components/SearchBar/SearchBar.test.tsx b/plugins/search-react/src/components/SearchBar/SearchBar.test.tsx index 5846d02013..e4859861d9 100644 --- a/plugins/search-react/src/components/SearchBar/SearchBar.test.tsx +++ b/plugins/search-react/src/components/SearchBar/SearchBar.test.tsx @@ -70,7 +70,7 @@ describe('SearchBar', () => { ); await waitFor(() => { - expect(screen.getByLabelText('Search in Mock title')).toBeInTheDocument(); + expect(screen.getByLabelText('Search')).toBeInTheDocument(); }); }); @@ -133,9 +133,7 @@ describe('SearchBar', () => { ); await waitFor(() => { - expect( - screen.getByRole('textbox', { name: 'Search in Mock title' }), - ).toHaveValue(term); + expect(screen.getByRole('textbox', { name: 'Search' })).toHaveValue(term); }); }); @@ -156,9 +154,7 @@ describe('SearchBar', () => { , ); - const textbox = screen.getByRole('textbox', { - name: 'Search in Mock title', - }); + const textbox = screen.getByRole('textbox', { name: 'Search' }); const value = 'value'; @@ -195,9 +191,7 @@ describe('SearchBar', () => { , ); - const textbox = screen.getByRole('textbox', { - name: 'Search in Mock title', - }); + const textbox = screen.getByRole('textbox', { name: 'Search' }); await waitFor(() => { expect(textbox).toHaveValue(term); @@ -255,9 +249,7 @@ describe('SearchBar', () => { , ); - const textbox = await screen.findByRole('textbox', { - name: 'Search in Mock title', - }); + const textbox = await screen.findByRole('textbox', { name: 'Search' }); const value = 'value'; @@ -301,9 +293,7 @@ describe('SearchBar', () => { , ); - const textbox = await screen.findByRole('textbox', { - name: 'Search in Mock title', - }); + const textbox = await screen.findByRole('textbox', { name: 'Search' }); const value = 'value'; @@ -353,9 +343,7 @@ describe('SearchBar', () => { , ); - const textbox = await screen.findByRole('textbox', { - name: 'Search in Mock title', - }); + const textbox = await screen.findByRole('textbox', { name: 'Search' }); let value = 'value'; diff --git a/plugins/search-react/src/components/SearchBar/SearchBar.tsx b/plugins/search-react/src/components/SearchBar/SearchBar.tsx index e36287b5b3..913f515aaa 100644 --- a/plugins/search-react/src/components/SearchBar/SearchBar.tsx +++ b/plugins/search-react/src/components/SearchBar/SearchBar.tsx @@ -78,9 +78,10 @@ export const SearchBarBase: ForwardRefExoticComponent = clearButton = true, fullWidth = true, value: defaultValue, - label: defaultLabel, + label, + placeholder, inputProps: defaultInputProps = {}, - endAdornment: defaultEndAdornment, + endAdornment, ...rest } = props; @@ -119,8 +120,10 @@ export const SearchBarBase: ForwardRefExoticComponent = } }, [onChange, onClear]); - const label = - defaultLabel ?? + const ariaLabel: string | undefined = label ? undefined : 'Search'; + + const inputPlaceholder = + placeholder ?? `Search in ${configApi.getOptionalString('app.title') || 'Backstage'}`; const startAdornment = ( @@ -131,7 +134,7 @@ export const SearchBarBase: ForwardRefExoticComponent = ); - const endAdornment = ( + const clearButtonEndAdornment = (