a11y fixe arrow last + heading demo

hotgeart · May 19, 2020 · d6cdc05 · d6cdc05
1 parent fbf7347
commit d6cdc05
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 8 deletions.
diff --git a/dist/a11y-carousel.min.js b/dist/a11y-carousel.min.js
diff --git a/index.html b/index.html
@@ -15,13 +15,12 @@ <h1>A11y Carousel</h1>
             <p class="lead">
                 The accessible slideshow / carousel you've always dreamed of <small>(or may be it's just me)</small>
             </p>
-            <h2 id="demo-slide" class="visually-hidden">Demo :</h2>
             <div id="demo">
                 <div>
                     <div>
                         <div class="media" style="background-image: url('https://picsum.photos/400/300?random=1')"></div>
                         <div class="caption">
-                            <h3>Accessible</h3>
+                            <h2>Accessible</h2>
                             <p>A11y Carousel is fully accessible with the keyboard and has the right aria attributes. The carousel is based on <a href="https://www.w3.org/TR/wai-aria-practices/examples/carousel/carousel-1.html">the example provided by the W3C</a>.</p>
                         </div>
                     </div>
@@ -30,7 +29,7 @@ <h3>Accessible</h3>
                     <div>
                         <div class="media" style="background-image: url('https://picsum.photos/400/300?random=2')"></div>
                         <div class="caption">
-                            <h3>IE 10 Compatible</h3>
+                            <h2>IE 10 Compatible</h2>
                             <p>A11y Carousel support all browsers even that ugly duck. Because you and me know your clients are still on IE.</p>
                         </div>
                     </div>
@@ -39,7 +38,7 @@ <h3>IE 10 Compatible</h3>
                     <div>
                         <div class="media" style="background-image: url('https://picsum.photos/400/300?random=3')"></div>
                         <div class="caption">
-                            <h3>Vanilla JavaScript</h3>
+                            <h2>Vanilla JavaScript</h2>
                             <p>No jQuery here, no dependecie either, just the JS you love <3. Also only 14.5 KB!</p>
                         </div>
                     </div>

diff --git a/src/a11y-carousel.js b/src/a11y-carousel.js
@@ -58,9 +58,10 @@ class A11yCarousel {
     const sliderWrapper = document.createElement(`div`);
     sliderWrapper.setAttribute(
       `aria-roledescription`,
-      this.getSettings().ariaRoledescription
+      this.getSettings().ariaRoledescriptionCarousel
     );
     sliderWrapper.setAttribute(`aria-label`, this.getSettings().ariaLabel);
+    sliderWrapper.setAttribute(`role`, `region`);
     sliderWrapper.classList.add(this.getSettings().className);
 
     // Move the current HTML for the slide show in the new wrapper
@@ -153,6 +154,12 @@ class A11yCarousel {
             if (e.currentTarget.nextSibling !== null) {
               e.currentTarget.nextSibling.focus();
               this.setSlider(e.currentTarget.nextSibling.getAttribute(`data-slider-id`));
+            } else {
+              // In case there no previous sibling we focus the first dot (tab)
+              e.currentTarget.parentNode.childNodes[0].focus();
+              this.setSlider(
+                e.currentTarget.parentNode.childNodes[0].getAttribute(`data-slider-id`)
+              );
             }
           }
           // <-
@@ -161,6 +168,16 @@ class A11yCarousel {
             if (e.currentTarget.previousSibling !== null) {
               e.currentTarget.previousSibling.focus();
               this.setSlider(e.currentTarget.previousSibling.getAttribute(`data-slider-id`));
+            } else {
+              // In case there no previous sibling we focus the last dot (tab)
+              e.currentTarget.parentNode.childNodes[
+                e.currentTarget.parentNode.childNodes.length - 1
+              ].focus();
+              this.setSlider(
+                e.currentTarget.parentNode.childNodes[
+                  e.currentTarget.parentNode.childNodes.length - 1
+                ].getAttribute(`data-slider-id`)
+              );
             }
           }
           // HOME