Fix breadcrumb-row landmark issue due to putting content switcher in breadcrumb row on articles pages

Author: webstackdev

axe-results-violations.json

@@ -1 +1,38 @@
-[]
+[
+  {
+    "id": "region",
+    "impact": "moderate",
+    "tags": [
+      "cat.keyboard",
+      "best-practice",
+      "RGAAv4",
+      "RGAA-9.2.1"
+    ],
+    "description": "Ensure all page content is contained by landmarks",
+    "help": "All page content should be contained by landmarks",
+    "helpUrl": "https://dequeuniversity.com/rules/axe/4.11/region?application=playwright",
+    "nodes": [
+      {
+        "any": [
+          {
+            "id": "region",
+            "data": {
+              "isIframe": false
+            },
+            "relatedNodes": [],
+            "impact": "moderate",
+            "message": "Some page content is not contained by landmarks"
+          }
+        ],
+        "all": [],
+        "none": [],
+        "impact": "moderate",
+        "html": "<div class=\"shrink-0\">",
+        "target": [
+          "#breadcrumbs > div:nth-child(2)"
+        ],
+        "failureSummary": "Fix any of the following:\n  Some page content is not contained by landmarks"
+      }
+    ]
+  }
+]

src/layouts/BaseLayout.astro

@@ -69,6 +69,9 @@ const {
   tags,
 } = Astro.props
 
+const hasBreadcrumbRowSlot = Astro.slots.has('breadcrumb-row')
+const shouldRenderBreadcrumbRow = (path !== '/' && path !== '') || hasBreadcrumbRowSlot
+
 const requestUrl = Astro.url?.href
 const requestHeaders = Astro.isPrerendered ? undefined : Astro.request.headers
 
@@ -150,19 +153,24 @@ applyRenderSentryContext({
           class="flex-1 min-h-0 overflow-y-auto flex flex-col"
           style={`margin-top: var(--progress-bar-height, 0);`}
         >
-          <div
-            id="breadcrumbs"
-            class:list={[
-              'mt-4 items-center justify-between gap-4',
-              hideBreadcrumbsOnMobile ? 'hidden sm:flex' : 'flex',
-            ]}
-          >
-            <Breadcrumbs path={path} pageTitle={breadcrumbTitle ?? pageTitle} />
-            {/** breadcrumb-row slot is used to pass the ContentSwitcher on articles and deep-dive item view pages */}
-            <div class="shrink-0">
-              <slot name="breadcrumb-row" />
-            </div>
-          </div>
+          {
+            shouldRenderBreadcrumbRow && (
+              <section
+                id="breadcrumbs"
+                aria-label="Breadcrumbs and page controls"
+                class:list={[
+                  'mt-4 items-center justify-between gap-4',
+                  hideBreadcrumbsOnMobile ? 'hidden sm:flex' : 'flex',
+                ]}
+              >
+                <Breadcrumbs path={path} pageTitle={breadcrumbTitle ?? pageTitle} />
+                {/** breadcrumb-row slot is used to pass the ContentSwitcher on articles and deep-dive item view pages */}
+                <div class="shrink-0">
+                  <slot name="breadcrumb-row" />
+                </div>
+              </section>
+            )
+          }
 
           <main
             id="main"

test/e2e/specs/11-accessibility/axe.spec.ts

@@ -32,7 +32,7 @@ describe('WCAG Compliance', () => {
     await runAcrossPages(page, 'check forms', async (url) => {
       await page.goto(url)
       const results = await new AxeBuilder({ page: page.page })
-        .withTags(['cat.aria'])
+        .withTags(['cat.keyboard'])
         .disableRules('color-contrast-enhanced')
         .analyze()