USWDS Update

.pa11yci-desktop

@@ -2,6 +2,7 @@
   "defaults": {
     "concurrency": 1,
     "standard": "WCAG2AA",
+    "hideElements": "iframe",
     "timeout": 20000,
     "chromeLaunchConfig": {
         "args": ["--no-sandbox"]

.pa11yci-mobile

@@ -2,6 +2,7 @@
   "defaults": {
     "concurrency": 1,
     "standard": "WCAG2AA",
+    "hideElements": "iframe",
     "timeout": 20000,
     "chromeLaunchConfig": {
         "args": ["--no-sandbox"]

package.json

@@ -32,7 +32,7 @@
     "@typescript-eslint/eslint-plugin": "^6.2.0",
     "@typescript-eslint/parser": "^6.2.0",
     "@uswds/compile": "^1.1.0",
-    "@uswds/uswds": "^3.7.1",
+    "@uswds/uswds": "^3.8.0",
     "broken-link-checker": "^0.7.8",
     "eslint": "^8.45.0",
     "eslint-plugin-astro": "^0.27.2",

src/components/FAQSideNav.astro

@@ -4,10 +4,11 @@ This component is used for FAQ page side navigation.
 It takes title and headings parameters.
 Sidenav won't set page title as menu item. Menu items only set on H2 headings as parent menu and h3 headings as its sub menu
 */
-const { headings, title } = Astro.props;
+const { headings, title, classList } = Astro.props;
 ---
 
-<div class="usa-layout-docs__sidenav desktop:grid-col-4">
+<!-- One of two sidenav's only shown in desktop breakpoints. -->
+<div class={`${classList}`}>
   <nav class="sp_site_nav" aria-label="Secondary navigation">
     <div class="sp_site_nav_title">{title}</div>
     {

src/components/SideNav.astro

@@ -1,8 +1,9 @@
 ---
-const { id, pages, headings, parent_path, title} = Astro.props;
+const { id, pages, headings, parent_path, title, classList} = Astro.props;
 pages.sort((a, b) => parseInt(a.data.order) - parseInt(b.data.order))
 ---
-<div class="usa-layout-docs__sidenav desktop:grid-col-4">
+
+<div class={`${classList}`}>
   <nav class="sp_site_nav" aria-label="Secondary navigation">
     <div class="sp_site_nav_title">{ title }</div>
     <ul class="usa-sidenav">

src/components/SinglePageSideNav.astro

@@ -5,9 +5,9 @@ Page title itself is not part of menu item. Menu items is only set for individua
 It include top navigation return to its parent level navigation.
 */
 import TopNav from "@components/TopNav.astro";
-const {headings, title, parent_nav_path, parent_nav_text} = Astro.props;
+const {headings, title, parent_nav_path, parent_nav_text, classList} = Astro.props;
 ---
-<div class="usa-layout-docs__sidenav desktop:grid-col-4">
+<div class={`${classList}`}>
   { parent_nav_path && parent_nav_text && (
     <TopNav parent_nav_path = {parent_nav_path} parent_nav_text ={parent_nav_text} />
   )}

src/layouts/PageContentLayout.astro

@@ -5,7 +5,7 @@ import { marked } from 'marked';
 import { markedSmartypants } from "marked-smartypants";
 marked.use(markedSmartypants());
 ---
-<main id="main-content" class="usa-layout-docs__main desktop:grid-col-8 usa-prose usa-layout-docs">
+<main id="main-content" class="desktop:grid-col-8 usa-prose usa-layout-docs">
     <h1>{ title }</h1>
 
     { intro && ( 

src/pages/404.astro

@@ -4,7 +4,7 @@ import BaseLayout from '@layouts/BaseLayout.astro';
 <BaseLayout  title="404 Not Found">
   <section class="grid-container usa-section">
     <div class="grid-row grid-gap flex-justify-center">
-      <main id="main-content" class="usa-layout-docs__main desktop:grid-col-8 usa-prose usa-layout-docs usa-prose">
+      <main id="main-content" class="desktop:grid-col-8 usa-prose usa-layout-docs">
         <h1>Page Not Found</h1>
         <p class="usa-intro">
           We’re sorry, we can’t find the page you're looking for. The site administrator may have removed it, changed its location, or made it otherwise unavailable. 

src/pages/about/[...slug].astro

@@ -20,18 +20,29 @@ const { entry, entries } = Astro.props;
 const { Content, headings } = await entry.render();
 ---
 <PageLayout title={entry.data.title} description={entry.data.description}>
+  <!-- One of two sidenav's only shown in desktop breakpoints. -->
   <SideNav 
     title="About the GSA SmartPay Program"
     parent_path="about/"
     pages={entries}
     headings={headings}
     id={entry.id}
+    classList = "usa-layout-docs__sidenav display-none desktop:display-block desktop:grid-col-4"
   />
   <PageContentLayout
     title={entry.data.title}
     intro={entry.data.intro}
   >
     <Content />
   </PageContentLayout>
+  <!-- New duplicate section only shown on mobile. -->
+  <SideNav
+      title="About the GSA SmartPay Program"
+      parent_path="about/"
+      pages={entries}
+      headings={headings}
+      id={entry.id}
+      classList = "usa-layout-docs__sidenav desktop:display-none mobile:grid-col-12"
+  />
 </PageLayout>
 

src/pages/contact/[...slug].astro

@@ -18,18 +18,29 @@ const { entry, entries } = Astro.props;
 const { Content, headings } = await entry.render();
 ---
 <PageLayout title={entry.data.title} description={entry.data.description}>
+  <!-- One of two sidenav's only shown in desktop breakpoints. -->
   <SideNav 
       title="Contact"
       parent_path="contact/"
       pages={entries}
       headings={headings}
       id={entry.id}
+      classList = "usa-layout-docs__sidenav display-none desktop:display-block desktop:grid-col-4"
     />
   <PageContentLayout
     title={entry.data.title}
     intro={entry.data.intro}
   >
     <Content />
   </PageContentLayout>
+  <!-- New duplicate section only shown on mobile. -->
+  <SideNav
+      title="Contact"
+      parent_path="contact/"
+      pages={entries}
+      headings={headings}
+      id={entry.id}
+      classList = "usa-layout-docs__sidenav desktop:display-none mobile:grid-col-12"
+  />
 </PageLayout>
 

src/pages/faq/index.astro

@@ -22,17 +22,25 @@ for(const heading of headings){
     currentParent.submenu.push(heading);
   }
 }
-//console.log(newHeadings)
+
 ---
 <PageLayout title={page.data.title} description={page.data.description}>
+  <!-- One of two sidenav's only shown in desktop breakpoints. -->
   <SideNav 
-  title="Frequently Asked Questions"
-  headings ={newHeadings}
+      title="Frequently Asked Questions"
+      headings ={newHeadings}
+      classList = "usa-layout-docs__sidenav display-none desktop:display-block desktop:grid-col-4"
   />
-  <main id="main-content" class="usa-layout-docs__main desktop:grid-col-8 usa-prose usa-layout-docs">
+  <main id="main-content" class="desktop:grid-col-8 usa-prose usa-layout-docs">
     <h1>Frequently Asked Questions</h1>
     <Content />
   </main>
+  <!-- New duplicate section only shown on mobile. -->
+  <SideNav 
+      title="Frequently Asked Questions"
+      headings ={newHeadings}
+      classList = "usa-layout-docs__sidenav desktop:display-none mobile:grid-col-12"
+  />
 </PageLayout>
 <script >
   import {handleAccordionSearch} from "../../assets/js/faqHelper.js"

src/pages/how-it-works/[...slug].astro

@@ -20,18 +20,29 @@ const { entry, entries } = Astro.props;
 const { Content, headings } = await entry.render();
 ---
 <PageLayout title={entry.data.title} description={entry.data.description}>
+  <!-- One of two sidenav's only shown in desktop breakpoints. -->
   <SideNav 
     title="How It Works"
     parent_path="how-it-works/"
     pages={entries}
     headings={headings}
     id={entry.id}
+    classList = "usa-layout-docs__sidenav display-none desktop:display-block desktop:grid-col-4"
   />
   <PageContentLayout
     title={entry.data.title}
     intro={entry.data.intro}
   >
     <Content />
   </PageContentLayout>
+  <!-- New duplicate section only shown on mobile. -->
+  <SideNav
+      title="How It Works"
+      parent_path="how-it-works/"
+      pages={entries}
+      headings={headings}
+      id={entry.id}
+      classList = "usa-layout-docs__sidenav desktop:display-none mobile:grid-col-12"
+  />
 </PageLayout>
 

src/pages/merchants/[...slug].astro

@@ -31,17 +31,27 @@ const { entry } = Astro.props;
 const { Content } = await entry.render();
 ---
 <PageLayout title={entry.data.title} description={entry.data.description}>
+  <!-- One of two sidenav's only shown in desktop breakpoints. -->
   <SideNav 
     title="Merchants"
     parent_path=""
     pages={navigation_items}
     id={entry.id}
+    classList = "usa-layout-docs__sidenav display-none desktop:display-block desktop:grid-col-4"
   />
   <PageContentLayout
     title={entry.data.title}
     intro={entry.data.intro}
   >
     <Content />
   </PageContentLayout>
+  <!-- New duplicate section only shown on mobile. -->
+  <SideNav
+      title="Merchants"
+      parent_path=""
+      pages={navigation_items}
+      id={entry.id}
+      classList = "usa-layout-docs__sidenav desktop:display-none mobile:grid-col-12"
+  />
 </PageLayout>
 

src/pages/policies-and-audits/[...slug].astro

@@ -45,13 +45,22 @@ const parent_path ="policies-and-audits/"
       pages={[...entries]}
       headings={headings}
       id={entry.id}
+      classList = "usa-layout-docs__sidenav display-none desktop:display-block desktop:grid-col-4"
     />  
     <PageContentLayout
       title={entry.data.title}
       intro={entry.data.intro}
     >
       <Content />
-  </PageContentLayout>
+   </PageContentLayout>
+                  <SideNav
+                          title="Policies & Audits"
+                          parent_path={parent_path}
+                          pages={[...entries]}
+                          headings={headings}
+                          id={entry.id}
+                          classList = "usa-layout-docs__sidenav desktop:display-none mobile:grid-col-12"
+                  />        
   )
 }
 </PageLayout>

src/pages/policies-and-audits/audits/[...slug].astro

@@ -21,14 +21,24 @@ const { Content, headings } = await entry.render();
 ---
 
 <PageLayout title ={entry.data.title} description={entry.data.description}>
+  <!-- One of two sidenav's only shown in desktop breakpoints. -->
   <SideNav 
     title={entry.data.title}
     headings ={headings}
     parent_nav_path="policies-and-audits/audits"
-    parent_nav_text = "Return to the Audit Repository" 
+    parent_nav_text = "Return to the Audit Repository"
+    classList = "usa-layout-docs__sidenav display-none desktop:display-block desktop:grid-col-4"
   />
-  <main id="main-content" class="usa-layout-docs__main desktop:grid-col-8 usa-prose usa-layout-docs">
+  <main id="main-content" class="desktop:grid-col-8 usa-prose usa-layout-docs">
     <h1>{entry.data.title}</h1>
     <Content />
   </main>
+  <!-- New duplicate section only shown on mobile. -->
+  <SideNav
+      title={entry.data.title}
+      headings ={headings}
+      parent_nav_path="policies-and-audits/audits"
+      parent_nav_text = "Return to the Audit Repository"
+      classList = "usa-layout-docs__sidenav desktop:display-none mobile:grid-col-12"
+  />
 </PageLayout>

src/pages/resources/[...slug].astro

@@ -19,18 +19,29 @@ const { entry, entries } = Astro.props;
 const { Content, headings } = await entry.render();
 ---
 <PageLayout title={entry.data.title} description={entry.data.description}>
+  <!-- One of two sidenav's only shown in desktop breakpoints. -->
   <SideNav 
     title="Resources"
     parent_path="resources/"
     pages={entries}
     headings={headings}
     id={entry.id}
+    classList = "usa-layout-docs__sidenav display-none desktop:display-block desktop:grid-col-4"
   />
   <PageContentLayout
     title={entry.data.title}
     intro={entry.data.intro}
   >
     <Content />
   </PageContentLayout>
+  <!-- New duplicate section only shown on mobile. -->
+  <SideNav
+      title="Resources"
+      parent_path="resources/"
+      pages={entries}
+      headings={headings}
+      id={entry.id}
+      classList = "usa-layout-docs__sidenav desktop:display-none mobile:grid-col-12"
+  />
 </PageLayout>
 

src/pages/smarttax/[...slug].astro

@@ -19,19 +19,30 @@ const { entry, entries } = Astro.props;
 const { Content, headings } = await entry.render();
 ---
 <PageLayout title={entry.data.title} description={entry.data.description}>
+  <!-- One of two sidenav's only shown in desktop breakpoints. -->
   <SideNav 
     title="State Tax Information"
     parent_path="smarttax/"
     pages={entries}
     headings={headings}
     id={entry.id}
+    classList = "usa-layout-docs__sidenav display-none desktop:display-block desktop:grid-col-4"
   />
   <PageContentLayout
     title={entry.data.title}
     intro={entry.data.intro}
   >
     <Content />
   </PageContentLayout>
+  <!-- New duplicate section only shown on mobile. -->
+  <SideNav
+      title="State Tax Information"
+      parent_path="smarttax/"
+      pages={entries}
+      headings={headings}
+      id={entry.id}
+      classList = "usa-layout-docs__sidenav desktop:display-none mobile:grid-col-12"
+  />
 </PageLayout>
 
 <style is:global>

src/pages/smarttax/state-tax-forms/[slug].astro

@@ -24,13 +24,15 @@ const { entry } = Astro.props;
 const { Content, headings } = await entry.render();
 ---
 <PageLayout title={`${entry.data.name} Tax Information`} description={`Information about ${entry.data.name} state taxes for GSA SmartPay card/account holders`}>
+  <!-- One of two sidenav's only shown in desktop breakpoints. -->
   <SinglePageSideNav 
     title={entry.data.name}
     headings={headings}
     parent_nav_path = "smarttax/state-tax-forms"
     parent_nav_text = "Return to State Tax Forms"
+    classList = "usa-layout-docs__sidenav display-none desktop:display-block desktop:grid-col-4"
   />
-  <main id="main-content" class="usa-layout-docs__main desktop:grid-col-8 usa-prose usa-layout-docs">
+  <main id="main-content" class="desktop:grid-col-8 usa-prose usa-layout-docs">
     <h1>{ entry.data.name } Tax Information</h1>
     <StateTaxSelection 
       current_state={entry.data.name}
@@ -47,5 +49,13 @@ const { Content, headings } = await entry.render();
       <i>Updated {format_date(entry.data.updated)}</i>
     </p>
   </main>
+  <!-- New duplicate section only shown on mobile. -->
+  <SinglePageSideNav
+      title={entry.data.name}
+      headings={headings}
+      parent_nav_path = "smarttax/state-tax-forms"
+      parent_nav_text = "Return to State Tax Forms"
+      classList = "usa-layout-docs__sidenav desktop:display-none mobile:grid-col-12"
+  />
 </PageLayout>