Delay alert when rendering the page in order to engage screen reader …

…alert (#2059) * delay alert when rendering the page * format * lint * format success * Change to 500ms and comment
mitodl · Jan 19, 2024 · d6de83b · d6de83b
1 parent 168e491
commit d6de83b
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 67 deletions.
diff --git a/frontend/public/src/components/NotificationContainer.js b/frontend/public/src/components/NotificationContainer.js
@@ -82,11 +82,7 @@ export class NotificationContainer extends React.Component<Props, State> {
               fade={true}
               closeClassName="btn-close-white"
             >
-              <AlertBodyComponent
-                aria-live="assertive"
-                dismiss={dismiss}
-                {...notification.props}
-              />
+              <AlertBodyComponent dismiss={dismiss} {...notification.props} />
             </Alert>
           )
         })}

diff --git a/frontend/public/src/components/TopBar.js b/frontend/public/src/components/TopBar.js
@@ -1,5 +1,5 @@
 // @flow
-import React from "react"
+import React, { useEffect, useState } from "react"
 
 import { routes } from "../lib/urls"
 import UserMenu from "./UserMenu"
@@ -16,69 +16,84 @@ type Props = {
   location: ?Location
 }
 
-const TopBar = ({ currentUser }: Props) => (
-  <header className="site-header new-design d-flex d-flex flex-column">
-    <NotificationContainer id="notifications-container" />
-    <nav
-      className={`order-1 sub-nav navbar navbar-expand-md top-navbar ${
-        currentUser.is_authenticated ? "nowrap login" : ""
-      }`}
-    >
-      <div className="top-branding">
-        <a href="https://mit.edu" className="logo-link">
-          <InstituteLogo />
-        </a>
-        <div className="divider-grey" />
-        <a href={routes.root} className="mitx-online-link">
-          MITx Online
-        </a>
-      </div>
-      <button
-        className="navbar-toggler nav-opener collapsed"
-        type="button"
-        data-bs-toggle="collapse"
-        data-bs-target="#nav"
-        aria-controls="nav"
-        aria-expanded="false"
-        aria-label="Toggle navigation"
-      >
-        <span className="bar" />
-        <span className="bar" />
-        <span className="bar" />
-      </button>
-      <div
-        id="nav"
-        className={`${
-          currentUser.is_authenticated ? "" : "collapse"
-        } user-menu-overlay px-0 justify-content-end`}
+const TopBar = ({ currentUser }: Props) => {
+  // Delay any alert displayed on page-load by 500ms in order to
+  // ensure the alert is read by screen readers.
+  const [showComponent, setShowComponent] = useState(false)
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setShowComponent(true)
+    }, 500)
+
+    return () => clearTimeout(timeout)
+  }, [])
+
+  return (
+    <header className="site-header new-design d-flex d-flex flex-column">
+      {showComponent ? (
+        <NotificationContainer id="notifications-container" />
+      ) : null}
+      <nav
+        className={`order-1 sub-nav navbar navbar-expand-md top-navbar ${
+          currentUser.is_authenticated ? "nowrap login" : ""
+        }`}
       >
-        <div className="full-screen-top-menu">
-          {currentUser.is_authenticated ? (
-            <>
-              <MixedLink
-                id="catalog"
-                dest={routes.catalog}
-                className="top-nav-link"
-                aria-label="Catalog"
-              >
-                Catalog
-              </MixedLink>
-              <UserMenu currentUser={currentUser} useScreenOverlay={false} />
-            </>
-          ) : (
-            <AnonymousMenu mobileView={false} />
-          )}
+        <div className="top-branding">
+          <a href="https://mit.edu" className="logo-link">
+            <InstituteLogo />
+          </a>
+          <div className="divider-grey" />
+          <a href={routes.root} className="mitx-online-link">
+            MITx Online
+          </a>
         </div>
-        <div className="mobile-auth-buttons">
-          {currentUser.is_authenticated ? (
-            <UserMenu currentUser={currentUser} useScreenOverlay={true} />
-          ) : (
-            <AnonymousMenu mobileView={true} />
-          )}
+        <button
+          className="navbar-toggler nav-opener collapsed"
+          type="button"
+          data-bs-toggle="collapse"
+          data-bs-target="#nav"
+          aria-controls="nav"
+          aria-expanded="false"
+          aria-label="Toggle navigation"
+        >
+          <span className="bar" />
+          <span className="bar" />
+          <span className="bar" />
+        </button>
+        <div
+          id="nav"
+          className={`${
+            currentUser.is_authenticated ? "" : "collapse"
+          } user-menu-overlay px-0 justify-content-end`}
+        >
+          <div className="full-screen-top-menu">
+            {currentUser.is_authenticated ? (
+              <>
+                <MixedLink
+                  id="catalog"
+                  dest={routes.catalog}
+                  className="top-nav-link"
+                  aria-label="Catalog"
+                >
+                  Catalog
+                </MixedLink>
+                <UserMenu currentUser={currentUser} useScreenOverlay={false} />
+              </>
+            ) : (
+              <AnonymousMenu mobileView={false} />
+            )}
+          </div>
+          <div className="mobile-auth-buttons">
+            {currentUser.is_authenticated ? (
+              <UserMenu currentUser={currentUser} useScreenOverlay={true} />
+            ) : (
+              <AnonymousMenu mobileView={true} />
+            )}
+          </div>
         </div>
-      </div>
-    </nav>
-  </header>
-)
+      </nav>
+    </header>
+  )
+}
 
 export default TopBar