Improve accessibility with semantic buttons, ARIA labels, and color contrast updates

src/components/DataCiteButton/DataCiteButton.tsx

@@ -16,7 +16,7 @@ interface Props extends ButtonProps {
 
 const COLORS = {
   primary: '#037AAD',
-  secondary: '#A3ACB2',
+  secondary: 'var(--datacite-color-primary, #243b54)',
 }
 
 export default function DataCiteButton(props: Props) {

src/components/FacetList/FacetListItem.module.scss

@@ -5,7 +5,7 @@
 .facetlink, .facetlink:hover, .facetlink:visited, .facetlink:active, .facetlink:link {
   display: flex;
   align-items: center;
-      color: #88939a;
+  color: var(--datacite-color-primary, #88939a);
 
   .facetTitle {
     flex-grow:1;

src/components/FilterItem/FilterItem.tsx

@@ -35,9 +35,20 @@ const FilterItem: React.FunctionComponent<Props> = ({
     }
   }
 
+  const isActive = activeFilter === id
+  const filterActionLabel = `${isActive ? 'Remove' : 'Apply'} filter ${title}`
+
   return (
     <div>
-      <a className={"facet-"+name} onClick={() => toggleFilter(id)}>{activeIcon(id)}</a>
+      <button
+        type="button"
+        className={`facet-${name} btn btn-link p-0 border-0 bg-transparent`}
+        aria-label={filterActionLabel}
+        aria-pressed={isActive}
+        onClick={() => toggleFilter(id)}
+      >
+        {activeIcon(id)}
+      </button>
       <div className="facet-title">{title}</div>
       <span className="number pull-right">{count.toLocaleString('en-US')}</span>
       <div className="clearfix" />

src/components/Header/Search.tsx

@@ -30,12 +30,13 @@ export default function Search() {
   }, [searchParams])
 
   function search(query: string) {
-    const params = new URLSearchParams(searchParams || {});
+    const params = new URLSearchParams(searchParams || {})
 
-    if (searchInput) params.set('query', query);
-    else params.delete('query');
+    if (query) params.set('query', query)
+    else params.delete('query')
 
-    router.push(`${base}?${params.toString()}`);
+    const queryString = params.toString()
+    router.push(queryString ? `${base}?${queryString}` : base)
   }
 
   return (
@@ -51,26 +52,27 @@ export default function Search() {
         className={`form-control ${styles.input}`}
         type="text"
       />
-      <Button type="submit" className={`search-submit ${styles.submit}`} onClick={(e) => {
-        search(searchInput)
-        e.preventDefault();
-      }}
-      >
-        <FontAwesomeIcon icon={faSearch} />
-      </Button>
       {searchInput !== '' && (
-        <span
+        <Button
           id="search-clear"
-          title="Clear"
-          aria-label="Clear"
+          type="button"
+          title="Clear search"
+          aria-label="Clear search"
           onClick={() => {
             setSearchInput('')
             search('')
           }}
         >
           <FontAwesomeIcon icon={faTimes} />
-        </span>
+        </Button>
       )}
+      <Button type="submit" aria-label="Search" className={`search-submit ${styles.submit}`} onClick={(e) => {
+        search(searchInput)
+        e.preventDefault();
+      }}
+      >
+        <FontAwesomeIcon icon={faSearch} />
+      </Button>
     </InputGroup>
   )
 }

src/components/SearchBox/SearchBox.tsx

@@ -52,19 +52,22 @@ export default function SearchBox({ path, placeholder = 'Type to search...' }: P
         id="filter-works"
         type="submit"
         className="search-submit-facets"
+        aria-label="Search within these works"
         onClick={onSubmit}
       >
         <FontAwesomeIcon icon={faSearch} />
       </Button>
       {searchInput !== '' && (
-        <span
+        <button
           id="search-clear-facets"
-          title="Clear"
-          aria-label="Clear"
+          type="button"
+          title="Clear search input"
+          aria-label="Clear search input"
+          className="p-0 border-0 bg-transparent"
           onClick={onSearchClear}
         >
           <FontAwesomeIcon icon={faTimes} />
-        </span>
+        </button>
       )}
     </InputGroup>
   </>)

src/components/WorkMetadata/WorkMetadata.module.scss

@@ -1,5 +1,5 @@
 .doiLink {
-	color: #88939a !important;
+	color: var(--datacite-color-primary, #88939a) !important;
 }
 
 .id {

src/styles.css

@@ -183,10 +183,13 @@ a.navbar-brand {
 
 .form-inline #search-clear {
   z-index: 3;
-  color: #cdd2d5;
+  color: #243b54;
   position: absolute;
-  right: 60px;
-  top: 10px;
+  right: 80px;
+  border: none;
+  border-radius: 0;
+  padding: 0;
+  background: none;
   font-size: 16px;
   text-decoration: none;
   cursor: pointer;
@@ -225,8 +228,16 @@ a.navbar-brand {
   right: 60px;
   top: 10px;
   font-size: 16px;
-  text-decoration: none;
   cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+
+#search-clear-facets:focus-visible {
+  outline: 2px solid #037aad;
+  outline-offset: 2px;
 }
 
 .search-submit-facets {
@@ -603,7 +614,7 @@ h4.work {
 
 
 .navbar-light .navbar-nav .nav-link {
-  color: #a3acb2;
+  color: #243b54;
 }
 
 .navbar-light .navbar-nav .nav-link:hover {
@@ -674,9 +685,21 @@ body {
 }
 
 .secondary {
-  color: #A3ACB2;
+  color: #243b54;
 }
 
 .text-justify {
   text-align: justify;
 }
+
+:root {
+  --datacite-color-primary: #243b54;
+}
+
+.button:hover,
+.button:focus-visible {
+    background-color: #0071b2;
+    color: #fff;
+}
+
+