a11y fixes

hotgeart · May 13, 2020 · f17f7cf · f17f7cf
1 parent 1d6c84c
commit f17f7cf
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 12 deletions.
diff --git a/dist/a11y-carousel.min.js b/dist/a11y-carousel.min.js
diff --git a/index.html b/index.html
@@ -212,7 +212,7 @@ <h2 id="settings">Settings</h2>
                         </tr>
                         <tr>
                             <td>
-                                ariaRoledescription
+                                ariaRoledescriptionCarousel
                             </td>
                             <td>
                                 carousel (string)
@@ -221,6 +221,17 @@ <h2 id="settings">Settings</h2>
                                 Attribute aria-roledescription
                             </td>
                         </tr>
+                        <tr>
+                            <td>
+                                ariaRoledescriptionSlide
+                            </td>
+                            <td>
+                                slide (string)
+                            </td>
+                            <td>
+                                Attribute aria-roledescription for the slide. This attribute is only used if there's no pagination (dots)
+                            </td>
+                        </tr>
                         <tr>
                             <td>
                                 ariaLabel
@@ -319,13 +330,13 @@ <h2 id="starter">SASS Starter</h2>
             <p>Because I'm nice, here is a sass starter width Font Awesome 5 Free:</p>
             <div id="slideshow">
                 <div>
-                    <img src="http://placehold.jp/40/2d53fe/ffffff/920x300.jpg?text=SLIDE%201" alt="illustration image 1">
+                    <h3>Slide 1</h3>
                 </div>
                 <div>
-                    <img src="http://placehold.jp/40/2d53fe/ffffff/920x300.jpg?text=SLIDE%202" alt="illustration image 2">
+                    <h3>Slide 2</h3>
                 </div>
                 <div>
-                    <img src="http://placehold.jp/40/2d53fe/ffffff/920x300.jpg?text=SLIDE%203" alt="illustration image 3">
+                    <h3>Slide 3</h3>
                 </div>
             </div>
 

diff --git a/src/a11y-carousel.js b/src/a11y-carousel.js
@@ -19,7 +19,8 @@ class A11yCarousel {
       gesture: true,
       pauseOnHover: true,
       className: `a11y-carousel`,
-      ariaRoledescription: `carousel`,
+      ariaRoledescriptionCarousel: `carousel`,
+      ariaRoledescriptionSlide: `slide`,
       ariaLabel: `Slideshow`,
       playText: `Start slide show`,
       pauseText: `Stop slide show`,
@@ -81,11 +82,6 @@ class A11yCarousel {
 
     // Set all the slides
     this._slides.forEach((item, index) => {
-      item.setAttribute(`role`, `tabpanel`);
-      item.setAttribute(
-        `aria-labelledby`,
-        `${this._selector.slice(1)}-tab-${index}`
-      );
       item.setAttribute(`id`, `${this._selector.slice(1)}-tabpanel-${index}`);
       item.setAttribute(
         `aria-label`,
@@ -106,6 +102,15 @@ class A11yCarousel {
 
     /* DOTS */
     if (this.getSettings().dots) {
+      // If we've dots (pagination) we need an aria-labelledby and the role tabpanel for each slide
+      this._slides.forEach((item, index) => {
+        item.setAttribute(
+          `aria-labelledby`,
+          `${this._selector.slice(1)}-tab-${index}`
+        );
+        item.setAttribute(`role`, `tabpanel`);
+      });
+
       // Create a wrapper for the dots
       this.dotsWrapper = document.createElement(`div`);
       this.dotsWrapper.classList.add(`dots`);
@@ -144,27 +149,31 @@ class A11yCarousel {
         dotButton.addEventListener(`keydown`, e => {
           // ->
           if (e.which == 39) {
+            e.preventDefault();
             if (e.currentTarget.nextSibling !== null) {
               e.currentTarget.nextSibling.focus();
               this.setSlider(e.currentTarget.nextSibling.getAttribute(`data-slider-id`));
             }
           }
           // <-
           if (e.which == 37) {
+            e.preventDefault();
             if (e.currentTarget.previousSibling !== null) {
               e.currentTarget.previousSibling.focus();
               this.setSlider(e.currentTarget.previousSibling.getAttribute(`data-slider-id`));
             }
           }
           // HOME
           if (e.which == 36) {
+            e.preventDefault();
             e.currentTarget.parentNode.childNodes[0].focus();
             this.setSlider(
               e.currentTarget.parentNode.childNodes[0].getAttribute(`data-slider-id`)
             );
           }
           // END
           if (e.which == 35) {
+            e.preventDefault();
             e.currentTarget.parentNode.childNodes[
               e.currentTarget.parentNode.childNodes.length - 1
             ].focus();
@@ -176,6 +185,15 @@ class A11yCarousel {
           }
         });
       });
+    } else {
+      // If we DON'T have dots (pagination) we need an aria-roledescription and the role group for each slide
+      this._slides.forEach((item, index) => {
+        item.setAttribute(
+          `aria-roledescription`,
+          `slide`
+        );
+        item.setAttribute(`role`, `group`);
+      });
     }
 
     /* ARROWS */