From f530069a4e078a95eba079e8797ae877547ece05 Mon Sep 17 00:00:00 2001
From: Yvonne Tang <42749717+yvonnetangsu@users.noreply.github.com>
Date: Tue, 29 Aug 2023 17:35:40 -0700
Subject: [PATCH] ADAPT-5851 | Improve site search a11y (#364)

* name browserslistrc properly

* Add SR only label to search field; add type="button" to buttons

* Add type="button" for all the buttons missing this attribute

* a11y patch ups

* fixups

* Add aria live to number of search results

* Pagination improvements

* Return focus to open search button after search overlay is closed

* Fix for document not available during SSR

* Add underline on highlighted suggested search; use ul for search results structure

* Remove redundant role=navigation on pagination
---
 .browserlistrc => .browserslistrc             |  0
 src/components/composite/accordion.js         |  2 ++
 src/components/composite/accordionItem.js     |  1 +
 src/components/composite/modal.js             |  1 +
 .../composite/oodGallerySlideshow.js          | 17 +++++++---
 src/components/composite/oodQuoteSlider.js    |  4 +--
 .../navigation/contentMenu/oodContentMenu.js  |  1 +
 .../navigation/megaMenu/oodMegaMenu.js        |  1 +
 .../navigation/megaMenu/oodMegaMenuSection.js |  1 +
 src/components/search/autocomplete.js         | 27 +++++++++++++---
 src/components/search/hits.js                 | 29 +++++++++--------
 src/components/search/pagination.js           | 17 +++++-----
 src/components/search/searchOverlay.js        | 31 +++++++++++++++++--
 src/components/search/searchResults.js        |  3 ++
 src/components/search/stats.js                |  5 +--
 src/scss/components/search/_input.scss        |  1 +
 16 files changed, 105 insertions(+), 36 deletions(-)
 rename .browserlistrc => .browserslistrc (100%)

diff --git a/.browserlistrc b/.browserslistrc
similarity index 100%
rename from .browserlistrc
rename to .browserslistrc
diff --git a/src/components/composite/accordion.js b/src/components/composite/accordion.js
index 20a0e259..78d5a607 100644
--- a/src/components/composite/accordion.js
+++ b/src/components/composite/accordion.js
@@ -87,12 +87,14 @@ class Accordion extends React.Component {
           {props.blok.accordionItems.length > 1 && (
             <>
               <button
+                type="button"
                 className={`su-accordion__collapse-all su-button ${accordionButtonColor}`}
                 onClick={this.collapseAll}
               >
                 Collapse all
               </button>
               <button
+                type="button"
                 className={`su-accordion__expand-all su-button ${accordionButtonColor}`}
                 onClick={this.expandAll}
               >
diff --git a/src/components/composite/accordionItem.js b/src/components/composite/accordionItem.js
index 09eda720..e9efd244 100644
--- a/src/components/composite/accordionItem.js
+++ b/src/components/composite/accordionItem.js
@@ -50,6 +50,7 @@ class AccordionItem extends React.Component {
             {...(props.blok.id ? { id: props.blok.id } : {})}
           >
             <button
+              type="button"
               className={`su-accordion__button ${props.accordionAfterColor} su-${props.accordionFontWeight}`}
               aria-expanded={this.state.expanded}
               onClick={this.toggle}
diff --git a/src/components/composite/modal.js b/src/components/composite/modal.js
index 8e6cf8be..aaacf5b0 100644
--- a/src/components/composite/modal.js
+++ b/src/components/composite/modal.js
@@ -88,6 +88,7 @@ export const Modal = ({
         >
           <div className="su-modal--header">
             <button
+              type="button"
               ref={closeButton}
               className="su-modal--close"
               onClick={onClose}
diff --git a/src/components/composite/oodGallerySlideshow.js b/src/components/composite/oodGallerySlideshow.js
index b22f1d50..6e316f57 100644
--- a/src/components/composite/oodGallerySlideshow.js
+++ b/src/components/composite/oodGallerySlideshow.js
@@ -40,6 +40,7 @@ const oodGallerySlideshow = ({ blok }) => {
               {blok.showExpandLink && (
                 <div className="gallery-slideshow--expand">
                   <button
+                    type="button"
                     onClick={openModal}
                     className="gallery-slideshow--expand-btn"
                     aria-label="Expand gallery"
@@ -57,7 +58,11 @@ const oodGallerySlideshow = ({ blok }) => {
           </div>
 
           <div className="gallery-slideshow--controls">
-            <button className="gallery-slideshow--prev" onClick={clickPrev}>
+            <button
+              type="button"
+              className="gallery-slideshow--prev"
+              onClick={clickPrev}
+            >
               <span className="sr-only">Previous Slide</span>
               <i className="fas fa-chevron-left" aria-hidden="true"></i>
             </button>
@@ -75,7 +80,11 @@ const oodGallerySlideshow = ({ blok }) => {
                 {dots}
               </ul>
             </div>
-            <button className="gallery-slideshow--next" onClick={clickNext}>
+            <button
+              type="button"
+              className="gallery-slideshow--next"
+              onClick={clickNext}
+            >
               <span className="sr-only">Next Slide</span>
               <i className="fas fa-chevron-right" aria-hidden="true"></i>
             </button>
@@ -109,13 +118,13 @@ const oodGallerySlideshow = ({ blok }) => {
 
   const modalSliderSettings = {
     nextArrow: (
-      <button>
+      <button type="button">
         <span className="sr-only">Next Slide</span>
         <i className="fas fa-chevron-right" aria-hidden="true"></i>
       </button>
     ),
     prevArrow: (
-      <button>
+      <button type="button">
         <span className="sr-only">Previous Slide</span>
         <i className="fas fa-chevron-left" aria-hidden="true"></i>
       </button>
diff --git a/src/components/composite/oodQuoteSlider.js b/src/components/composite/oodQuoteSlider.js
index f6549e14..17db91c4 100644
--- a/src/components/composite/oodQuoteSlider.js
+++ b/src/components/composite/oodQuoteSlider.js
@@ -11,7 +11,7 @@ const OodQuoteSlider = ({ blok }) => {
 
   const sliderSettings = {
     nextArrow: (
-      <button>
+      <button type="button">
         <span className="sr-only">
           Next Slide:{' '}
           {`${
@@ -22,7 +22,7 @@ const OodQuoteSlider = ({ blok }) => {
       </button>
     ),
     prevArrow: (
-      <button>
+      <button type="button">
         <span className="sr-only">
           Previous Slide:{' '}
           {`${activeSlide === 0 ? blok.quotes.length : activeSlide} of ${
diff --git a/src/components/navigation/contentMenu/oodContentMenu.js b/src/components/navigation/contentMenu/oodContentMenu.js
index e691df73..5ceadb59 100644
--- a/src/components/navigation/contentMenu/oodContentMenu.js
+++ b/src/components/navigation/contentMenu/oodContentMenu.js
@@ -79,6 +79,7 @@ const OodContentMenu = (props) => {
         ref={ref}
       >
         <button
+          type="button"
           className={`ood-content-nav__toggle`}
           aria-expanded={menuOpened}
           onClick={toggleMenu}
diff --git a/src/components/navigation/megaMenu/oodMegaMenu.js b/src/components/navigation/megaMenu/oodMegaMenu.js
index 2e7b392f..d817dfb4 100644
--- a/src/components/navigation/megaMenu/oodMegaMenu.js
+++ b/src/components/navigation/megaMenu/oodMegaMenu.js
@@ -42,6 +42,7 @@ const OodMegaMenu = (props) => {
     <SbEditable content={props.blok}>
       <nav className="ood-mega-nav" aria-label="Main Menu" ref={ref}>
         <button
+          type="button"
           className="ood-mega-nav__toggle su-mr-none su-ml-auto"
           aria-label={menuOpened ? 'Close Menu' : 'Open Menu'}
           aria-expanded={menuOpened}
diff --git a/src/components/navigation/megaMenu/oodMegaMenuSection.js b/src/components/navigation/megaMenu/oodMegaMenuSection.js
index aa089f55..7fbf6d67 100644
--- a/src/components/navigation/megaMenu/oodMegaMenuSection.js
+++ b/src/components/navigation/megaMenu/oodMegaMenuSection.js
@@ -32,6 +32,7 @@ const OodMegaMenuSection = (props) => {
     <SbEditable content={props.blok}>
       <li className="ood-mega-nav__item--parent" ref={ref}>
         <button
+          type="button"
           className="ood-mega-nav__trigger"
           aria-expanded={sectionOpened}
           onClick={toggleSection}
diff --git a/src/components/search/autocomplete.js b/src/components/search/autocomplete.js
index 44b79bf8..d03abe1e 100644
--- a/src/components/search/autocomplete.js
+++ b/src/components/search/autocomplete.js
@@ -6,6 +6,7 @@ import qs from 'query-string';
 
 /* eslint-disable-next-line react/display-name */
 const Autocomplete = React.forwardRef((props, ref) => {
+  const { inputId, listboxId, ...otherProps } = props;
   const [initialTerm, setInitialTerm] = useState('');
 
   const { search } = useLocation();
@@ -48,11 +49,16 @@ const Autocomplete = React.forwardRef((props, ref) => {
         }
       };
 
+      const containerProps = {
+        'aria-owns': listboxId,
+      };
+
       const inputProps = {
         ref,
         value,
         type: 'text',
         placeholder: 'Search',
+        id: inputId,
         onChange,
         onKeyDown,
         onFocus: () => setShouldRenderSuggestions(true),
@@ -94,6 +100,9 @@ const Autocomplete = React.forwardRef((props, ref) => {
 
       return (
         <form role="search" className="search-input">
+          <label htmlFor={inputId} className="su-sr-only-element">
+            Search this site
+          </label>
           <AutoSuggest
             suggestions={shouldRenderSuggestions ? currentSuggestions : []}
             onSuggestionsFetchRequested={handleSuggestionsFetch}
@@ -101,10 +110,21 @@ const Autocomplete = React.forwardRef((props, ref) => {
             onSuggestionSelected={handleSubmit}
             getSuggestionValue={(hit) => hit.query}
             renderSuggestion={(hit) => hit.query}
+            containerProps={containerProps}
             inputProps={inputProps}
+            renderSuggestionsContainer={({ containerProps, children }) => (
+              <div
+                {...containerProps}
+                aria-label="Search suggestions"
+                id={listboxId}
+              >
+                {children}
+              </div>
+            )}
           />
           {value && (
             <button
+              type="button"
               className="search-input-clear-button"
               onClick={() => {
                 setValue('');
@@ -113,10 +133,7 @@ const Autocomplete = React.forwardRef((props, ref) => {
               aria-label="Clear search input"
             >
               <span className="search-input-clear-text">Clear</span>
-              <i
-                aria-hidden="true"
-                className="search-input-clear-icon fas fa-times"
-              />
+              <i aria-hidden className="search-input-clear-icon fas fa-times" />
             </button>
           )}
 
@@ -128,7 +145,7 @@ const Autocomplete = React.forwardRef((props, ref) => {
             <span className="su-sr-only-element">Submit search</span>
             <i
               className="search-input-submit-button-icon fas fa-search fa-flip-horizontal"
-              aria-hidden="true"
+              aria-hidden
             />
           </button>
         </form>
diff --git a/src/components/search/hits.js b/src/components/search/hits.js
index c54a1fb8..e6a4e5ec 100644
--- a/src/components/search/hits.js
+++ b/src/components/search/hits.js
@@ -26,19 +26,22 @@ const Hits = (props) => {
 
       {hits.length > 0 && <Stats />}
 
-      {hits.map((hit) => (
-        <article
-          className="search-hits-item su-mb-2 su-pb-2 su-px-default"
-          key={hit.objectID}
-        >
-          <Heading level={'h2'} serif={true} weight={'bold'}>
-            <SbLink link={{ cached_url: `/${hit.slug}` }}>{hit.title}</SbLink>
-          </Heading>
-          <p className="su-mb-none">
-            {hit.intro || hit.teaser || hit.description}
-          </p>
-        </article>
-      ))}
+      <ul className="su-list-none">
+        {hits.map((hit) => (
+          <li key={hit.objectID}>
+            <article className="search-hits-item su-mb-2 su-pb-2 su-px-default">
+              <Heading level={'h2'} serif={true} weight={'bold'}>
+                <SbLink link={{ cached_url: `/${hit.slug}` }}>
+                  {hit.title}
+                </SbLink>
+              </Heading>
+              <p className="su-mb-none">
+                {hit.intro || hit.teaser || hit.description}
+              </p>
+            </article>
+          </li>
+        ))}
+      </ul>
 
       {hits.length > 0 && <Pagination initialPage={props.initialPage} />}
     </div>
diff --git a/src/components/search/pagination.js b/src/components/search/pagination.js
index 1626a27c..6a538475 100644
--- a/src/components/search/pagination.js
+++ b/src/components/search/pagination.js
@@ -31,7 +31,7 @@ const Pagination = ({ initialPage }) => {
       };
 
       return (
-        <nav role="navigation" aria-label="Search Results Pagination">
+        <nav aria-label="Search Results Pagination">
           <ul className="search-pagination">
             {isPreviousVisible && (
               <li className="search-pagination-item search-pagination-item--text">
@@ -48,10 +48,7 @@ const Pagination = ({ initialPage }) => {
             )}
             {isFirstPageVisible && (
               <>
-                <li
-                  role="button"
-                  className="search-pagination-item search-pagination-item--mobile-hidden"
-                >
+                <li className="search-pagination-item search-pagination-item--mobile-hidden">
                   <a
                     onClick={($event) => handlePageChange(1, $event)}
                     href={`/search-results?page=1`}
@@ -60,7 +57,10 @@ const Pagination = ({ initialPage }) => {
                     1
                   </a>
                 </li>
-                <li className="search-pagination-item search-pagination-item--placeholder search-pagination-item--mobile-hidden">
+                <li
+                  aria-label="ellipsis indicating non-visible pages"
+                  className="search-pagination-item search-pagination-item--placeholder search-pagination-item--mobile-hidden"
+                >
                   ...
                 </li>
               </>
@@ -100,7 +100,10 @@ const Pagination = ({ initialPage }) => {
             })}
             {isLastPageVisible && (
               <>
-                <li className="search-pagination-item search-pagination-item--placeholder search-pagination-item--mobile-hidden">
+                <li
+                  aria-label="ellipsis indicating non-visible pages"
+                  className="search-pagination-item search-pagination-item--placeholder search-pagination-item--mobile-hidden"
+                >
                   ...
                 </li>
                 <li className="search-pagination-item search-pagination-item--mobile-hidden">
diff --git a/src/components/search/searchOverlay.js b/src/components/search/searchOverlay.js
index 1c163d0f..022e72b9 100644
--- a/src/components/search/searchOverlay.js
+++ b/src/components/search/searchOverlay.js
@@ -19,6 +19,17 @@ const SearchOverlay = () => {
   const [isEmptyErrorVisible, setIsEmptyErrorVisible] = useState(false);
   const inputRef = useRef(null);
 
+  const searchButton =
+    typeof window !== 'undefined' &&
+    document.querySelector('.ood-header__search-button');
+
+  const focusSearchButton = () => {
+    if (searchButton) {
+      // wait 100ms, then focus on search button
+      setTimeout(() => searchButton.focus(), 100);
+    }
+  };
+
   useEffect(() => {
     if (isOpen && inputRef.current) {
       // when the search overlay opens, immediately give focus to the input
@@ -43,7 +54,13 @@ const SearchOverlay = () => {
     setIsEmptyErrorVisible(false);
   };
 
-  UseEscape(() => isOpen && closeSearchOverlay());
+  const handleCloseOverlay = () => {
+    closeSearchOverlay();
+    focusSearchButton();
+  };
+
+  // close search overlay and focus search button
+  UseEscape(() => isOpen && handleCloseOverlay());
 
   const {
     introduction,
@@ -63,14 +80,20 @@ const SearchOverlay = () => {
   UseFocusTrap(firstTabbableRef, lastTabbableRef, isOpen);
 
   return (
-    <div className={`search-overlay ${isOpen ? 'visible' : 'hidden'}`}>
+    <div
+      role="dialog"
+      aria-modal
+      aria-label="Search this site"
+      className={`search-overlay ${isOpen ? 'visible' : 'hidden'}`}
+    >
       <LocationProvider>
         <CenteredContainer classes="search-container su-pt-5" flex={true}>
           <FlexCell lg={11} xl={9} xxl={8} classes="su-mx-auto">
             <div className="search-header">
               <button
+                type="button"
                 className="search-close-button"
-                onClick={closeSearchOverlay}
+                onClick={handleCloseOverlay}
                 ref={firstTabbableRef}
                 aria-label="Close Search"
               >
@@ -95,6 +118,8 @@ const SearchOverlay = () => {
               >
                 {isOpen && (
                   <Autocomplete
+                    inputId="search-overlay-input"
+                    listboxId="search-overlay-listbox"
                     onSubmit={submitTerm}
                     onSuggestionCleared={handleSuggestionCleared}
                     ref={inputRef}
diff --git a/src/components/search/searchResults.js b/src/components/search/searchResults.js
index 83fdd0dc..418efca9 100644
--- a/src/components/search/searchResults.js
+++ b/src/components/search/searchResults.js
@@ -130,7 +130,10 @@ const SearchResults = (props) => {
         searchClient={searchClient}
         indexName={process.env.GATSBY_ALGOLIA_SUGGESTIONS_INDEX_NAME}
       >
+        {/* This is the search bar on the search results page */}
         <Autocomplete
+          inputId="search-page-input"
+          listboxId="search-page-listbox"
           onSubmit={handleSubmit}
           onSuggestionCleared={handleSuggestionCleared}
         />
diff --git a/src/components/search/stats.js b/src/components/search/stats.js
index 51f7d91c..21813216 100644
--- a/src/components/search/stats.js
+++ b/src/components/search/stats.js
@@ -2,8 +2,9 @@ import React from 'react';
 import { connectStats } from 'react-instantsearch-dom';
 
 const Stats = connectStats(({ nbHits }) => (
-  <p className="search-stats">
-    <strong>{nbHits}</strong>&nbsp;{nbHits !== 1 ? 'results' : 'result'} found:
+  <p className="search-stats" aria-live="polite" aria-atomic>
+    <strong>{nbHits}</strong>
+    {nbHits !== 1 ? ' results' : ' result'} found:
   </p>
 ));
 
diff --git a/src/scss/components/search/_input.scss b/src/scss/components/search/_input.scss
index 7aa68079..8dfee194 100644
--- a/src/scss/components/search/_input.scss
+++ b/src/scss/components/search/_input.scss
@@ -83,6 +83,7 @@
       &--highlighted {
         color: $su-color-digital-red;
         background-color: $su-color-black-10;
+        text-decoration: underline;
       }
     }