feat: added aria-label for screen readers on search bar input

Author: adiefco

CHANGELOG.md

@@ -7,12 +7,16 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+
+- aria-label to search-bar input
+
 ## [3.176.4] - 2025-03-11
 
 ### Added
 
 - Youtube shorts as a valid format
-- 
+  
 ## [3.176.3] - 2025-02-28
 
 ### Added

messages/context.json

@@ -2,6 +2,7 @@
   "store/search.placeholder": "search.placeholder",
   "store/search.searchFor": "search.searchFor",
   "store/search.search-term-too-short": "search.search-term-too-short",
+  "store/search.autocompleteInput.aria-label": "store/search.autocompleteInput.aria-label",
   "admin/editor.productName.title": "admin/editor.productName.title",
   "admin/editor.productName.description": "admin/editor.productName.description",
   "admin/editor.productName.showBrandName.title": "admin/editor.productName.showBrandName.title",

messages/en.json

@@ -4,6 +4,7 @@
   "store/search.placeholder": "Search",
   "store/search.searchFor": "Search for {term}",
   "store/search.search-term-too-short": "Search term is too short",
+  "store/search.autocompleteInput.aria-label": "Search for products",
   "admin/editor.productName.title": "Product Name",
   "admin/editor.productName.description": "Product name component",
   "admin/editor.productName.showBrandName.title": "Show brand name",

react/components/SearchBar/AutocompleteInput.tsx

@@ -250,6 +250,7 @@ function AutocompleteInput({
             error={Boolean(inputErrorMessage)}
             errorMessage={inputErrorMessage}
             onSubmit={onGoToSearchPage}
+            aria-label={intl.formatMessage({ id: 'store/search.autocompleteInput.aria-label' })}
           />
         </div>
       </form>
@@ -268,6 +269,7 @@ function AutocompleteInput({
           {...restProps}
           error={Boolean(inputErrorMessage)}
           errorMessage={inputErrorMessage}
+          aria-label={intl.formatMessage({ id: 'store/search.autocompleteInput.aria-label' })}
         />
       </div>
     </div>