Accessability pass

src/snappy.css

@@ -9,6 +9,8 @@
         cursor: grab;
         scroll-behavior: smooth;
         scroll-snap-type: x mandatory;
+        margin: 0;
+        padding: 0;
 
         &.is-dragging {
             scroll-snap-type: none !important;
@@ -23,14 +25,20 @@
         scroll-snap-stop: normal;
     }
 
-    .pagination .dot {
-        display: inline-block;
-        width: 1rem;
-        height: 1rem;
-        background-color: silver;
+    .pagination {
+        margin: 0;
+        padding: 0;
+        list-style: none;
     }
 
-    .prev, .next {
+    .pagination .dot {
+        width: 1rem;
+        height: 1rem;
+        border: none;
+    }
+
+    .prev,
+    .next {
         touch-action: manipulation;
     }
 
@@ -54,4 +62,15 @@
     &[data-snap-stop="always"] .slide {
         scroll-snap-stop: always;
     }
+}
+
+.visually-hidden {
+    border: 0;
+    clip-path: inset(50%);
+    height: 1px;
+    margin: 0;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
 }

src/snappy.js

@@ -360,14 +360,21 @@ class Carousel {
     createPagination() {
         this.slides.forEach((slide, index) => {
             // Populate the pagination container with dots for each slide
-            let div = document.createElement('div');
-            div.classList.add('dot');
-            div.addEventListener('click', () => this.goToSlide(index));
-            this.pagination.appendChild(div);
+            let li = document.createElement('li');
+            let button = document.createElement('button');
+            button.classList.add('dot');
+            button.addEventListener('click', () => this.goToSlide(index));
+            let name = document.createElement('span');
+            name.textContent = "Slide " + (index + 1);
+            name.classList.add("visually-hidden");
+
+            button.appendChild(name);
+            li.appendChild(button);
+            this.pagination.appendChild(li);
 
             // Store a reference to the pagination dots in the carousel object for later use
             if (!this.paginationDots) this.paginationDots = [];
-            this.paginationDots.push(div);
+            this.paginationDots.push(button);
         });
 
     }
@@ -449,6 +456,9 @@ class Carousel {
         if (this.activeSlideIndex === this.renderedActiveSlideIndex) return;
         this.renderedActiveSlideIndex = this.activeSlideIndex;
 
+        this.prevButton.disabled = this.activeSlideIndex <= 0;
+        this.nextButton.disabled = this.activeSlideIndex >= this.slides.length - 1;
+
         this.slides.forEach((slide, index) => {
             slide.classList.toggle('is-active', index === this.activeSlideIndex);
         });