fix: a11y workaround for splide

hlxsites · Oct 19, 2023 · 1f6a286 · 1f6a286
1 parent 9d4fe70
commit 1f6a286
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 30 deletions.
diff --git a/blocks/card-carousel/card-carousel.js b/blocks/card-carousel/card-carousel.js
@@ -2,25 +2,26 @@ import { loadCSS } from '../../scripts/lib-franklin.js';
 
 const TAG_NAME = 'card-carousel';
 const BUNDLE_PATH = (ext) => `${window.hlx.codeBasePath}/blocks/card-carousel/splide.min.${ext}`;
-const TEMPLATE = /* html */ `
+// NOTE: using divs instead of lists due to an a11y bug in splide
+// see: https://github.com/radix-ui/primitives/issues/1703
+const TEMPLATE = /* html */ `\
 <div class="card-carousel">
-<section class="splide">
- <div class="splide__track">
-<ul class="splide__list">
-<li class="splide__slide">
-        <a href="/" class="card">
-          <span class="chip">Blog</span>
-          <h5 class="title">
-            <span class="eyebrow">Research Report</span>
-            AppSec for the Modern Engineering Ecosystem
-          </h5>
-        </a>
-      </li>
-</ul>
-  </div>
-</section>
-</div>
-`;
+  <section class="splide">
+    <div class="splide__track">
+      <div class="splide__list">
+        <div class="splide__slide">
+          <a href="/" class="card">
+            <span class="chip">Blog</span>
+            <h5 class="title">
+              <span class="eyebrow">Research Report</span>
+              AppSec for the Modern Engineering Ecosystem
+            </h5>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </section>
+</div>`;
 
 const SPLIDE_CONFIG = {
   arrowPath:
@@ -97,6 +98,7 @@ export class CardCarousel extends HTMLElement {
     if (loaded && splideRoot) {
       const splide = new window.Splide(splideRoot, SPLIDE_CONFIG);
       splide.mount();
+
       // Wait a tick and then trigger a refresh on the size
       setTimeout(() => {
         splide.refresh();

diff --git a/blocks/resources/resources.js b/blocks/resources/resources.js
@@ -44,20 +44,21 @@ async function renderXMLAsCards(url) {
         year: 'numeric',
       });
 
-      cards += `
-    <li class="splide__slide">
-        <a href="${link[0].textContent}" class="card ${
+      // NOTE: using divs instead of lists due to an a11y bug in splide
+      // see: https://github.com/radix-ui/primitives/issues/1703
+      cards += `\
+    <div class="splide__slide">
+      <a href="${link[0].textContent}" class="card ${
   background && 'has-custom-background'
 }" style="background: ${backgroundStyle}; background-size: cover;">
-            <span class="chip">${readTime[0].textContent} min. read</span>
-            <h5 class="title">
-                <span class="eyebrow"></span>
-                ${title[0].textContent}
-                ${pubDate && `<span class='date'>${pubDateToLocale}</span>`}
-            </h5>
-        </a>
-    </li>
-    `;
+        <span class="chip">${readTime[0].textContent} min. read</span>
+        <h5 class="title">
+          <span class="eyebrow"></span>
+            ${title[0].textContent}
+            ${pubDate && `<span class='date'>${pubDateToLocale}</span>`}
+        </h5>
+      </a>
+    </div>`;
     }
 
     const carouselList = document.querySelector(