fix(a11y): search input (#51329)

client/src/components/Header/components/universal-nav.css

@@ -316,8 +316,7 @@ li > button.nav-link-signout:not([aria-disabled='true']):is(:hover, :focus) {
    menu is collapsed. */
 .universal-nav-right
   #toggle-button-nav[aria-expanded='false']
-  + .fcc_searchBar
-  .ais-SearchBox-form {
+  + .fcc_searchBar {
   display: none;
 }
 

client/src/components/search/searchBar/search-bar.tsx

@@ -72,7 +72,14 @@ export class SearchBar extends Component<SearchBarProps, SearchBarState> {
   }
 
   componentDidMount(): void {
+    const { t } = this.props;
+
     document.addEventListener('click', this.handleFocus);
+
+    const searchInput = document.querySelector('.ais-SearchBox-input');
+    if (searchInput) {
+      searchInput.setAttribute('aria-label', t('search.label'));
+    }
   }
 
   componentWillUnmount(): void {
@@ -198,9 +205,6 @@ export class SearchBar extends Component<SearchBarProps, SearchBarState> {
         >
           <HotKeys handlers={this.keyHandlers} keyMap={this.keyMap}>
             <div className='fcc_search_wrapper'>
-              <label className='fcc_sr_only' htmlFor='fcc_instantsearch'>
-                {t('search.label')}
-              </label>
               <ObserveKeys except={['Space']}>
                 <div onFocus={this.handleFocus} role='textbox'>
                   <SearchBox