Fix 508 accessibility issues on the website

frontend-react-original/src/components/header/ReportStreamHeader.tsx

@@ -67,7 +67,7 @@ function Dropdown({
                 data-testid="navDropDownButton"
                 className={classes}
                 aria-expanded={isCurrentDropdown}
-                aria-controls={menuName.toLowerCase()}
+                aria-controls={`${menuName.toLowerCase().replace(/\s+/g, "-")}-dropdown`}
                 type="button"
                 onClick={(e) => {
                     handleToggle(e);
@@ -78,7 +78,7 @@ function Dropdown({
             <Menu
                 items={dropdownList}
                 isOpen={isCurrentDropdown}
-                id={`${menuName}Dropdown`}
+                id={`${menuName.toLowerCase().replace(/\s+/g, "-")}-dropdown`}
             />
         </>
     );
@@ -464,6 +464,7 @@ const ReportStreamHeader = ({
                 <Header
                     data-testid="auth-header"
                     basic={true}
+                    aria-label="Secondary navigation"
                     className={classnames(styles.AuthNavbar)}
                 >
                     <div className="usa-nav-container">
@@ -483,6 +484,7 @@ const ReportStreamHeader = ({
             )}
             <Header
                 basic={true}
+                aria-label="Primary navigation"
                 className={classnames(styles.Navbar, {
                     [styles.NavbarBlueVariant]: blueVariant,
                     [styles.NavbarDefault]: !blueVariant,
@@ -491,7 +493,7 @@ const ReportStreamHeader = ({
                 <div className="usa-nav-container">
                     <div className="usa-navbar">
                         <Title>
-                            <USLink href="/" title="Home" aria-label="Home">
+                            <USLink href="/" aria-label="ReportStream home">
                                 ReportStream
                                 {config.IS_PREVIEW && (
                                     <span className={styles.ClientEnv}>

frontend-react-original/src/content/home/index.mdx

@@ -14,13 +14,13 @@ import site from "../site.json";
 
 <HeroWrapper isAlternate className="rs-bg-grid">
     <div className="grid-container">
-        <header className="usa-section usa-prose tablet:grid-col-10">
+        <section className="usa-section usa-prose tablet:grid-col-10">
             <h1>CDC’s free, single connection to streamline your data transfer and improve public health</h1>
             <p className="rs-subtitle">ReportStream now supports all reportable conditions. Contact us to learn what conditions we are currently receiving and how we can help you. </p>
             <div className="grid-row margin-top-8 margin-bottom-2">
                 <A href={site.forms.connectWithRS.url} className="usa-button usa-button--big" target="_blank">Contact us</A>
             </div>
-        </header>
+        </section>
     </div>
 </HeroWrapper>
 <HeroWrapper>

frontend-react-original/src/layouts/Main/MainLayout.tsx

@@ -39,9 +39,12 @@ export const MainLayoutBase = ({ children }: MainLayoutBaseProps) => {
                 isFullWidth && "rs-style--alternate",
             )}
         >
+            <a className="usa-skipnav" href="#main-content">
+                Skip to main content
+            </a>
             <ScrollRestoration />
             <ReportStreamHeader blueVariant={isFullWidth} />
-            <main className="padding-top-5" id="main-content">
+            <main className="padding-top-5" id="main-content" tabIndex={-1}>
                 <InnerWrapper className={innerWrapperClassnames}>
                     <RSErrorBoundary>
                         {children}