Multiples feature

- added a class on modal tooltip container - 1 new demo! - Added data-tooltip-focus-toid attribute (to give focus to an element in modal tooltip) + update a demo to show the option - Update package-lock.json
nico3333fr · Apr 2, 2018 · e351809 · e351809
1 parent f9bf571
commit e351809
Show file tree

Hide file tree

Showing 11 changed files with 167 additions and 72 deletions.
diff --git a/README.md b/README.md
@@ -41,12 +41,15 @@ Use `data-tooltip-text` or `data-tooltip-content-id` attributes to insert conten
 - Attribute <code>data-tooltip-close-text</code>: the text of the close button in your dialog tooltip.
 - Attribute <code>data-tooltip-close-title</code>: the title attribute of the close button in your dialog tooltip.
 - Attribute <code>data-tooltip-close-img</code>: a path to a valid image for the close button.
+- Attribute <code>data-tooltip-focus-toid</code>: the `id` of the element in the modal tooltip you want to give the focus to, when loading the modal tooltip (closing button if not specified).
 
 Remember there are some demos, it will be easier to understand: <a href="https://van11y.net/downloads/modal-tooltip/demo/index.html">Demo of accessible modal tooltip</a>
 
 The script is launched when the page is loaded. If you need to execute it on AJAX-inserted content, you may use for example on `<div id="newContent">your modal tooltip launcher source</div>`:
 
-```van11yAccessibleModalTooltipAria(document.getElementById('newContent'));```
+```van11yAccessibleModalTooltipAria(document.getElementById('newContent')[, addListeners]);```
+
+`addListeners` is a facultative boolean (by default set to `true`) to add modal tooltip listeners (should be set up only the first time in most of the cases).
 
 ## Minimal styling classes
 

diff --git a/bower.json b/bower.json
@@ -3,7 +3,7 @@
   "description": "ES2015 accessible modal tooltip system, using ARIA (compatible IE9+ when transpiled)",
   "homepage": "https://van11y.net/accessible-modal-tooltip/",
   "main": "van11y-accessible-modal-tooltip-aria.es6.js",
-  "version": "2.1.0",
+  "version": "2.3.0",
   "keywords": [
     "Accessibility",
     "ARIA",

diff --git a/demo/index-fr.html b/demo/index-fr.html
@@ -53,13 +53,18 @@ <h1 class="aligncenter">Démo&#160;: info-bulle (tooltip) modale accessible util
       <p>Waouh, on peut prendre le contenu d’une <code tabindex="0">div</code> cachée (et tester le piège à focus clavier).</p>
     </div>
 
+ <p>
+ 	<button class="js-tooltip button" data-tooltip-prefix-class="simple-left-animated" data-tooltip-text="C’est rapide et beau !" data-tooltip-title="Cool" data-tooltip-close-text="Fermer" data-tooltip-close-title="Fermer cela">
+    Montre-moi en un, mais animé
+  </button>
+ </p>
 
- <p><button class="js-tooltip button" data-tooltip-prefix-class="left-tooltip" data-tooltip-content-id="informations_other" data-tooltip-title="C’est facile à customiser" data-tooltip-close-text="Fermer" data-tooltip-close-title="Fermer cette fenêtre" data-tooltip-close-img="blackcancel.svg">C’est si facile</button></p>
+ <p><button class="js-tooltip button" data-tooltip-prefix-class="left-tooltip" data-tooltip-content-id="informations_other" data-tooltip-title="C’est facile à customiser" data-tooltip-close-text="Fermer" data-tooltip-close-title="Fermer cette fenêtre" data-tooltip-close-img="blackcancel.svg" data-tooltip-focus-toid="gimmefocusplease">C’est si facile (donne le focus à un élément dans le tooltip modal)</button></p>
 
 
   <div id="informations_other" class="hidden">
      <p>C’est si facile.</p>
-     <p>Styler des composants de modale peut être fait pour des sites responsive (essayez de redimensionner).</p>
+     <p tabindex="0" id="gimmefocusplease">Styler des composants de modale peut être fait pour des sites responsive (essayez de redimensionner).</p>
     </div>
 
   <p><a href="#cc_content" class="js-tooltip cc_example" data-tooltip-prefix-class="fixed-tooltip" data-tooltip-content-id="cc_content" data-tooltip-title="Cool&#8239;!" data-tooltip-close-text="Fermer" data-tooltip-close-title="Fermer cette info-bulle" data-tooltip-close-img="close.svg" lang="en" xml:lang="en">C<span class="invisible">ookie </span>C<span class="invisible">ontrol</span>&#8239;?</a></p>

diff --git a/demo/index.html b/demo/index.html
@@ -53,13 +53,18 @@ <h1 class="aligncenter">Demo: accessible modal tooltip using <abbr title="Access
       <p>Woot, you can take the content of a hidden <code tabindex="0">div</code> (and test the focus trap).</p>
     </div>
 
+ <p>
+ 	<button class="js-tooltip button" data-tooltip-prefix-class="simple-left-animated" data-tooltip-text="It is fast and beautiful!" data-tooltip-title="Cool" data-tooltip-close-text="Close it" data-tooltip-close-title="Close it please">
+    Show me one, but animated
+  </button>
+ </p>
 
- <p><button class="js-tooltip button" data-tooltip-prefix-class="left-tooltip" data-tooltip-content-id="informations_other" data-tooltip-title="It’s easy to customize" data-tooltip-close-text="Close it" data-tooltip-close-title="Close this window" data-tooltip-close-img="blackcancel.svg">It’s easy to customize</button></p>
+ <p><button class="js-tooltip button" data-tooltip-prefix-class="left-tooltip" data-tooltip-content-id="informations_other" data-tooltip-title="It’s easy to customize" data-tooltip-close-text="Close it" data-tooltip-close-title="Close this window" data-tooltip-close-img="blackcancel.svg" data-tooltip-focus-toid="gimmefocusplease">It’s easy to customize (and giving focus to an element in the modal tooltip)</button></p>
 
 
   <div id="informations_other" class="hidden">
      <p>It’s so easy.</p>
-     <p>Styling modal components can be made for responsive websites (try to resize).</p>
+     <p tabindex="0" id="gimmefocusplease">Styling modal components can be made for responsive websites (try to resize).</p>
     </div>
 
   <p><a href="#cc_content" class="js-tooltip cc_example" data-tooltip-prefix-class="fixed-tooltip" data-tooltip-content-id="cc_content" data-tooltip-title="Cool!" data-tooltip-close-text="Close it" data-tooltip-close-title="Close this window" data-tooltip-close-img="close.svg">C<span class="invisible">ookie </span>C<span class="invisible">ontrol</span>?</a></p>

diff --git a/demo/styles.css b/demo/styles.css
@@ -168,11 +168,13 @@ dialog {
 }
 
 .simple-left-container,
+.simple-left-animated-container,
 .left-tooltip-container {
   position: relative;
 }
 
-.simple-left-tooltip {
+.simple-left-tooltip,
+.simple-left-animated-tooltip {
   position: absolute;
   z-index: 666;
   top: 80%;
@@ -186,14 +188,50 @@ dialog {
   text-align: left;
 }
 
-.simple-left-tooltip__title {
+.simple-left-animated-tooltip {
+  -webkit-animation: pop ease .5s 1 normal ;
+          animation: pop ease .5s 1 normal ;
+}
+@-webkit-keyframes pop {
+  0% {
+    opacity: 0;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+	  -webkit-transform: scale(0);
+	          transform: scale(0);
+  }
+  100% {
+    opacity: 1;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+	-webkit-transform: scale(1);
+	        transform: scale(1);
+  }
+}
+@keyframes pop {
+  0% {
+    opacity: 0;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+	  -webkit-transform: scale(0);
+	          transform: scale(0);
+  }
+  100% {
+    opacity: 1;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+	-webkit-transform: scale(1);
+	        transform: scale(1);
+  }
+}
+
+.simple-left-tooltip__title,
+.simple-left-animated-tooltip__title {
   margin: 0;
   line-height: 1;
 }
-.simple-left-tooltip p {
+.simple-left-tooltip p,
+.simple-left-animated-tooltip p {
   font-size: 1em;
 }
-.simple-left-tooltip__close {
+.simple-left-tooltip__close,
+.simple-left-animated-tooltip__close {
   float: right;
   border: 0;
   /** fix typo inputs **/
@@ -205,11 +243,16 @@ dialog {
 }
 .simple-left-tooltip__close:focus,
 .simple-left-tooltip__close:hover,
-.simple-left-tooltip__close:active {
+.simple-left-tooltip__close:active,
+.simple-left-animated-tooltip__close:focus,
+.simple-left-animated-tooltip__close:hover,
+.simple-left-animated-tooltip__close:active {
   outline: 1px dotted #fff;  
 }
 .simple-left-tooltip__close:hover,
-.simple-left-tooltip__close:active {
+.simple-left-tooltip__close:active,
+.simple-left-animated-tooltip__close:hover,
+.simple-left-animated-tooltip__close:active  {
   background: #4d287f;
 }
 

diff --git a/dist/van11y-accessible-modal-tooltip-aria.es6.js b/dist/van11y-accessible-modal-tooltip-aria.es6.js
@@ -20,6 +20,7 @@
     const MODAL_TOOLTIP_TEXT_ATTR = 'data-tooltip-text';
     const MODAL_TOOLTIP_CONTENT_ID_ATTR = 'data-tooltip-content-id';
     const MODAL_TOOLTIP_TITLE_ATTR = 'data-tooltip-title';
+    const MODAL_TOOLTIP_TO_ATTR = 'data-tooltip-focus-toid';
     const MODAL_TOOLTIP_CLOSE_TEXT_ATTR = 'data-tooltip-close-text';
     const MODAL_TOOLTIP_CLOSE_TITLE_ATTR = 'data-tooltip-close-title';
     const MODAL_TOOLTIP_CLOSE_IMG_ATTR = 'data-tooltip-close-img';
@@ -33,6 +34,7 @@
     const MODAL_TOOLTIP_BUTTON_CONTENT_BACK_ID = 'data-content-back-id';
     const MODAL_TOOLTIP_BUTTON_FOCUS_BACK_ID = 'data-focus-back';
 
+    const MODAL_TOOLTIP_CONTENT_WRAPPER_CLASS_SUFFIX = 'tooltip__wrapper';
     const MODAL_TOOLTIP_CONTENT_CLASS_SUFFIX = 'tooltip__content';
     const MODAL_TOOLTIP_CONTENT_JS_ID = 'js-tooltip-content';
 
@@ -116,6 +118,7 @@
 
         let id = MODAL_TOOLTIP_DIALOG_JS_ID;
         let modalTooltipClassName = config.modalTooltipPrefixClass + MODAL_TOOLTIP_CLASS_SUFFIX;
+        let modalTooltipClassWrapper = config.modalTooltipPrefixClass + MODAL_TOOLTIP_CONTENT_WRAPPER_CLASS_SUFFIX;
         let buttonCloseClassName = config.modalTooltipPrefixClass + MODAL_TOOLTIP_BUTTON_CLASS_SUFFIX;
         let buttonCloseInner = config.modalTooltipCloseImgPath ?
             `<img src="${config.modalTooltipCloseImgPath}" alt="${config.modalTooltipCloseText}" class="${MODAL_TOOLTIP_CLOSE_IMG_CLASS_SUFFIX}" />` :
@@ -152,8 +155,8 @@
         }
 
 
-        return `<dialog id="${id}" class="${modalTooltipClassName} ${MODAL_TOOLTIP_DIALOG_JS_CLASS}" ${ATTR_ROLE}="${MODAL_TOOLTIP_ROLE}" ${ATTR_OPEN}  ${ATTR_LABELLEDBY}="${MODAL_TOOLTIP_TITLE_ID}">
-                  <div role="document">
+        return `<dialog id="${id}" class="${modalTooltipClassName} ${MODAL_TOOLTIP_DIALOG_JS_CLASS}" ${ATTR_ROLE}="${MODAL_TOOLTIP_ROLE}" ${ATTR_OPEN} ${ATTR_LABELLEDBY}="${MODAL_TOOLTIP_TITLE_ID}">
+                  <div role="document" class="${modalTooltipClassWrapper}">
                     ${button_close}
                     <div class="${contentClassName}">
                       ${title}
@@ -237,6 +240,7 @@
                             let modalTooltipCloseText = modalTooltipLauncher.hasAttribute(MODAL_TOOLTIP_CLOSE_TEXT_ATTR) === true ? modalTooltipLauncher.getAttribute(MODAL_TOOLTIP_CLOSE_TEXT_ATTR) : '';
                             let modalTooltipCloseTitle = modalTooltipLauncher.hasAttribute(MODAL_TOOLTIP_CLOSE_TITLE_ATTR) === true ? modalTooltipLauncher.getAttribute(MODAL_TOOLTIP_CLOSE_TITLE_ATTR) : modalTooltipCloseText;
                             let modalTooltipCloseImgPath = modalTooltipLauncher.hasAttribute(MODAL_TOOLTIP_CLOSE_IMG_ATTR) === true ? modalTooltipLauncher.getAttribute(MODAL_TOOLTIP_CLOSE_IMG_ATTR) : '';
+                            let modalTooltipGiveFocusToId = modalTooltipLauncher.hasAttribute(MODAL_TOOLTIP_TO_ATTR) === true ? modalTooltipLauncher.getAttribute(MODAL_TOOLTIP_TO_ATTR) : '';
 
                             let modalTooltip = findById(MODAL_TOOLTIP_DIALOG_JS_ID);
                             // if already a modal tooltip opened, we close it
@@ -277,9 +281,18 @@
                             }, 50);
                             // fix for Chrome bug resolution
                             setTimeout(function() {
-                                // give focus to close button
+                                // give focus to close button or specified element
                                 let closeButton = findById(MODAL_TOOLTIP_BUTTON_JS_ID)
-                                closeButton.focus();
+                                if (modalTooltipGiveFocusToId !== '') {
+                                    let focusTo = findById(modalTooltipGiveFocusToId);
+                                    if (focusTo) {
+                                        focusTo.focus();
+                                    } else {
+                                        closeButton.focus();
+                                    }
+                                } else {
+                                    closeButton.focus();
+                                }
                             }, 51);
 
                             // add class is-active to launcher

diff --git a/dist/van11y-accessible-modal-tooltip-aria.js b/dist/van11y-accessible-modal-tooltip-aria.js
@@ -22,6 +22,7 @@
     var MODAL_TOOLTIP_TEXT_ATTR = 'data-tooltip-text';
     var MODAL_TOOLTIP_CONTENT_ID_ATTR = 'data-tooltip-content-id';
     var MODAL_TOOLTIP_TITLE_ATTR = 'data-tooltip-title';
+    var MODAL_TOOLTIP_TO_ATTR = 'data-tooltip-focus-toid';
     var MODAL_TOOLTIP_CLOSE_TEXT_ATTR = 'data-tooltip-close-text';
     var MODAL_TOOLTIP_CLOSE_TITLE_ATTR = 'data-tooltip-close-title';
     var MODAL_TOOLTIP_CLOSE_IMG_ATTR = 'data-tooltip-close-img';
@@ -35,6 +36,7 @@
     var MODAL_TOOLTIP_BUTTON_CONTENT_BACK_ID = 'data-content-back-id';
     var MODAL_TOOLTIP_BUTTON_FOCUS_BACK_ID = 'data-focus-back';
 
+    var MODAL_TOOLTIP_CONTENT_WRAPPER_CLASS_SUFFIX = 'tooltip__wrapper';
     var MODAL_TOOLTIP_CONTENT_CLASS_SUFFIX = 'tooltip__content';
     var MODAL_TOOLTIP_CONTENT_JS_ID = 'js-tooltip-content';
 
@@ -119,6 +121,7 @@
 
         var id = MODAL_TOOLTIP_DIALOG_JS_ID;
         var modalTooltipClassName = config.modalTooltipPrefixClass + MODAL_TOOLTIP_CLASS_SUFFIX;
+        var modalTooltipClassWrapper = config.modalTooltipPrefixClass + MODAL_TOOLTIP_CONTENT_WRAPPER_CLASS_SUFFIX;
         var buttonCloseClassName = config.modalTooltipPrefixClass + MODAL_TOOLTIP_BUTTON_CLASS_SUFFIX;
         var buttonCloseInner = config.modalTooltipCloseImgPath ? '<img src="' + config.modalTooltipCloseImgPath + '" alt="' + config.modalTooltipCloseText + '" class="' + MODAL_TOOLTIP_CLOSE_IMG_CLASS_SUFFIX + '" />' : '<span class="' + MODAL_TOOLTIP_CLOSE_TEXT_CLASS_SUFFIX + '">\n              ' + config.modalTooltipCloseText + '\n             </span>';
         var contentClassName = config.modalTooltipPrefixClass + MODAL_TOOLTIP_CONTENT_CLASS_SUFFIX;
@@ -140,7 +143,7 @@
             content = '<' + MODAL_TOOLTIP_CONTENT_TEXT_ONLY_WRAPPER + '>\n                            ' + content + '\n                       </' + MODAL_TOOLTIP_CONTENT_TEXT_ONLY_WRAPPER + '>';
         }
 
-        return '<dialog id="' + id + '" class="' + modalTooltipClassName + ' ' + MODAL_TOOLTIP_DIALOG_JS_CLASS + '" ' + ATTR_ROLE + '="' + MODAL_TOOLTIP_ROLE + '" ' + ATTR_OPEN + '  ' + ATTR_LABELLEDBY + '="' + MODAL_TOOLTIP_TITLE_ID + '">\n                  <div role="document">\n                    ' + button_close + '\n                    <div class="' + contentClassName + '">\n                      ' + title + '\n                      ' + content + '\n                    </div>\n                  </div>\n                </dialog>';
+        return '<dialog id="' + id + '" class="' + modalTooltipClassName + ' ' + MODAL_TOOLTIP_DIALOG_JS_CLASS + '" ' + ATTR_ROLE + '="' + MODAL_TOOLTIP_ROLE + '" ' + ATTR_OPEN + ' ' + ATTR_LABELLEDBY + '="' + MODAL_TOOLTIP_TITLE_ID + '">\n                  <div role="document" class="' + modalTooltipClassWrapper + '">\n                    ' + button_close + '\n                    <div class="' + contentClassName + '">\n                      ' + title + '\n                      ' + content + '\n                    </div>\n                  </div>\n                </dialog>';
     };
 
     var closeModalTooltip = function closeModalTooltip(config) {
@@ -210,6 +213,7 @@
                             var modalTooltipCloseText = modalTooltipLauncher.hasAttribute(MODAL_TOOLTIP_CLOSE_TEXT_ATTR) === true ? modalTooltipLauncher.getAttribute(MODAL_TOOLTIP_CLOSE_TEXT_ATTR) : '';
                             var modalTooltipCloseTitle = modalTooltipLauncher.hasAttribute(MODAL_TOOLTIP_CLOSE_TITLE_ATTR) === true ? modalTooltipLauncher.getAttribute(MODAL_TOOLTIP_CLOSE_TITLE_ATTR) : modalTooltipCloseText;
                             var modalTooltipCloseImgPath = modalTooltipLauncher.hasAttribute(MODAL_TOOLTIP_CLOSE_IMG_ATTR) === true ? modalTooltipLauncher.getAttribute(MODAL_TOOLTIP_CLOSE_IMG_ATTR) : '';
+                            var modalTooltipGiveFocusToId = modalTooltipLauncher.hasAttribute(MODAL_TOOLTIP_TO_ATTR) === true ? modalTooltipLauncher.getAttribute(MODAL_TOOLTIP_TO_ATTR) : '';
 
                             var modalTooltip = findById(MODAL_TOOLTIP_DIALOG_JS_ID);
                             // if already a modal tooltip opened, we close it
@@ -249,9 +253,18 @@
                             }, 50);
                             // fix for Chrome bug resolution
                             setTimeout(function () {
-                                // give focus to close button
+                                // give focus to close button or specified element
                                 var closeButton = findById(MODAL_TOOLTIP_BUTTON_JS_ID);
-                                closeButton.focus();
+                                if (modalTooltipGiveFocusToId !== '') {
+                                    var focusTo = findById(modalTooltipGiveFocusToId);
+                                    if (focusTo) {
+                                        focusTo.focus();
+                                    } else {
+                                        closeButton.focus();
+                                    }
+                                } else {
+                                    closeButton.focus();
+                                }
                             }, 51);
 
                             // add class is-active to launcher