From 72fde268432b95e027deae618c36b9e16c25d140 Mon Sep 17 00:00:00 2001
From: Bruce Blaser <bbsmooth@gmail.com>
Date: Mon, 21 Aug 2023 11:20:46 -0700
Subject: [PATCH] fix(a11y): search input (#51329)

---
 .../src/components/Header/components/universal-nav.css |  3 +--
 client/src/components/search/searchBar/search-bar.tsx  | 10 +++++++---
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/client/src/components/Header/components/universal-nav.css b/client/src/components/Header/components/universal-nav.css
index a2c0b5e4cb8..4e89e073d42 100644
--- a/client/src/components/Header/components/universal-nav.css
+++ b/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;
 }
 
diff --git a/client/src/components/search/searchBar/search-bar.tsx b/client/src/components/search/searchBar/search-bar.tsx
index be23122af5b..c5981afccfd 100644
--- a/client/src/components/search/searchBar/search-bar.tsx
+++ b/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