Accessibility Updates (#4683)

## Description This PR implements improvements following an accessibility sweep of the home page, and includes the following fixes and improvements: * significant reworking of the carousel's tab handling; it now handles switching between slides by tab graciously regardless of the content. * addition of aria labels and corrections to existing aria labels. * the media text component can now take an optional alt prop in lieu of (or in addition to) the title, with at least one of them being required. * The headers in the rich menus are adjusted to better match the hierarchy. * tab outlines are fixed for the main menu. * Ids that could be duplicated have been removed. In the case of the search bar, we could not remove the id at this stage (because it is tied to downstream functionality) but we are now selectively rendering the mobile and desktop menu to prevent the duplicate id. To facilitate this selective rendering, we have added a breakpoints hook that allows us to apply Bootstrap-like media queries on the TypeScript side. This breakpoints hook may proof to be a generally useful utility. --------- Co-authored-by: Jennifer Blumberg <[email protected]> Co-authored-by: Pablo Noel <[email protected]>
datacommonsorg · Oct 31, 2024 · ac8fdad · ac8fdad
1 parent 60a4f5f
commit ac8fdad
Show file tree

Hide file tree

Showing 16 changed files with 299 additions and 117 deletions.
diff --git a/static/css/base.scss b/static/css/base.scss
@@ -38,7 +38,7 @@ $headings-font-weight: 600;
 
 /*
   If the grid-breakpoints change, the TypeScript equivalent should be updated:
-  `static/js/apps/base/utilities/utilities.ts`, `export const BREAKPOINTS`
+  `static/js/shared/hooks/breakpoints.tsx`, `export const BREAKPOINTS`
  */
 $grid-breakpoints: (
   xs: 0,
@@ -160,7 +160,7 @@ $headings-font-family: $font-family-sans-serif;
   background: var(--gm-3-white);
 }
 
-#main-header #main-header-logo {
+#main-header .main-header-logo {
   display: flex;
   align-items: center;
   img {

diff --git a/static/css/core.scss b/static/css/core.scss
@@ -151,17 +151,16 @@ section {
 
         li {
           display: flex;
-          align-items: stretch;
+          align-items: center;
           margin: 0;
           padding: 0;
 
           .menu-main-button {
             border: 0;
-            padding: 0;
+            padding: 8px 0;
             margin: 0;
             display: flex;
             align-items: center;
-            height: 100%;
             background-color: transparent;
             .menu-main-label {
               font-size: 0.875rem;
@@ -185,7 +184,7 @@ section {
           .menu-main-link {
             display: flex;
             align-items: center;
-            height: 100%;
+            padding: 8px 0;
             color: #474747;
             transition: color 0.3s ease-in-out;
             font-size: 0.875rem;
@@ -244,15 +243,17 @@ section {
           font-size: 1.4rem;
           font-weight: 100;
         }
-        h4 {
-          font-family: $font-family-google-title;
-          font-size: 1rem;
-          text-transform: uppercase;
-          color: #5e5e5e;
-          font-weight: 300;
-          margin: 0 0 32px 0;
+        .group {
+          h3 {
+            font-family: $font-family-google-title;
+            font-size: 1rem;
+            text-transform: uppercase;
+            color: #5e5e5e;
+            font-weight: 300;
+            margin: 0 0 32px 0;
+          }
         }
-        h5 {
+        h4 {
           font-family: $font-family-google-title;
           font-size: 1rem;
           font-weight: 500;
@@ -504,14 +505,16 @@ section {
               font-size: 1.4rem;
               font-weight: 100;
             }
-            h4 {
-              font-family: $font-family-google-title;
-              font-size: 1rem;
-              text-transform: uppercase;
-              color: #5e5e5e;
-              font-weight: 300;
+            .group {
+              h3 {
+                font-family: $font-family-google-title;
+                font-size: 1rem;
+                text-transform: uppercase;
+                color: #5e5e5e;
+                font-weight: 300;
+              }
             }
-            h5 {
+            h4 {
               font-family: $font-family-google-title;
               font-size: 1rem;
               font-weight: 500;
@@ -603,8 +606,8 @@ section {
 
       .search-input-text {
         display: block;
-        padding: 0px;
-        margin: 0px;
+        padding: 0;
+        margin: 0;
         width: 150px;
         flex-grow: 10;
         height: 38px;
@@ -657,7 +660,7 @@ section {
       .search-input-result-section {
         display: flex;
         flex-direction: column;
-        padding: 10px 0px;
+        padding: 10px 0;
 
         .search-input-result {
           display: flex;
@@ -682,7 +685,7 @@ section {
     } 
 
     .result-divider {
-      margin: 0px;
+      margin: 0;
     }
   }
 

diff --git a/static/js/apps/base/components/header_bar/header_bar.tsx b/static/js/apps/base/components/header_bar/header_bar.tsx
@@ -20,6 +20,7 @@
 
 import React, { ReactElement } from "react";
 
+import { useBreakpoints } from "../../../../shared/hooks/breakpoints";
 import { HeaderMenu, Labels, Routes } from "../../../../shared/types/base";
 import HeaderBarSearch from "./header_bar_search";
 import HeaderLogo from "./header_logo";
@@ -52,6 +53,8 @@ const HeaderBar = ({
   labels,
   routes,
 }: HeaderBarProps): ReactElement => {
+  const { up, down } = useBreakpoints();
+
   return (
     <div id="main-header-container">
       <nav id="main-nav">
@@ -63,7 +66,7 @@ const HeaderBar = ({
             labels={labels}
             routes={routes}
           />
-          {showHeaderSearchBar && <HeaderBarSearch />}
+          {showHeaderSearchBar && up("lg") && <HeaderBarSearch />}
           <MenuDesktop menu={menu} labels={labels} routes={routes} />
         </div>
         <div className="navbar-menu-mobile">
@@ -74,7 +77,7 @@ const HeaderBar = ({
             labels={labels}
             routes={routes}
           />
-          {showHeaderSearchBar && <HeaderBarSearch />}
+          {showHeaderSearchBar && down("md") && <HeaderBarSearch />}
           <MenuMobile menu={menu} labels={labels} routes={routes} />
         </div>
       </nav>

diff --git a/static/js/apps/base/components/header_bar/header_bar_search.tsx b/static/js/apps/base/components/header_bar/header_bar_search.tsx
@@ -27,11 +27,17 @@ import {
   triggerGAEvent,
 } from "../../../../shared/ga_events";
 
-const HeaderBarSearch = (): ReactElement => {
+interface HeaderBarSearchProps {
+  inputId?: string;
+}
+
+const HeaderBarSearch = ({
+  inputId = "query-search-input",
+}: HeaderBarSearchProps): ReactElement => {
   return (
     <NlSearchBar
       variant="header-inline"
-      inputId="query-search-input"
+      inputId={inputId}
       onSearch={(q): void => {
         triggerGAEvent(GA_EVENT_NL_SEARCH, {
           [GA_PARAM_QUERY]: q,

diff --git a/static/js/apps/base/components/header_bar/header_logo.tsx b/static/js/apps/base/components/header_bar/header_logo.tsx
@@ -51,7 +51,7 @@ const HeaderLogo = ({
   return (
     <div className="navbar-brand">
       {logoPath && (
-        <div id="main-header-logo">
+        <div className="main-header-logo">
           <a
             href={routes["static.homepage"]}
             aria-label={labels["Back to homepage"]}

diff --git a/static/js/apps/base/components/header_bar/menu_desktop.tsx b/static/js/apps/base/components/header_bar/menu_desktop.tsx
@@ -93,68 +93,77 @@ const MenuDesktop = ({
   return (
     <div className="header-menu" ref={menuContainerRef}>
       <ul className="header-menu-list">
-        {menu.map((menuItem, index) => (
-          <li key={menuItem.label}>
-            {menuItem.url ? (
-              <a
-                className="menu-main-link"
-                href={resolveHref(menuItem.url, routes)}
-                onClick={() => {
-                  triggerGAEvent(GA_EVENT_HEADER_CLICK, {
-                    [GA_PARAM_ID]: `desktop main ${menuItem.id}`,
-                    [GA_PARAM_URL]: menuItem.url,
-                  });
-                  return true;
-                }}
-              >
-                {labels[menuItem.label]}
-              </a>
-            ) : (
-              <>
-                <button
-                  className="menu-main-button"
-                  onClick={(): void => {
+        {menu.map((menuItem, index) => {
+          const buttonId = slugify(`nav-${menuItem.label}-button`);
+          const dropdownId = slugify(`nav-${menuItem.label}-dropdown`);
+
+          return (
+            <li key={menuItem.label}>
+              {menuItem.url ? (
+                <a
+                  className="menu-main-link"
+                  href={resolveHref(menuItem.url, routes)}
+                  onClick={() => {
                     triggerGAEvent(GA_EVENT_HEADER_CLICK, {
-                      [GA_PARAM_ID]: `desktop ${menuItem.id}`,
+                      [GA_PARAM_ID]: `desktop main ${menuItem.id}`,
+                      [GA_PARAM_URL]: menuItem.url,
                     });
-                    return !menuItem.url && toggleMenu(index);
-                  }}
-                  onTouchEnd={(e): void => {
-                    if (!menuItem.url) itemMenuTouch(e, index);
+                    return true;
                   }}
                 >
-                  <span className="menu-main-label">
-                    {labels[menuItem.label]}
-                  </span>
-                  <span
-                    className={`material-icons-outlined menu-arrow-icon ${
-                      openMenu === index ? "open" : ""
-                    }`}
+                  {labels[menuItem.label]}
+                </a>
+              ) : (
+                <>
+                  <button
+                    id={buttonId}
+                    className="menu-main-button"
+                    onClick={(): void => {
+                      triggerGAEvent(GA_EVENT_HEADER_CLICK, {
+                        [GA_PARAM_ID]: `desktop ${menuItem.id}`,
+                      });
+                      return !menuItem.url && toggleMenu(index);
+                    }}
+                    onTouchEnd={(e): void => {
+                      if (!menuItem.url) itemMenuTouch(e, index);
+                    }}
+                    aria-expanded={openMenu === index}
+                    aria-controls={dropdownId}
                   >
-                    keyboard_arrow_down
-                  </span>
-                </button>
-                <div
-                  ref={(el: HTMLDivElement | null): void => {
-                    submenuRefs.current[index] = el;
-                  }}
-                  className="rich-menu-container"
-                  aria-labelledby={slugify(`nav-${menuItem.label}-dropdown`)}
-                  style={{
-                    maxHeight: openMenu === index ? `${panelHeight}px` : 0,
-                  }}
-                >
-                  <MenuDesktopRichMenu
-                    menuItem={menuItem}
-                    labels={labels}
-                    routes={routes}
-                    open={openMenu === index}
-                  />
-                </div>
-              </>
-            )}
-          </li>
-        ))}
+                    <span className="menu-main-label">
+                      {labels[menuItem.label]}
+                    </span>
+                    <span
+                      className={`material-icons-outlined menu-arrow-icon ${
+                        openMenu === index ? "open" : ""
+                      }`}
+                    >
+                      keyboard_arrow_down
+                    </span>
+                  </button>
+                  <div
+                    ref={(el: HTMLDivElement | null): void => {
+                      submenuRefs.current[index] = el;
+                    }}
+                    id={dropdownId}
+                    className="rich-menu-container"
+                    aria-labelledby={buttonId}
+                    style={{
+                      maxHeight: openMenu === index ? `${panelHeight}px` : 0,
+                    }}
+                  >
+                    <MenuDesktopRichMenu
+                      menuItem={menuItem}
+                      labels={labels}
+                      routes={routes}
+                      open={openMenu === index}
+                    />
+                  </div>
+                </>
+              )}
+            </li>
+          );
+        })}
       </ul>
       <div className={"panel"} style={{ height: panelHeight }} />
     </div>

diff --git a/static/js/apps/base/components/header_bar/menu_rich_section_group.tsx b/static/js/apps/base/components/header_bar/menu_rich_section_group.tsx
@@ -49,15 +49,15 @@ const MenuRichSectionGroup = ({
 
   return (
     <div className={"group"}>
-      {menuGroup.title && <h4>{menuGroup.title}</h4>}
+      {menuGroup.title && <h3>{menuGroup.title}</h3>}
       {menuGroup.items.map((item, index) => (
         <div key={index} className={"item"}>
           {item.title && item.url ? (
-            <h5>
+            <h4>
               <a
                 href={resolveHref(item.url, routes)}
                 className={"item-link"}
-                onClick={() => {
+                onClick={(): boolean => {
                   triggerGAEvent(GA_EVENT_HEADER_CLICK, {
                     [GA_PARAM_ID]: `${type} submenu ${menuGroup.id}-${index}`,
                     [GA_PARAM_URL]: item.url,
@@ -74,7 +74,7 @@ const MenuRichSectionGroup = ({
                 )}
                 {item.title}
               </a>
-            </h5>
+            </h4>
           ) : (
             <h5>{item.title}</h5>
           )}

diff --git a/static/js/apps/base/utilities/utilities.ts b/static/js/apps/base/utilities/utilities.ts
@@ -139,20 +139,3 @@ export const extractLabels = (elementId = "metadata-labels"): Labels => {
 
   return labels;
 };
-
-/*
-  A breakpoints constant object for responsiveness, for access on the TypeScript side.
-  These are the default breakpoints for a page that does not have custom breakpoints and are
-  applied in: `static/css/base.scss`
-
-  If a page does not use default breakpoints and those breakpoints are required on
-  the TypeScript side, a separate breakpoint object should be created.
-*/
-export const BREAKPOINTS = {
-  xs: 0,
-  sm: 576,
-  md: 768,
-  lg: 1068,
-  xl: 1350,
-  xxl: 1400,
-};
diff --git a/static/js/apps/homepage/main.ts b/static/js/apps/homepage/main.ts
@@ -15,7 +15,7 @@
  */
 
 /**
- * Entry point for Version 2 of the home page.
+ * Entry point for the home page.
  */
 
 import React from "react";

diff --git a/static/js/build/one_data_commons.tsx b/static/js/build/one_data_commons.tsx
@@ -8,6 +8,7 @@ const OneDataCommons = (): ReactElement => {
     return [
       <MediaText
         key={0}
+        alt={"One Data Commons Website Screenshot"}
         mediaType="image"
         mediaSource="images/content/build/ONEData.png"
       >
-Original file line number
+Diff line change
@@ Expand Up / @@ -15,7 +15,7 @@ @@
      */
     /**
-     * Entry point for Version 2 of the home page.
+     * Entry point for the home page.
      */
     import React from "react";
@@ Expand Down @@