Added second variation of carousel.

PublicisSapient · Sep 26, 2022 · 965368c · 965368c
1 parent b38b958
commit 965368c
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 26 deletions.
diff --git a/content/body/carousel.php b/content/body/carousel.php
@@ -47,16 +47,14 @@
         <img class="enable-carousel__background" src="images/carousel-example/02-turkish-star-wars.jpg"
           alt="Cüneyt Arkın kicking and fighting two beasts that look like they are in low budget furry costumes, while a woman being held by one of them looks on in awe.">
         <div class="enable-carousel__slide-copy enable-carousel__slide-copy--variation2">
-          <h2 id="slide02-title" class="enable-carousel__slide-heading" lang="tr">Dünyayı Kurtaran
-            Adam
+          <h2 id="slide02-title" class="enable-carousel__slide-heading">Turkish Star Wars
           </h2>
-          <p>Two space fighters crash into a desert planet and fights a mysterious Wizard who is
+          <p>Originally called <span lang="tr">Dünyayı Kurtaran
+            Adam</a>, two space fighters crash into a desert planet and fights a mysterious Wizard who is
             enslaving
             the local population.</p>
           <a class="enable-carousel__slide-cta"
-            href="https://en.wikipedia.org/wiki/D%C3%BCnyay%C4%B1_Kurtaran_Adam">Learn More <span class="sr-only">about
-              <span lang="tr">Dünyayı Kurtaran
-                Adam</span></span></a>
+            href="https://en.wikipedia.org/wiki/D%C3%BCnyay%C4%B1_Kurtaran_Adam" aria-describedby="slide02-title">Learn More</a>
         </div>
       </div>
       <div class="enable-carousel__slide">
@@ -178,8 +176,11 @@ class="enable-mobile-visible-on-focus enable-skip-link">Skip to
 
 <div id="example2" class="enable-example enable-carousel__example">
 
+  <p id="carousel-instructions" class="sr-only">Use the Previous and Next Slide buttons to cycle through the panels in the carousel.</p>
+
+  <div class="glider-contain" role="region" aria-label="Movie Carousel"  >
 
-  <div class="glider-contain">
+    <button class="glider-prev" aria-describedby="carousel-instructions" aria-label="Display Previous Slide">«</button>
     <div class="glider enable-carousel enable-carousel--focus-arrow-buttons">
       <div class="enable-carousel__slide">
         <img class="enable-carousel__background" src="images/carousel-example/00-turkish-spider-man.jpg"
@@ -196,16 +197,14 @@ class="enable-mobile-visible-on-focus enable-skip-link">Skip to
         <img class="enable-carousel__background" src="images/carousel-example/02-turkish-star-wars.jpg"
           alt="Cüneyt Arkın kicking and fighting two beasts that look like they are in low budget furry costumes, while a woman being held by one of them looks on in awe.">
         <div class="enable-carousel__slide-copy enable-carousel__slide-copy--variation2">
-          <h2 id="example2__slide02-title" class="enable-carousel__slide-heading" lang="tr">Dünyayı Kurtaran
-            Adam
+          <h2 id="example2__slide02-title" class="enable-carousel__slide-heading" >Turkish Star Wars
           </h2>
-          <p>Two space fighters crash into a desert planet and fights a mysterious Wizard who is
+          <p>Originally called <span lang="tr">Dünyayı Kurtaran
+            Adam</a>, two space fighters crash into a desert planet and fights a mysterious Wizard who is
             enslaving
             the local population.</p>
-          <a class="enable-carousel__slide-cta"
-            href="https://en.wikipedia.org/wiki/D%C3%BCnyay%C4%B1_Kurtaran_Adam">Learn More <span class="sr-only">about
-              <span lang="tr">Dünyayı Kurtaran
-                Adam</span></span></a>
+            <a class="enable-carousel__slide-cta"
+            href="https://en.wikipedia.org/wiki/D%C3%BCnyay%C4%B1_Kurtaran_Adam" aria-describedby="example2__slide02-title">Learn More</a>
         </div>
       </div>
       <div class="enable-carousel__slide">
@@ -235,8 +234,7 @@ class="enable-mobile-visible-on-focus enable-skip-link">Skip to
       </div>
     </div>
 
-    <button class="glider-prev">«</button>
-    <button class="glider-next">»</button>
+    <button class="glider-next" aria-describedby="carousel-instructions" aria-label="Display Next Slide">»</button>
     <div role="tablist" class="dots"></div>
   </div>
 

diff --git a/content/bottom/carousel.php b/content/bottom/carousel.php
@@ -1,7 +1,9 @@
 <script type="module">
     import EnableCarousel from "./js/modules/enable-carousel.js";
     const focusAllPanelsCarousel = new EnableCarousel(document.querySelector(".enable-carousel--focus-all-panels"));
-    const focusArrowButtonsCarousel = new EnableCarousel(document.querySelector(".enable-carousel--focus-arrow-buttons"));
+    const focusArrowButtonsCarousel = new EnableCarousel(document.querySelector(".enable-carousel--focus-arrow-buttons"), {
+        useArrowButtons: true
+    });
 
     focusAllPanelsCarousel && focusAllPanelsCarousel.init();
     focusArrowButtonsCarousel && focusArrowButtonsCarousel.init();  

diff --git a/js/modules/enable-carousel.js b/js/modules/enable-carousel.js
@@ -17,12 +17,15 @@ import '../../enable-node-libs/glider-js/glider.js';
 
 
 const EnableCarousel = function (container, options) {
+
   let glider;
   this.container = container;
   this.options = options || {};
   this.useArrowButtons = this.options.useArrowButtons || false;
 
   const supportsInertNatively = HTMLElement.prototype.hasOwnProperty('inert');
+  const $previousButton = this.container.parentNode.querySelector('.glider-prev');
+  const $nextButton = this.container.parentNode.querySelector(".glider-next");
 
   this.init = function () {
 
@@ -33,7 +36,6 @@ const EnableCarousel = function (container, options) {
       console.log('Initializing.  options:', options)
     }
 
-    console.log('prev', this.container.querySelector(".glider-prev"));
     // initializes Glider. We ensure that the carousel
     // is set to not have any animations by default.
     // eslint-disable-next-line no-undef
@@ -42,8 +44,8 @@ const EnableCarousel = function (container, options) {
       dots: "#dots",
       duration: 0,
       arrows: {
-        prev: this.container.parentNode.querySelector(".glider-prev"),
-        next: this.container.parentNode.querySelector(".glider-next"),
+        prev: $previousButton,
+        next: $nextButton,
       },
       draggable: true,
       scrollLock: true,
@@ -54,7 +56,7 @@ const EnableCarousel = function (container, options) {
     this.slidePanels = this.container.querySelectorAll(this.slidePanelSelector);
 
     if (this.useArrowButtons) {
-
+      
       if (!supportsInertNatively) {
         console.log('incuding polyfill');
         import('../../enable-node-libs/inert-polyfill/inert-polyfill.js')
@@ -72,6 +74,13 @@ const EnableCarousel = function (container, options) {
     }
   }
 
+  this.preventSpaceFromScrolling = (e) => {
+    if (e.key === ' ') {
+      console.log('hey');
+      e.stopPropagation();
+    }
+  }
+
   this.setEvents = () => {
     // when keyboard focus is applied to a slide's CTA.
     this.container.addEventListener("focus", this.focusCTAHandler, true);
@@ -83,36 +92,44 @@ const EnableCarousel = function (container, options) {
     // we turn the animations off. 
     document.body.addEventListener("keyup", this.keyUpHandler, true);
 
-    // when `useArrowButtons` option is set, we should ensure the first
-    // CTA inside the visible panel gains focus when it first comes into view.
+
     if (this.useArrowButtons) {
+      // when `useArrowButtons` option is set, we should ensure the first
+      // CTA inside the visible panel gains focus when it first comes into view.
       this.container.addEventListener("glider-slide-visible", this.slideVisibleEvent);
       this.container.addEventListener("glider-slide-hidden", this.slideHiddenEvent);
+
+      // when buttons are clicked with a Enter key, prevent the page from scrolling
+      $previousButton.addEventListener('keypress', this.preventSpaceFromScrolling);
+      $nextButton.addEventListener('keypress', this.preventSpaceFromScrolling);
+      $previousButton.addEventListener('keyup', this.preventSpaceFromScrolling);
+      $nextButton.addEventListener('keyup', this.preventSpaceFromScrolling);
     }
   };
 
   this.setSlidesInert = (value, exceptionIndex) => {
     this.slidePanels.forEach((el, i) => {
       if (i !== exceptionIndex) {
-        console.log('xxx');
         el.inert = value;
       }
+
+      el.setAttribute('tabindex', '-1');
     })
   }
 
 
   this.slideHiddenEvent = (e) => {
 
+    console.log('slideHiddenEvent', e.detail.slide);
     const hiddenSlideIndex = e.detail.slide;
-    console.log('hide', hiddenSlideIndex);
     const hiddenSlide = this.container.querySelectorAll(this.slidePanelSelector)[hiddenSlideIndex];
     hiddenSlide.inert = true;
   }
 
   this.slideVisibleEvent = (e) => {
 
+    console.log('slideVisibleEvent', e.detail.slide);
     const visibleSlideIndex = e.detail.slide;
-    console.log('show', visibleSlideIndex);
     const visibleSlide = this.container.querySelectorAll(this.slidePanelSelector)[visibleSlideIndex];
     visibleSlide.inert = false;
     visibleSlide.focus();