Fix duplicate landmark in Carousel component

Author: webstackdev

axe-results-violations.json

@@ -16,42 +16,49 @@
             "id": "landmark-is-unique",
             "data": {
               "role": "region",
-              "accessibleText": "building the future of software development"
+              "accessibleText": null
             },
             "relatedNodes": [
               {
-                "html": "<section class=\"bg-content rounded-2xl p-8 md:p-12 overflow-hidden relative\" aria-labelledby=\"home-about-title\">",
+                "html": "<div class=\"embla relative\" role=\"region\" data-astro-cid-kfjqoxel=\"\">",
                 "target": [
-                  ".md\\:p-12"
+                  ".mb-0:nth-child(2) > carousel-slider > .py-8.lg\\:px-8.px-4 > .embla.relative[role=\"region\"]"
                 ]
-              }
-            ],
-            "impact": "moderate",
-            "message": "The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable"
-          }
-        ],
-        "all": [],
-        "none": [],
-        "impact": "moderate",
-        "html": "<section class=\"container mx-auto px-4 sm:px-6 lg:px-8 py-4 md:py-8 lg:py-12\" aria-labelledby=\"home-about-title\">",
-        "target": [
-          ".md\\:py-8.lg\\:py-12[aria-labelledby=\"home-about-title\"]"
-        ],
-        "failureSummary": "Fix any of the following:\n  The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable"
-      },
-      {
-        "any": [
-          {
-            "id": "landmark-is-unique",
-            "data": {
-              "role": "region",
-              "accessibleText": "technologies & expertise"
-            },
-            "relatedNodes": [
+              },
+              {
+                "html": "<div class=\"embla relative\" role=\"region\" data-astro-cid-kfjqoxel=\"\">",
+                "target": [
+                  ".mb-0:nth-child(3) > carousel-slider > .py-8.lg\\:px-8.px-4 > .embla.relative[role=\"region\"]"
+                ]
+              },
+              {
+                "html": "<div class=\"embla relative\" role=\"region\" data-astro-cid-kfjqoxel=\"\">",
+                "target": [
+                  ".mb-0:nth-child(4) > carousel-slider > .py-8.lg\\:px-8.px-4 > .embla.relative[role=\"region\"]"
+                ]
+              },
+              {
+                "html": "<div class=\"embla relative\" role=\"region\" data-astro-cid-kfjqoxel=\"\">",
+                "target": [
+                  ".mb-0:nth-child(5) > carousel-slider > .py-8.lg\\:px-8.px-4 > .embla.relative[role=\"region\"]"
+                ]
+              },
+              {
+                "html": "<div class=\"embla relative\" role=\"region\" data-astro-cid-kfjqoxel=\"\">",
+                "target": [
+                  ".mb-0:nth-child(6) > carousel-slider > .py-8.lg\\:px-8.px-4 > .embla.relative[role=\"region\"]"
+                ]
+              },
+              {
+                "html": "<div class=\"embla relative\" role=\"region\" data-astro-cid-kfjqoxel=\"\">",
+                "target": [
+                  ".mb-0:nth-child(7) > carousel-slider > .py-8.lg\\:px-8.px-4 > .embla.relative[role=\"region\"]"
+                ]
+              },
               {
-                "html": "<skills-carousel class=\"block\" role=\"region\" aria-roledescription=\"carousel\" aria-labelledby=\"home-technologies-title\" data-carousel-autoplay=\"paused\" data-carousel-ready=\"true\">",
+                "html": "<div class=\"embla relative\" role=\"region\" data-astro-cid-kfjqoxel=\"\">",
                 "target": [
-                  "skills-carousel"
+                  ".mb-0:nth-child(8) > carousel-slider > .py-8.lg\\:px-8.px-4 > .embla.relative[role=\"region\"]"
                 ]
               }
             ],
@@ -62,9 +69,9 @@
         "all": [],
         "none": [],
         "impact": "moderate",
-        "html": "<section class=\"container mx-auto px-4 sm:px-6 lg:px-8 py-4 md:py-8 lg:py-12 hidden md:block -mb-12\" aria-labelledby=\"home-technologies-title\">",
+        "html": "<div class=\"embla relative\" role=\"region\" data-astro-cid-kfjqoxel=\"\">",
         "target": [
-          ".md\\:block"
+          ".mb-0:nth-child(1) > carousel-slider > .py-8.lg\\:px-8.px-4 > .embla.relative[role=\"region\"]"
         ],
         "failureSummary": "Fix any of the following:\n  The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable"
       }

src/components/Carousel/client/__tests__/index.spec.ts

@@ -208,6 +208,7 @@ describe('Carousel component (server output)', () => {
         const region = root.querySelector('.embla')
 
         expect(heading).toBeNull()
+        expect(region?.getAttribute('role')).toBeNull()
         expect(region?.getAttribute('aria-labelledby')).toBeNull()
       },
       { title: '', variant: 'suggested' }

src/components/Carousel/index.astro

@@ -74,6 +74,7 @@ const items = prepareItems(allItems, variant, currentSlug, limit)
 
 const carouselId = `carousel-${type}-${variant}-${currentSlug ?? 'all'}`
 const carouselRegionLabelledBy = title ? `${carouselId}-title` : undefined
+const carouselRegionRole = carouselRegionLabelledBy ? 'region' : undefined
 ---
 
 {
@@ -99,7 +100,7 @@ const carouselRegionLabelledBy = title ? `${carouselId}-title` : undefined
         )}
 
         {/* Embla Carousel */}
-        <div class="embla relative" role="region" aria-labelledby={carouselRegionLabelledBy}>
+        <div class="embla relative" role={carouselRegionRole} aria-labelledby={carouselRegionLabelledBy}>
           <div class="embla__viewport overflow-hidden p-4">
             <div class="embla__container flex -ml-4 md:-ml-6">
               {items.map((item: ItemType, index) => (