fix(news-ticker): Fix accessibility issues - FRONT-3634 (#2534)

Co-authored-by: Romain Emery <emery.romain@gmail.com>
ec-europa · May 30, 2022 · ac82e84 · ac82e84
1 parent 47db787
commit ac82e84
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 28 deletions.
diff --git a/src/implementations/twig/components/news-ticker/__snapshots__/news-ticker.test.js.snap b/src/implementations/twig/components/news-ticker/__snapshots__/news-ticker.test.js.snap
@@ -18,7 +18,6 @@ exports[`News ticker Default renders correctly 1`] = `
           id="news-ticker-example-content"
         >
           <li
-            aria-hidden="true"
             class="ecl-news-ticker__slide"
           >
             <a
@@ -30,7 +29,6 @@ exports[`News ticker Default renders correctly 1`] = `
             </a>
           </li>
           <li
-            aria-hidden="true"
             class="ecl-news-ticker__slide"
           >
             <a
@@ -42,7 +40,6 @@ exports[`News ticker Default renders correctly 1`] = `
             </a>
           </li>
           <li
-            aria-hidden="true"
             class="ecl-news-ticker__slide"
           >
             <a
@@ -54,7 +51,6 @@ exports[`News ticker Default renders correctly 1`] = `
             </a>
           </li>
           <li
-            aria-hidden="true"
             class="ecl-news-ticker__slide"
           >
             <a
@@ -66,7 +62,6 @@ exports[`News ticker Default renders correctly 1`] = `
             </a>
           </li>
           <li
-            aria-hidden="true"
             class="ecl-news-ticker__slide"
           >
             <a
@@ -218,7 +213,6 @@ exports[`News ticker Default renders correctly with extra attributes 1`] = `
           id="news-ticker-example-content"
         >
           <li
-            aria-hidden="true"
             class="ecl-news-ticker__slide"
           >
             <a
@@ -230,7 +224,6 @@ exports[`News ticker Default renders correctly with extra attributes 1`] = `
             </a>
           </li>
           <li
-            aria-hidden="true"
             class="ecl-news-ticker__slide"
           >
             <a
@@ -242,7 +235,6 @@ exports[`News ticker Default renders correctly with extra attributes 1`] = `
             </a>
           </li>
           <li
-            aria-hidden="true"
             class="ecl-news-ticker__slide"
           >
             <a
@@ -254,7 +246,6 @@ exports[`News ticker Default renders correctly with extra attributes 1`] = `
             </a>
           </li>
           <li
-            aria-hidden="true"
             class="ecl-news-ticker__slide"
           >
             <a
@@ -266,7 +257,6 @@ exports[`News ticker Default renders correctly with extra attributes 1`] = `
             </a>
           </li>
           <li
-            aria-hidden="true"
             class="ecl-news-ticker__slide"
           >
             <a
@@ -416,7 +406,6 @@ exports[`News ticker Default renders correctly with extra class names 1`] = `
           id="news-ticker-example-content"
         >
           <li
-            aria-hidden="true"
             class="ecl-news-ticker__slide"
           >
             <a
@@ -428,7 +417,6 @@ exports[`News ticker Default renders correctly with extra class names 1`] = `
             </a>
           </li>
           <li
-            aria-hidden="true"
             class="ecl-news-ticker__slide"
           >
             <a
@@ -440,7 +428,6 @@ exports[`News ticker Default renders correctly with extra class names 1`] = `
             </a>
           </li>
           <li
-            aria-hidden="true"
             class="ecl-news-ticker__slide"
           >
             <a
@@ -452,7 +439,6 @@ exports[`News ticker Default renders correctly with extra class names 1`] = `
             </a>
           </li>
           <li
-            aria-hidden="true"
             class="ecl-news-ticker__slide"
           >
             <a
@@ -464,7 +450,6 @@ exports[`News ticker Default renders correctly with extra class names 1`] = `
             </a>
           </li>
           <li
-            aria-hidden="true"
             class="ecl-news-ticker__slide"
           >
             <a

diff --git a/src/implementations/twig/components/news-ticker/news-ticker.html.twig b/src/implementations/twig/components/news-ticker/news-ticker.html.twig
@@ -70,7 +70,7 @@
       <ul class="ecl-news-ticker__slides" id="{{ _aria_controls }}">
       {% for _item in _items %}
         {% if _item.link is not empty %}
-          <li class="ecl-news-ticker__slide" aria-hidden="true">
+          <li class="ecl-news-ticker__slide">
           {% include '@ecl/link/link.html.twig' with{
             link: {
               label: _item.content,

diff --git a/src/implementations/vanilla/components/news-ticker/_news-ticker.scss b/src/implementations/vanilla/components/news-ticker/_news-ticker.scss
@@ -69,7 +69,6 @@ $_btn-padding-horizontal: map.get(theme.$spacing, 's') !default;
 
 .ecl-news-ticker__counter {
   color: $_counter-color;
-  display: inline-flex;
   flex-grow: 1;
   font: map.get(theme.$font, 'm');
   font-weight: bold;
@@ -97,6 +96,10 @@ $_btn-padding-horizontal: map.get(theme.$spacing, 's') !default;
     padding: calc(#{$_btn-padding-vertical} - #{$_btn-outline-width})
       calc(#{$_btn-padding-horizontal} - #{$_btn-outline-width});
   }
+
+  .ecl-button__icon--after {
+    margin: 0;
+  }
 }
 
 /* stylelint-disable-next-line order/order */

diff --git a/src/implementations/vanilla/components/news-ticker/news-ticker.js b/src/implementations/vanilla/components/news-ticker/news-ticker.js
@@ -82,6 +82,8 @@ export class NewsTicker {
 
     // Bind `this` for use in callbacks
     this.handleClickOnToggle = this.handleClickOnToggle.bind(this);
+    this.handleHoverOnTicker = this.handleHoverOnTicker.bind(this);
+    this.handleHoverOffTicker = this.handleHoverOffTicker.bind(this);
     this.shiftSlide = this.shiftSlide.bind(this);
     this.checkIndex = this.checkIndex.bind(this);
     this.moveSlides = this.moveSlides.bind(this);
@@ -146,6 +148,9 @@ export class NewsTicker {
       window.addEventListener('resize', this.handleResize);
     }
 
+    this.element.addEventListener('mouseover', this.handleHoverOnTicker);
+    this.element.addEventListener('mouseout', this.handleHoverOffTicker);
+
     // Set ecl initialized attribute
     this.element.setAttribute('data-ecl-auto-initialized', 'true');
   }
@@ -177,6 +182,8 @@ export class NewsTicker {
       window.removeEventListener('resize', this.handleResize);
     }
     if (this.element) {
+      this.element.removeEventListener('mouseover', this.handleHoverOnTicker);
+      this.element.removeEventListener('mouseout', this.handleHoverOffTicker);
       this.element.removeAttribute('data-ecl-auto-initialized');
     }
   }
@@ -225,17 +232,6 @@ export class NewsTicker {
     const currentSlide = queryOne(this.currentSlideClass, this.element);
     currentSlide.textContent = this.index;
 
-    // Update slides
-    if (this.slides) {
-      this.slides.forEach((slide, index) => {
-        if (this.index === index) {
-          slide.removeAttribute('aria-hidden', 'true');
-        } else {
-          slide.setAttribute('aria-hidden', 'true');
-        }
-      });
-    }
-
     this.allowShift = true;
   }
 
@@ -266,6 +262,26 @@ export class NewsTicker {
     useNode.setAttribute('xlink:href', newXlinkHref);
   }
 
+  /**
+   * Hover on ticker.
+   */
+  handleHoverOnTicker() {
+    clearInterval(this.autoPlayInterval);
+    return this;
+  }
+
+  /**
+   * Hover out ticker.
+   */
+  handleHoverOffTicker() {
+    if (this.autoPlay) {
+      this.autoPlayInterval = setInterval(() => {
+        this.shiftSlide(1);
+      }, 5000);
+    }
+    return this;
+  }
+
   /**
    * Resize Slides container at the height of the highest slide.
    */