Add API to apply modal to elements or AJAX

nico3333fr · Oct 26, 2017 · 8c8d138 · 8c8d138
1 parent e7c31a5
commit 8c8d138
Show file tree

Hide file tree

Showing 9 changed files with 1,471 additions and 1,457 deletions.
diff --git a/README.md b/README.md
@@ -37,7 +37,7 @@ __Conventions__
 Then, follow the conventions given in this minimal example (in bold).
 
 - use classes needed (```js-tabs```, ```js-tablist```, ```js-tablist__item```, ```js-tablist__link```, ```js-tabcontent```)
-- be careful to use the convention in the links ```a href="#id_first" id="label_id_first"```
+- be careful to use the convention in the links ```a href="#id_first"```
 - check that your anchors are working.
 - for accessibility purposes (for VoiceOver), the plugin has to give focus to ```hx``` (```h2```, ```h3```, ```h4```, etc.) in tab contents.
 
@@ -51,10 +51,10 @@ Example without ```hx```:
 <div class="js-tabs">
   <ul class="js-tablist" data-hx="h2">
    <li class="js-tablist__item">
-    <a href="#id_first" id="label_id_first" class="js-tablist__link">1st tab</a>
+    <a href="#id_first" class="js-tablist__link">1st tab</a>
    </li>
    <li class="js-tablist__item">
-    <a href="#id_second" id="label_id_second" class="js-tablist__link">2nd tab</a>
+    <a href="#id_second" class="js-tablist__link">2nd tab</a>
    </li>
   </ul>
  <div id="id_first" class="js-tabcontent">
@@ -70,10 +70,10 @@ Example with ```hx```:
 <div class="js-tabs">
   <ul class="js-tablist" data-existing-hx="h2">
    <li class="js-tablist__item">
-    <a href="#id_first" id="label_id_first" class="js-tablist__link">1st tab</a>
+    <a href="#id_first" class="js-tablist__link">1st tab</a>
    </li>
    <li class="js-tablist__item">
-    <a href="#id_second" id="label_id_second" class="js-tablist__link">2nd tab</a>
+    <a href="#id_second" class="js-tablist__link">2nd tab</a>
    </li>
   </ul>
  <div id="id_first" class="js-tabcontent">
@@ -87,6 +87,10 @@ Example with ```hx```:
 </div>
 ```
 
+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 tab panel source</div>`:
+
+```van11yAccessibleTabPanelAria(document.getElementById('newContent'));```
+
 ## Keyboard shortcuts
 
 If you focus on the tabs “buttons”:

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

diff --git a/demo/index-fr.html b/demo/index-fr.html
@@ -45,13 +45,13 @@ <h1 class="aligncenter">Démos&#160;: Système d’onglets accessibles avec <abb
  <div class="js-tabs" data-existing-hx="h2" data-tabs-prefix-class="example-tabs">
   <ul class="js-tablist">
    <li class="js-tablist__item">
-    <a href="#id_first" id="label_id_first" class="js-tablist__link">1er onglet</a>
+    <a href="#id_first" class="js-tablist__link">1er onglet</a>
    </li>
    <li class="js-tablist__item">
-    <a href="#id_second" id="label_id_second" class="js-tablist__link">2e onglet</a>
+    <a href="#id_second" class="js-tablist__link">2e onglet</a>
    </li>
    <li class="js-tablist__item">
-    <a href="#id_third" id="label_id_third" class="js-tablist__link">3e onglet</a>
+    <a href="#id_third" class="js-tablist__link">3e onglet</a>
    </li>
   </ul>
  <div id="id_first" class="js-tabcontent">
@@ -73,13 +73,13 @@ <h2>Un autre titre</h2>
  <div class="js-tabs" data-existing-hx="h2" data-tabs-prefix-class="example-tabs">
   <ul class="js-tablist">
    <li class="js-tablist__item">
-    <a href="#id_fourth" id="label_id_fourth" class="js-tablist__link">1er onglet</a>
+    <a href="#id_fourth" class="js-tablist__link">1er onglet</a>
    </li>
    <li class="js-tablist__item">
-    <a href="#id_fifth" id="label_id_fifth" class="js-tablist__link" data-selected="1">2e onglet (sélectionné)</a>
+    <a href="#id_fifth" class="js-tablist__link" data-selected="1">2e onglet (sélectionné)</a>
    </li>
    <li class="js-tablist__item">
-    <a href="#id_sixth" id="label_id_sixth" class="js-tablist__link">3e onglet</a>
+    <a href="#id_sixth" class="js-tablist__link">3e onglet</a>
    </li>
   </ul>
  <div id="id_fourth" class="js-tabcontent">
@@ -102,6 +102,6 @@ <h2>Un autre titre</h2>
 <div class="footer" role="contentinfo"><br>Ces démos sont des démos du <a href="https://van11y.net/fr/onglets-accessibles/" class="link">Système d’onglets accessibles Van11y utilisant <abbr title="Accessible Rich Internet Applications" lang="en" xml:lang="en">ARIA</abbr></a>.<br></div>
 
 </div>
-<script src="../dist/van11y-accessible-tab-panel-aria.min.js"></script>
+<script src="../dist/van11y-accessible-tab-panel-aria.js"></script>
 </body>
 </html>
diff --git a/demo/index.html b/demo/index.html
@@ -3,7 +3,7 @@
 <head>
  <meta charset="utf-8" />
  <title>Demo: Accessible tab panel using ARIA and Vanilla Javascript - Van11y </title>
- 
+
 <link href="./styles.css" rel="stylesheet" media="all" />
 
 <meta name="description" content="This script will transform a simple list of anchors to contents into a fantastic-shiny accessible tabpanel system, using ARIA" />
@@ -44,13 +44,13 @@ <h1 class="aligncenter">Demos: Accessible tab panel using <abbr title="Accessibl
  <div class="js-tabs" data-existing-hx="h2" data-tabs-prefix-class="example-tabs">
   <ul class="js-tablist">
    <li class="js-tablist__item">
-    <a href="#id_first" id="label_id_first" class="js-tablist__link">1st tab</a>
+    <a href="#id_first" class="js-tablist__link">1st tab</a>
    </li>
    <li class="js-tablist__item">
-    <a href="#id_second" id="label_id_second" class="js-tablist__link">2nd tab</a>
+    <a href="#id_second" class="js-tablist__link">2nd tab</a>
    </li>
    <li class="js-tablist__item">
-    <a href="#id_third" id="label_id_third" class="js-tablist__link">3rd tab</a>
+    <a href="#id_third" class="js-tablist__link">3rd tab</a>
    </li>
   </ul>
  <div id="id_first" class="js-tabcontent">
@@ -72,13 +72,13 @@ <h2>Another title</h2>
  <div class="js-tabs" data-existing-hx="h2" data-tabs-prefix-class="example-tabs">
   <ul class="js-tablist">
    <li class="js-tablist__item">
-    <a href="#id_fourth" id="label_id_fourth" class="js-tablist__link">1st tab</a>
+    <a href="#id_fourth" class="js-tablist__link">1st tab</a>
    </li>
    <li class="js-tablist__item">
-    <a href="#id_fifth" id="label_id_fifth" class="js-tablist__link" data-selected="1">2nd tab (selected)</a>
+    <a href="#id_fifth" class="js-tablist__link" data-selected="1">2nd tab (selected)</a>
    </li>
    <li class="js-tablist__item">
-    <a href="#id_sixth" id="label_id_sixth" class="js-tablist__link">3rd tab</a>
+    <a href="#id_sixth" class="js-tablist__link">3rd tab</a>
    </li>
   </ul>
  <div id="id_fourth" class="js-tabcontent">
@@ -88,15 +88,15 @@ <h2>Title</h2>
  <div id="id_fifth" class="js-tabcontent">
    <h2>Other title</h2>
    here the content of 2nd tab<br />
-   Displayed by default thanks to <code>data-selected="1"</code> attribute on <code>js-tablist__link</code>. 
+   Displayed by default thanks to <code>data-selected="1"</code> attribute on <code>js-tablist__link</code>.
  </div>
  <div id="id_sixth" class="js-tabcontent">
    <h2>Another title</h2>
    here the content of 3rd tab
  </div>
 </div>
-   
-  
+
+
 <div class="footer" role="contentinfo"><br>These demos are taken from <a href="https://van11y.net/accessible-tab-panel/" class="link">Van11y Accessible tab panel using <abbr title="Accessible Rich Internet Applications">ARIA</abbr></a>.<br></div>
 
 </div>