Improve primary search a11y

client/src/components/Search/PrimarySearchResults.jsx

@@ -44,55 +44,58 @@ class PrimaryResults extends Component {
 
     return (
       <section
+        id="primary-search-results"
+        role="listbox"
+        aria-label="Search results"
         className="partial-results-container"
         onMouseOver={this._handleOnMouseOver}
         onMouseOut={this._handleOnMouseOut}
       >
-        <ul>
-          {results.map((result, i) => {
-            const {
+        {results.map((result, i) => {
+          const {
+            type,
+            code = null,
+            ownid = null,
+            place = null,
+            coordinates = null,
+            year,
+          } = sanitizeSearchResult({
+            result,
+            year: searchYear,
+          })
+
+          const searchQueryRoute = createQueryStringFromParams(
+            {
               type,
-              code = null,
-              ownid = null,
-              place = null,
-              coordinates = null,
+              code,
+              ownid,
+              place,
+              coordinates,
               year,
-            } = sanitizeSearchResult({
-              result,
-              year: searchYear,
-            })
+            },
+            "/map"
+          )
 
-            const searchQueryRoute = createQueryStringFromParams(
-              {
+          return (
+            <Link
+              key={searchQueryRoute}
+              role="option"
+              id={`primary-search-result-${index}`}
+              aria-selected={(i === index).toString()}
+              className={i % 2 ? "list-item-odd" : "list-item-even"}
+              style={i === index ? { backgroundColor: uiMedGray } : null}
+              to={searchQueryRoute}
+            >
+              <img src={primaryResultIcons[type]} alt={type} />
+              {createResultFromParams({
                 type,
                 code,
                 ownid,
                 place,
-                coordinates,
-                year,
-              },
-              "/map"
-            )
-
-            return (
-              <Link key={searchQueryRoute} to={searchQueryRoute}>
-                <li
-                  className={i % 2 ? "list-item-odd" : "list-item-even"}
-                  style={i === index ? { backgroundColor: uiMedGray } : null}
-                  onClick={this._handleOnClick}
-                >
-                  <img src={primaryResultIcons[type]} alt={`Icon of ${type}`} />
-                  {createResultFromParams({
-                    type,
-                    code,
-                    ownid,
-                    place,
-                  })}
-                </li>
-              </Link>
-            )
-          })}
-        </ul>
+              })}
+            </Link>
+          )
+        })}
       </section>
     )
   }

client/src/components/Search/SearchBar.jsx

@@ -53,7 +53,7 @@ class SearchBar extends Component {
       })
     )
 
-    this.props.dispatch(updatePrimarySearch({ results: null, index: 0 }))
+    this.props.dispatch(updatePrimarySearch({ results: null, index: -1 }))
   }
 
   _setSearchPlaceholderText = (searchType) => {
@@ -140,34 +140,30 @@ class SearchBar extends Component {
     )
   }
 
-  _handleKeyPress = (e) => {
+  _handleOnKeyDown = (e) => {
     const { results, index } = this.props.searchState.primarySearch
     // if it is an enter key press
     if (e.key === "Enter") {
       if (results && results.length > 0) {
         // set location according to current index selection
         this._setSearchLocationParams(results[index])
         this.props.dispatch(updatePrimarySearch({ isOpen: false }))
-
         // blur the input
         this._inputRef.current.blur()
       }
-    }
-  }
-
-  _handleOnKeyDown = (e) => {
-    const { results, index } = this.props.searchState.primarySearch
-    if (e.key === "ArrowDown") {
+    } else if (
+      ["Down", "ArrowDown"].includes(e.key) ||
+      (["Right", "ArrowRight"].includes(e.key) && index >= 0)
+    ) {
       if (index < results.length - 1) {
         this.props.dispatch(updatePrimarySearch({ index: index + 1 }))
       }
-    }
-  }
-
-  _handleOnKeyUp = (e) => {
-    const { index } = this.props.searchState.primarySearch
-    if (e.key === "ArrowUp") {
-      if (index > 0) {
+    } else if (
+      ["Up", "ArrowUp"].includes(e.key) ||
+      (["Left", "ArrowLeft"].includes(e.key) && index >= 0)
+    ) {
+      e.preventDefault()
+      if (index >= 0) {
         this.props.dispatch(updatePrimarySearch({ index: index - 1 }))
       }
     }
@@ -191,7 +187,7 @@ class SearchBar extends Component {
         searchCoordinates: null,
       })
     )
-    this.props.dispatch(updatePrimarySearch({ results: null, index: 0 }))
+    this.props.dispatch(updatePrimarySearch({ results: null, index: -1 }))
     this.props.dispatch(
       updateDetailedSearch({
         results: null,
@@ -260,6 +256,8 @@ class SearchBar extends Component {
     const { searchType, searchTerm, searchYear } =
       this.props.searchState.searchParams
     const { searchYears } = this.props.searchState.searchBar
+    const { isOpen, index: selectedIndex } =
+      this.props.searchState.primarySearch
 
     const { searchBarType, showSearchButtons } = this.props
 
@@ -295,14 +293,16 @@ class SearchBar extends Component {
               <div className="year-select">
                 <select
                   id="years"
+                  aria-label="year"
                   onChange={this._handleYearSelect}
                   onFocus={this._handleYearSelectFocus}
+                  value={searchYear}
                 >
                   {searchYears.map((result) => {
                     return (
                       <option
                         key={result.praxisyear}
-                        selected={result.praxisyear.toString() === searchYear}
+                        value={result.praxisyear.toString()}
                       >
                         {result.praxisyear}
                       </option>
@@ -315,16 +315,25 @@ class SearchBar extends Component {
                   showSearchButtons ? "search-form" : "search-form-home"
                 }
               >
-                <div
+                <button
                   className="clear-button"
+                  aria-label="Clear search"
+                  type="button"
                   onClick={this._handleClearIconClick}
                 >
                   &times;
-                </div>
+                </button>
                 <DebounceInput
                   inputRef={this._inputRef}
                   type="text"
                   size="1"
+                  role="combobox"
+                  aria-autocomplete="list"
+                  aria-controls="primary-search-results"
+                  aria-expanded={isOpen.toString()}
+                  aria-activedescendant={
+                    isOpen ? `primary-search-result-${selectedIndex}` : null
+                  }
                   placeholder={
                     showSearchButtons
                       ? this._setSearchPlaceholderText(searchType)
@@ -334,21 +343,18 @@ class SearchBar extends Component {
                   minLength={1}
                   debounceTimeout={300}
                   onChange={this._handleOnChange}
-                  onKeyPress={(event) => {
-                    event.persist()
-                    this._handleKeyPress(event)
-                  }}
                   onKeyDown={this._handleOnKeyDown}
-                  onKeyUp={this._handleOnKeyUp}
                   onFocus={this._handleOnFocus}
                   onBlur={this._handleOnBlur}
                 />
-                <div
+                <button
                   className="search-button"
+                  aria-label="Search"
+                  type="button"
                   onClick={this._handleSearchIconClick}
                 >
-                  <img src={searchIcon} alt="search button"></img>
-                </div>
+                  <img src={searchIcon} alt=""></img>
+                </button>
               </div>
             </div>
             <PrimaryResultsContainer {...this.props} />

client/src/reducers/search.js

@@ -17,7 +17,7 @@ const initialSearchState = {
     searchTerm: "",
     searchCoordinates: null,
   },
-  primarySearch: { results: null, index: 0, isOpen: false, isActive: false },
+  primarySearch: { results: null, index: -1, isOpen: false, isActive: false },
   detailedSearch: {
     results: null,
     drawerIsOpen: false,

client/src/scss/Search.scss

@@ -1,3 +1,8 @@
+button {
+  border: none;
+  border-radius: 0;
+}
+
 /*----- visible only on map -----*/
 .search-grid-item {
   grid-row: 1;
@@ -79,6 +84,7 @@ input[type="text"] {
   padding: 12px 20px;
   box-sizing: inherit;
   border: none;
+  border-radius: 0;
   -webkit-transition: 0.2s;
   transition: 0.2s;
   outline: none;
@@ -152,6 +158,7 @@ input[type="text"] {
   // left: 4px;
   background-color: $ui-white;
   min-width: 60px;
+  border-radius: 0;
 }
 
 .year-select > select {
@@ -161,6 +168,7 @@ input[type="text"] {
   width: 100%;
   background-color: $ui-white;
   outline: 0px;
+  border-radius: 0;
   border-top: 4px solid $ui-black;
   border-left: 4px solid $ui-black;
   border-bottom: 4px solid $ui-black;
@@ -190,7 +198,7 @@ select > option {
   border-left: 4px solid $ui-black;
   border-right: 4px solid $ui-black;
   border-bottom: 4px solid $ui-black;
-  ul > a > li {
+  a {
     display: flex;
     width: 100%;
     padding: 10px;
@@ -199,11 +207,11 @@ select > option {
     color: $ui-black;
   }
 
-  ul > a > li:hover {
+  a:hover {
     border: 1px solid $ui-black;
   }
 
-  ul > a > li > img {
+  a > img {
     height: 30px;
     margin-right: 20px;
   }