CMS-484: Accessibility updates (#1554)

* CMS-484: Contain an element with role=menuitem in an element with role=menu

* CMS-484: Change an element with role=menu

* CMS-484: Small fix

* CMS-488: Remove role=button from park photo gallery

* CMS-489: Add aria-controls to input

* CMS-490: Add for to advisories search filter label

* CMS-496: Add title to iframe

* NOBUG: Organize component files

* CMS-492: Add underline to links under the more ways to find a park

* CMS-498: Apply aria-label to see all link on find a park page

* CMS-500: Add lang attribute to htmlContent

* CMS-570: Change aria label on go back to the full list button

* NOBUG: Small fix

* CMS-542: Add urgency level name to advisory icon

* CMS-550: Change heading on find a park page

* CMS-553: Add aria label to show all links

* CMS-536: Add unique id to popular filters on find a park page

* CMS-551: Remove alt from fontawesome icon

* CMS-540: Move focus when the scroll button is clicked by keyboard

* CMS-554: Add aria live to no match message in typeahead fields

* CMS-553: Update aria label grammar show less to show fewer

* CMS-552: Redirect to the park page if there is one result that exactly matches input text

src/gatsby/src/components/advisories/advisoryCard.js

@@ -5,7 +5,7 @@ import Col from "react-bootstrap/Col"
 import Badge from "react-bootstrap/Badge"
 import { parseJSON, format } from "date-fns"
 
-import HTMLArea from "../HTMLArea"
+import HtmlContent from "../htmlContent"
 import AdvisoryDate from "./advisoryDate"
 import redAlertIcon from "../../images/park/red-alert.svg"
 import yellowAlertIcon from "../../images/park/yellow-alert.svg"
@@ -120,6 +120,7 @@ const AdvisoryCard = ({ advisory, parkInfoHash }) => {
   return (
     <Row
       key={advisory.id}
+      tabindex="-1"
       className="advisory-card g-0"
     >
       <Col xs="auto" className="advisory-card--left">
@@ -166,8 +167,11 @@ const AdvisoryCard = ({ advisory, parkInfoHash }) => {
                   ))
               )}
               <button
-                aria-label="Parks affected"
                 className="btn btn-link"
+                aria-label={open
+                  ? `Hide parks affected`
+                  : `Show all ${advisory.protectedAreas.length} parks affected`
+                }
                 onClick={() => setOpen(!open)}
               >
                 {open
@@ -211,7 +215,7 @@ const AdvisoryCard = ({ advisory, parkInfoHash }) => {
           )}
           {/* advisory description */}
           {advisory.description &&
-            <HTMLArea isVisible>{advisory.description}</HTMLArea>
+            <HtmlContent>{advisory.description}</HtmlContent>
           }
           {/* advisory links */}
           {advisory.links?.map(({ title, url, id }) => (

src/gatsby/src/components/advisories/advisoryFilter.js

@@ -245,7 +245,9 @@ const AdvisoryFilter = ({
                     key={0}
                     className="no-suggestion-text"
                   >
-                    No match. Please check your spelling or select from the list.
+                    <span role="alert" aria-live="assertive">
+                      No match. Please check your spelling or select from the list.
+                    </span>
                   </MenuItem>
                 }
                 {results.map((event, index) => 
@@ -289,6 +291,8 @@ const AdvisoryFilter = ({
         </div>
         <div className="col-auto">
           <Form.Check
+            id="keywords"
+            aria-controls="keywords"
             type="checkbox"
             label="Keywords"
             checked={isKeywordFilter}
@@ -297,6 +301,8 @@ const AdvisoryFilter = ({
         </div>
         <div className="col-auto">
           <Form.Check
+            id="park-names"
+            aria-controls="park-names"
             type="checkbox"
             label="Park names"
             checked={isParksFilter}

src/gatsby/src/components/advisories/advisoryLegend.js

@@ -33,7 +33,7 @@ const AdvisoryLegend = () => {
                 <div className="d-flex align-items-center me-3">
                   <img
                     src={legendItem.icon}
-                    alt="advisory status icon"
+                    alt={`${legendItem.label} urgency`}
                     className="advisory-status-icon"
                   />
                 </div>

src/gatsby/src/components/advisories/advisoryList.js

@@ -52,7 +52,7 @@ const AdvisoryList = ({ advisories, parkInfoHash }) => {
         break;
       case "yellow":
         capColor = "Yellow";
-        level = "Moderate";
+        level = "Medium";
         break;
       case "blue":
         capColor = "Blue";
@@ -64,14 +64,12 @@ const AdvisoryList = ({ advisories, parkInfoHash }) => {
         break;
     }
 
-    // alertMsg to use for aria-label on date circle, for screen readers
+    // alertMsg to use for aria-label on urgency level icon, for screen readers
     if (capColor === "Grey") {
       advisory.alertMsg = "Grey Advisory - Informational Advisory"
     } else {
-      advisory.alertMsg = capColor + " Advisory - " + level + " Urgency"; // eg Red alert - high urgency
+      advisory.alertMsg = level + " urgency"; // eg High urgency
     }
-
-
   }
 
   const processAdvisories = (a) => {

src/gatsby/src/components/advisories/advisoryPageNav.js

@@ -1,13 +1,14 @@
 import React from "react"
 import "../../styles/advisories/advisoryPageNav.scss";
 
-const AdvisoryPageNav = ({ pageIndex, pageCount, handleClick }) => {
+const AdvisoryPageNav = ({ pageIndex, pageCount, handleClick, handleKeyDownLoadMore }) => {
   return (
     <div className="load-more-button-container">
       {pageIndex < pageCount && (
         <button
           aria-label="Load more results"
           onClick={handleClick}
+          onKeyDown={e => handleKeyDownLoadMore(e)}
           className="btn btn-secondary load-more-button"
         >
           Load more

src/gatsby/src/components/fontAwesome.js

@@ -13,7 +13,7 @@ const FontAwesome = ({ icon, size, className }) => {
 	}
 
 	return (
-		<img src={iconSrc} alt={icon} width={size} height={size} className={className} />
+		<img src={iconSrc} alt="" width={size} height={size} className={className} />
 	)
 }
 

src/gatsby/src/components/htmlContent.js

@@ -0,0 +1,14 @@
+import React from "react"
+import { usePreRenderVideo } from "../utils/usePreRenderVideo"
+
+export default function HtmlContent(props) {
+  const { htmlContent } = usePreRenderVideo(props.children)
+  if (!props) return null
+  return (
+    <div
+      lang="en"
+      className={`raw-html-content ${props.className ? props.className : ""}`}
+      dangerouslySetInnerHTML={{ __html: htmlContent || props.children }}
+    />
+  )
+}

src/gatsby/src/components/megaMenu.js

@@ -253,8 +253,8 @@ const MegaMenu = ({ content, menuMode }) => {
               " has-clicked-twice--" + hasClickedTwice
             }
           >
-            <ul className="menu-button-list" role="presentation">
-              <li className="menu-button menu-back">
+            <div className="menu-button-list" role="menu">
+              <div className="menu-button menu-back">
                 <a
                   className="menu-button__title"
                   href="back"
@@ -269,9 +269,9 @@ const MegaMenu = ({ content, menuMode }) => {
                 >
                   <FontAwesomeIcon icon={faChevronLeft} className="menu-button__arr" /> Back
                 </a>
-              </li>
+              </div>
               {/* 1st level menu item that has child menu items e.g. Reservations */}
-              <li className="menu-button menu-header">
+              <div className="menu-button menu-header">
                 {isExternalUrl(item.url) ?
                   <a 
                     className="menu-button__title external-link"
@@ -299,16 +299,15 @@ const MegaMenu = ({ content, menuMode }) => {
                     <FontAwesomeIcon icon={faCircleChevronRight} className="menu-button__title--icon" />
                   </Link>
                 }
-              </li>
+              </div>
               {/* 1st level menu item in the navbar and 2nd level menu items e.g. Reservations > Campig fees */}
               {item.strapi_children.filter((page) => page.show).map((page, index) => (
                 <React.Fragment key={index}>
-                  <li className={
-                    "menu-button menu-button--" +
-                    (page === selections[page.treeLevel]
-                      ? "selected"
-                      : "unselected")
-                  }
+                  <div 
+                    className={
+                      "menu-button menu-button--" +
+                      (page === selections[page.treeLevel] ? "selected" : "unselected")
+                    }
                   >
                     {isExternalUrl(page.url) ?
                       <a
@@ -336,7 +335,7 @@ const MegaMenu = ({ content, menuMode }) => {
                         )}
                       </Link>
                     }
-                  </li>
+                  </div>
                   <div className={
                     "menu-children menu-children-exist--" +
                     page.hasChildren +
@@ -352,14 +351,14 @@ const MegaMenu = ({ content, menuMode }) => {
                   </div>
                 </React.Fragment>
               ))}
-            </ul>
+            </div>
           </nav>
         )}
         {/* for site map page */}
         {!item.hasChildren && (
           <nav>
-            <ul role="presentation">
-              <li className="menu-button menu-header">
+            <div className="menu-button-list" role="menu">
+              <div className="menu-button menu-header">
                 {isExternalUrl(item.url) ?
                   <a
                     className="menu-button__title external-link"
@@ -379,8 +378,8 @@ const MegaMenu = ({ content, menuMode }) => {
                     {item.title}
                   </Link>
                 }
-              </li>
-            </ul>
+              </div>
+            </div>
           </nav>
         )}
       </>
@@ -450,12 +449,7 @@ const MegaMenu = ({ content, menuMode }) => {
             (isMenuOpen ? "open" : "closed")
           }
         >
-          <div
-            className="menu-wrapper"
-            tabIndex={0}
-            role="menu"
-            onFocus={e => menuFocus(e)}
-          >
+          <div className="menu-wrapper">
             {menuTree.map((page, index) => (
               <div key={index}>{generateMenus(page, menuMode)}</div>
             ))}

src/gatsby/src/components/pageContent/pageContent.js

@@ -1,7 +1,7 @@
 
 import React from "react"
 
-import HTMLArea from "../HTMLArea"
+import HtmlContent from "../htmlContent"
 import LinkCard from "./linkCard"
 import PageSection from "../pageContent/pageSection"
 
@@ -49,7 +49,7 @@ export default function PageContent({ contentType, content }) {
     )
   }
     if (contentType === "parks.html-area") {
-        return <HTMLArea isVisible={true}>{content.HTML.data.HTML}</HTMLArea>
+        return <HtmlContent>{content.HTML.data.HTML}</HtmlContent>
     }
     if (contentType === "parks.page-section") {
         return (

src/gatsby/src/components/pageContent/pageSection.js

@@ -1,6 +1,6 @@
 import React from "react"
 
-import HTMLArea from "../HTMLArea"
+import HtmlContent from "../htmlContent"
 
 import "../../styles/pageContent/pageSection.scss"
 
@@ -15,9 +15,9 @@ export default function PageSection({ sectionTitle, sectionId, sectionStrapiId,
             <span id={`page-section-${sectionStrapiId}`}></span>
             <div className="page-section" id={titleId}>
                 <h2 className="page-section-title">{sectionTitle}</h2>
-                <HTMLArea className="page-section-html" isVisible={true}>
+                <HtmlContent className="page-section-html">
                     {sectionHtml.data.sectionHTML}
-                </HTMLArea>     
+                </HtmlContent>     
             </div>
         </>
   )

src/gatsby/src/components/park/about.js

@@ -5,7 +5,7 @@ import Col from "react-bootstrap/Col"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faChevronUp, faChevronDown } from "@fortawesome/free-solid-svg-icons"
 
-import HtmlContent from "./htmlContent"
+import HtmlContent from "../htmlContent"
 import CustomToggle from "./customToggle"
 import { isNullOrWhiteSpace } from "../../utils/helpers"
 import { trackSnowplowEvent } from "../../utils/snowplowHelper"
@@ -184,18 +184,13 @@ export default function About({
               {dataList.length > 1 && (
                 <button
                   onClick={toggleExpandAll}
-                  onKeyDown={(e) => {
-                    if (e.key === "Enter" || e.key === " ") {
-                      e.preventDefault()
-                      toggleExpandAll()
-                    }
-                  }}
+                  aria-label={allExpanded ? "Collapse all about this park" : "Expand all about this park"}
                   className="btn btn-link expand-link expand-icon"
                 >
                   {allExpanded ?
-                    <>Collapse all <FontAwesomeIcon icon={faChevronUp} /></>
+                    <>Collapse all about this park <FontAwesomeIcon icon={faChevronUp} /></>
                     :
-                    <>Expand all <FontAwesomeIcon icon={faChevronDown} /></>
+                    <>Expand all about this park <FontAwesomeIcon icon={faChevronDown} /></>
                   }
                 </button>
               )}