fix(search): Revert placeholder & sync label & aria-label

Signed-off-by: Carlos Esteban Lopez <lcarlosesteb@vmware.com>

.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.

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', () => {
       </TestApiProvider>,
     );
 
-    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', () => {
       </TestApiProvider>,
     );
 
-    await userEvent.click(screen.getByLabelText(`Search in ${title}`));
+    await userEvent.click(screen.getByLabelText(`Search`));
 
     await waitFor(() => {
       expect(screen.getAllByTitle('Option icon')).toHaveLength(3);

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', () => {
       </TestApiProvider>,
     );
 
-    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', () => {
       </TestApiProvider>,
     );
 
-    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', () => {
       </TestApiProvider>,
     );
 
-    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', () => {
       </TestApiProvider>,
     );
 
-    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', () => {
       </TestApiProvider>,
     );
 
-    const textbox = await screen.findByRole('textbox', {
-      name: 'Search in Mock title',
-    });
+    const textbox = await screen.findByRole('textbox', { name: 'Search' });
 
     let value = 'value';
 

plugins/search-react/src/components/SearchBar/SearchBar.tsx

@@ -78,9 +78,10 @@ export const SearchBarBase: ForwardRefExoticComponent<SearchBarBaseProps> =
         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<SearchBarBaseProps> =
         }
       }, [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<SearchBarBaseProps> =
         </InputAdornment>
       );
 
-      const endAdornment = (
+      const clearButtonEndAdornment = (
         <InputAdornment position="end">
           <Button
             aria-label="Clear"
@@ -159,11 +162,15 @@ export const SearchBarBase: ForwardRefExoticComponent<SearchBarBaseProps> =
             inputRef={ref}
             value={value}
             label={label}
+            placeholder={inputPlaceholder}
             InputProps={{
               startAdornment,
-              endAdornment: clearButton ? endAdornment : defaultEndAdornment,
+              endAdornment: clearButton
+                ? clearButtonEndAdornment
+                : endAdornment,
             }}
             inputProps={{
+              'aria-label': ariaLabel,
               ...defaultInputProps,
             }}
             fullWidth={fullWidth}

plugins/search/src/components/SearchModal/SearchModal.test.tsx

@@ -166,6 +166,6 @@ describe('SearchModal', () => {
       },
     );
 
-    expect(screen.getByLabelText('Search in Mock app')).toHaveFocus();
+    expect(screen.getByLabelText('Search')).toHaveFocus();
   });
 });