Add label to search bar component for accessibility (#1139)

Author: ailbhebyrne

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+
+- Added label to search bar component for accessibility and CSS to hide the label on the screen.
+
 ## [3.178.1] - 2025-04-14
 
 ### Changed

react/__tests__/components/__snapshots__/SearchBar.test.js.snap

@@ -15,6 +15,13 @@ exports[`<SearchBar /> should match snapshot 1`] = `
         class="relative-m w-100 searchBarInnerContainer"
         role="combobox"
       >
+        <label
+          class="visuallyHidden"
+          for="downshift-1-input"
+          id="downshift-1-label"
+        >
+          Search
+        </label>
         <div
           class="autoCompleteOuterContainer"
         >
@@ -24,6 +31,7 @@ exports[`<SearchBar /> should match snapshot 1`] = `
             <label>
               <input
                 aria-autocomplete="list"
+                aria-label="Search for products"
                 aria-labelledby="downshift-1-label"
                 autocomplete="off"
                 data-error="false"

react/components/SearchBar/SearchBar.css

@@ -34,3 +34,16 @@
     box-shadow: none;
   }
 }
+
+.visuallyHidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}

react/components/SearchBar/SearchBar.tsx

@@ -273,6 +273,7 @@ function SearchBar({
             getInputProps,
             getItemProps,
             getMenuProps,
+            getLabelProps,
             selectedItem,
             highlightedIndex,
             isOpen,
@@ -285,6 +286,9 @@ function SearchBar({
                 [isOpen ? 'opened' : '', inputValue ? 'filled' : '']
               )}`}
             >
+              <label {...getLabelProps()} className={styles.visuallyHidden}>
+                {formatIOMessage({ id: placeholder, intl }) as string}
+              </label>
               <AutocompleteInput
                 // eslint-disable-next-line jsx-a11y/no-autofocus
                 autoFocus={autoFocus}