Add option data-carousel-hide-arrows-focus

README.md

@@ -79,6 +79,7 @@ __List of all data-attributes__
 - `data-carrousel-span-text-class`: in the `ol` list, the text will be wrapped into a `span` with this class. Example, `data-carrousel-span-text-class="yipikai"` will provide `<a … role="tab"><span class="yipikai">A robust base</span></a>`
 - `data-carrousel-transition`: the value of this attribute will be added as a class on the carrousel container tag `div class="js-carrousel__container"`. And CSS will do the magic to animate it. See three examples of transitions in the demo (“slide”, “fade” and “none”).
 - `data-carrousel-active-slide`: put here the number of the slide you want to display by default for your carrousel.
+- `data-carousel-hide-arrows-focus`: will make next/prev buttons not focusable for keyboard users and not visible for speech synthesis.
 
 
 ## How to create different styles?

bower.json

@@ -3,7 +3,7 @@
   "description": "ES2015 accessible carrousel system, using ARIA (compatible IE9+ when transpiled)",
   "homepage": "https://van11y.net/accessible-carrousel/",
   "main": "van11y-accessible-carrousel-aria.es6.js",
-  "version": "1.2.1,
+  "version": "1.3.0,
   "keywords": [
     "Accessibility",
     "ARIA",

demo/index-fr.html

@@ -82,10 +82,12 @@ <h2>Troisième zone de contenu</h2>
                 data-carrousel-prefix-class="news"
                 data-carrousel-transition="fade"
                 data-carrousel-hx="h2"
-                data-carrousel-span-text="Panneau">
+                data-carrousel-span-text="Panneau"
+                data-carousel-hide-arrows-focus="true">
 
          <div class="js-carrousel__content">
-                <p>Cet exemple a une transition différente (un fondu, spécifié par <code>data-carrousel-transition="fade"</code>).</p>
+                <p>Cet exemple a une transition différente (un fondu, spécifié par <code>data-carrousel-transition="fade"</code>). Et utilise <code>
+                    data-carousel-hide-arrows-focus="true"</code>.</p>
               </div><!--
       --><div class="js-carrousel__content">
                <p>Dans ce cas, le contenu n’a pas de titres, ils seront générés par le script via <code>data-carrousel-hx="h2"</code>.</p>

demo/index.html

@@ -82,10 +82,12 @@ <h2>Third content zone</h2>
                 data-carrousel-prefix-class="news"
                 data-carrousel-transition="fade"
                 data-carrousel-hx="h2"
-                data-carrousel-span-text="Panneau">
+                data-carrousel-span-text="Panneau"
+                data-carousel-hide-arrows-focus="true">
 
          <div class="js-carrousel__content">
-                <p>This example has a different transition (fade in/fade out, specified using <code>data-carrousel-transition="fade"</code>).</p>
+                <p>This example has a different transition (fade in/fade out, specified using <code>data-carrousel-transition="fade"</code>). And uses <code>
+                    data-carousel-hide-arrows-focus="true"</code> option.</p>
               </div><!--
       --><div class="js-carrousel__content">
                <p>In this case, content has no heading, they will be generated by the script using <code>data-carrousel-hx="h2"</code>.</p>

dist/van11y-accessible-carrousel-aria.es6.js

@@ -50,6 +50,7 @@
     const CARROUSEL_DATA_EXISTING_HX = 'data-carrousel-existing-hx';
     const CARROUSEL_DATA_HX = 'data-carrousel-hx';
     const CARROUSEL_DATA_SPAN_TEXT = 'data-carrousel-span-text';
+    const CARROUSEL_DATA_HIDE_ARROWS_FOCUS = 'data-carousel-hide-arrows-focus';
 
     const VISUALLY_HIDDEN_CLASS = 'invisible';
 
@@ -244,6 +245,9 @@
                 // Class for span in controllers
                 let carrouselSpanTextClass = carrouselContainer.hasAttribute(CARROUSEL_DATA_SPAN_TEXT_CLASS) === true ? carrouselContainer.getAttribute(CARROUSEL_DATA_SPAN_TEXT_CLASS) : VISUALLY_HIDDEN_CLASS;
 
+                // hide buttons from focus
+                let carrouselHideArrowsFocus = carrouselContainer.hasAttribute(CARROUSEL_DATA_HIDE_ARROWS_FOCUS) === true ;
+
                 // Next/prev buttons
                 let carrouselButtonPreviousText = carrouselContainer.hasAttribute(CARROUSEL_DATA_BTN_PREVIOUS_TEXT) === true ? carrouselContainer.getAttribute(CARROUSEL_DATA_BTN_PREVIOUS_TEXT) : '';
                 let carrouselButtonPreviousTextFlat = doc.createElement("SPAN");
@@ -351,6 +355,12 @@
                         'id': CARROUSEL_BUTTON_PREVIOUS + '_' + iLisible,
                         'title': carrouselButtonPreviousText
                     });
+                    if ( carrouselHideArrowsFocus ) {
+                        setAttributes(carrouselButtonBefore, {
+                            [ATTR_HIDDEN]: true,
+                            'tabindex': '-1'
+                        });
+                    }
                     addClass(carrouselButtonBefore, CARROUSEL_BUTTON_PREVIOUS);
                     addClass(carrouselButtonBefore, prefixClassName + CARROUSEL_BUTTON_CLASS_SUFFIX);
 
@@ -386,6 +396,12 @@
                         'id': CARROUSEL_BUTTON_NEXT + '_' + iLisible,
                         'title': carrouselButtonNextText
                     });
+                    if ( carrouselHideArrowsFocus ) {
+                        setAttributes(carrouselButtonNext, {
+                            [ATTR_HIDDEN]: true,
+                            'tabindex': '-1'
+                        });
+                    }
                     addClass(carrouselButtonNext, CARROUSEL_BUTTON_NEXT);
                     addClass(carrouselButtonNext, prefixClassName + CARROUSEL_BUTTON_CLASS_SUFFIX);
 

dist/van11y-accessible-carrousel-aria.js

@@ -54,6 +54,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
     var CARROUSEL_DATA_EXISTING_HX = 'data-carrousel-existing-hx';
     var CARROUSEL_DATA_HX = 'data-carrousel-hx';
     var CARROUSEL_DATA_SPAN_TEXT = 'data-carrousel-span-text';
+    var CARROUSEL_DATA_HIDE_ARROWS_FOCUS = 'data-carousel-hide-arrows-focus';
 
     var VISUALLY_HIDDEN_CLASS = 'invisible';
 
@@ -241,6 +242,9 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
             // Class for span in controllers
             var carrouselSpanTextClass = carrouselContainer.hasAttribute(CARROUSEL_DATA_SPAN_TEXT_CLASS) === true ? carrouselContainer.getAttribute(CARROUSEL_DATA_SPAN_TEXT_CLASS) : VISUALLY_HIDDEN_CLASS;
 
+            // hide buttons from focus
+            var carrouselHideArrowsFocus = carrouselContainer.hasAttribute(CARROUSEL_DATA_HIDE_ARROWS_FOCUS) === true;
+
             // Next/prev buttons
             var carrouselButtonPreviousText = carrouselContainer.hasAttribute(CARROUSEL_DATA_BTN_PREVIOUS_TEXT) === true ? carrouselContainer.getAttribute(CARROUSEL_DATA_BTN_PREVIOUS_TEXT) : '';
             var carrouselButtonPreviousTextFlat = doc.createElement("SPAN");
@@ -338,16 +342,21 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
                 // button
                 var carrouselButtonBefore = document.createElement("BUTTON");
                 setAttributes(carrouselButtonBefore, (_setAttributes8 = {}, _defineProperty(_setAttributes8, ATTR_TYPE, ATTR_BUTTON), _defineProperty(_setAttributes8, 'id', CARROUSEL_BUTTON_PREVIOUS + '_' + iLisible), _defineProperty(_setAttributes8, 'title', carrouselButtonPreviousText), _setAttributes8));
+                if (carrouselHideArrowsFocus) {
+                    var _setAttributes9;
+
+                    setAttributes(carrouselButtonBefore, (_setAttributes9 = {}, _defineProperty(_setAttributes9, ATTR_HIDDEN, true), _defineProperty(_setAttributes9, 'tabindex', '-1'), _setAttributes9));
+                }
                 addClass(carrouselButtonBefore, CARROUSEL_BUTTON_PREVIOUS);
                 addClass(carrouselButtonBefore, prefixClassName + CARROUSEL_BUTTON_CLASS_SUFFIX);
 
                 carrouselButtonBefore = carrouselButtonContainerBefore.appendChild(carrouselButtonBefore);
 
                 if (carrouselButtonPreviousImage !== '') {
-                    var _setAttributes9;
+                    var _setAttributes10;
 
                     var carrouselButtonImageBefore = document.createElement("IMG");
-                    setAttributes(carrouselButtonImageBefore, (_setAttributes9 = {}, _defineProperty(_setAttributes9, ATTR_SRC, carrouselButtonPreviousImage), _defineProperty(_setAttributes9, ATTR_ALT, carrouselButtonPreviousTextFlat), _defineProperty(_setAttributes9, ATTR_CLASS, prefixClassName + CARROUSEL_BUTTON_IMG_CLASS_SUFFIX), _setAttributes9));
+                    setAttributes(carrouselButtonImageBefore, (_setAttributes10 = {}, _defineProperty(_setAttributes10, ATTR_SRC, carrouselButtonPreviousImage), _defineProperty(_setAttributes10, ATTR_ALT, carrouselButtonPreviousTextFlat), _defineProperty(_setAttributes10, ATTR_CLASS, prefixClassName + CARROUSEL_BUTTON_IMG_CLASS_SUFFIX), _setAttributes10));
                     carrouselButtonImageBefore = carrouselButtonBefore.appendChild(carrouselButtonImageBefore);
                 } else {
                     carrouselButtonBefore.innerHTML = carrouselButtonPreviousText;
@@ -357,7 +366,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
             }
 
             if (carrouselButtonNextText !== '') {
-                var _setAttributes10;
+                var _setAttributes11;
 
                 var carrouselButtonContainerNext = document.createElement("DIV");
 
@@ -368,17 +377,22 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
                 // button
                 var carrouselButtonNext = document.createElement("BUTTON");
-                setAttributes(carrouselButtonNext, (_setAttributes10 = {}, _defineProperty(_setAttributes10, ATTR_TYPE, ATTR_BUTTON), _defineProperty(_setAttributes10, 'id', CARROUSEL_BUTTON_NEXT + '_' + iLisible), _defineProperty(_setAttributes10, 'title', carrouselButtonNextText), _setAttributes10));
+                setAttributes(carrouselButtonNext, (_setAttributes11 = {}, _defineProperty(_setAttributes11, ATTR_TYPE, ATTR_BUTTON), _defineProperty(_setAttributes11, 'id', CARROUSEL_BUTTON_NEXT + '_' + iLisible), _defineProperty(_setAttributes11, 'title', carrouselButtonNextText), _setAttributes11));
+                if (carrouselHideArrowsFocus) {
+                    var _setAttributes12;
+
+                    setAttributes(carrouselButtonNext, (_setAttributes12 = {}, _defineProperty(_setAttributes12, ATTR_HIDDEN, true), _defineProperty(_setAttributes12, 'tabindex', '-1'), _setAttributes12));
+                }
                 addClass(carrouselButtonNext, CARROUSEL_BUTTON_NEXT);
                 addClass(carrouselButtonNext, prefixClassName + CARROUSEL_BUTTON_CLASS_SUFFIX);
 
                 carrouselButtonNext = carrouselButtonContainerNext.appendChild(carrouselButtonNext);
 
                 if (carrouselButtonNextImage !== '') {
-                    var _setAttributes11;
+                    var _setAttributes13;
 
                     var carrouselButtonImageNext = document.createElement("IMG");
-                    setAttributes(carrouselButtonImageNext, (_setAttributes11 = {}, _defineProperty(_setAttributes11, ATTR_SRC, carrouselButtonNextImage), _defineProperty(_setAttributes11, ATTR_ALT, carrouselButtonNextTextFlat), _defineProperty(_setAttributes11, ATTR_CLASS, prefixClassName + CARROUSEL_BUTTON_IMG_CLASS_SUFFIX), _setAttributes11));
+                    setAttributes(carrouselButtonImageNext, (_setAttributes13 = {}, _defineProperty(_setAttributes13, ATTR_SRC, carrouselButtonNextImage), _defineProperty(_setAttributes13, ATTR_ALT, carrouselButtonNextTextFlat), _defineProperty(_setAttributes13, ATTR_CLASS, prefixClassName + CARROUSEL_BUTTON_IMG_CLASS_SUFFIX), _setAttributes13));
                     carrouselButtonImageNext = carrouselButtonNext.appendChild(carrouselButtonImageNext);
                 } else {
                     carrouselButtonNext.innerHTML = carrouselButtonNextText;