From: Nicolas Coden <nicolas@ncoden.fr>
Date: Sat, 4 Aug 2018 21:38:47 +0000 (+0200)
Subject: docs: add "data-slide-active-state" element to the Orbit documentation
X-Git-Tag: v6.6.0~3^2~115^2~1
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=f58c86bc59831cd6ad19a84a386ac89f84b9527e;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

docs: add "data-slide-active-state" element to the Orbit documentation
---

diff --git a/docs/pages/kitchen-sink.md b/docs/pages/kitchen-sink.md
index 88e8a05c0..40ade68af 100644
--- a/docs/pages/kitchen-sink.md
+++ b/docs/pages/kitchen-sink.md
@@ -814,7 +814,10 @@ description: Everything but.
     </li>
   </ul>
   <nav class="orbit-bullets">
-    <button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
+    <button class="is-active" data-slide="0">
+      <span class="show-for-sr">First slide details.</span>
+      <span class="show-for-sr" data-slide-active-label>Current Slide</span>
+    </button>
     <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
     <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
     <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
diff --git a/docs/pages/orbit.md b/docs/pages/orbit.md
index 853ea6cc5..68f634830 100644
--- a/docs/pages/orbit.md
+++ b/docs/pages/orbit.md
@@ -61,7 +61,10 @@ Orbit doesn't automatically generate any HTML for you, giving you the flexibilit
     </ul>
   </div>
   <nav class="orbit-bullets">
-    <button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
+    <button class="is-active" data-slide="0">
+      <span class="show-for-sr">First slide details.</span>
+      <span class="show-for-sr" data-slide-active-label>Current Slide</span>
+    </button>
     <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
     <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
     <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
@@ -103,7 +106,10 @@ Orbit doesn't automatically generate any HTML for you, giving you the flexibilit
     </ul>
   </div>
   <nav class="orbit-bullets">
-    <button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
+    <button class="is-active" data-slide="0">
+      <span class="show-for-sr">First slide details.</span>
+      <span class="show-for-sr" data-slide-active-label>Current Slide</span>
+    </button>
     <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
     <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
     <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
@@ -150,17 +156,22 @@ Orbit controls use the class `.orbit-previous` and `.orbit-next`. The below exam
 
 ### Bullets
 
-The bullets serve two purposes: they mark the current slide, and can be clicked on to navigate to another slide. Like with the controls, the bullets also have screen reader-friendly labels.
+The bullets serve two purposes: they mark the current slide, and can be clicked on to navigate to another slide. Like with the controls, the bullets can also have screen reader-friendly labels.
 
 ```html
 <nav class="orbit-bullets">
-  <button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
+  <button class="is-active" data-slide="0">
+    <span class="show-for-sr">First slide details.</span>
+    <span class="show-for-sr" data-slide-active-label>Current Slide</span>
+  </button>
   <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
   <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
   <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
 </nav>
 ```
 
+Within the active bullet (a button with `is-active`), you can provide a label for the active slide with `[data-slide-active-label]`. It will be moved to others bullets when the Orbit slides. If not provided, the Orbit will move the last exceeding `span` element.
+
 <!-- <div class="callout"><p>
   The new Orbit slider was designed to be a tool for rapid prototyping. While you are welcome to use it in production, if you want something more robust, we welcome you to try [Owl Carousel](http://owlgraphic.com/owlcarousel/).
 </p>
@@ -225,7 +236,10 @@ A carousel slide can contain images or HTML&mdash;you can even mix between slide
     </ul>
   </div>
   <nav class="orbit-bullets">
-    <button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
+    <button class="is-active" data-slide="0">
+      <span class="show-for-sr">First slide details.</span>
+      <span class="show-for-sr" data-slide-active-label>Current Slide</span>
+    </button>
     <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
     <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
     <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
@@ -295,11 +309,14 @@ Since those option names are pretty *long*, you can also set them all in one HTM
     </ul>
   </div>
   <nav class="orbit-bullets">
-   <button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
-   <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
-   <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
-   <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
- </nav>
+    <button class="is-active" data-slide="0">
+      <span class="show-for-sr">First slide details.</span>
+      <span class="show-for-sr" data-slide-active-label>Current Slide</span>
+    </button>
+    <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
+    <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
+    <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
+  </nav>
 </div>
 
 ---
@@ -351,9 +368,12 @@ To disable Motion UI, set the plugin option `useMUI` to `false`. Written as an H
     </ul>
   </div>
   <nav class="orbit-bullets">
-   <button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
-   <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
-   <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
-   <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
+    <button class="is-active" data-slide="0">
+      <span class="show-for-sr">First slide details.</span>
+      <span class="show-for-sr" data-slide-active-label>Current Slide</span>
+    </button>
+    <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
+    <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
+    <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
  </nav>
 </div>
diff --git a/test/visual/orbit/touch.html b/test/visual/orbit/touch.html
index 9d94b135d..b688eb21d 100644
--- a/test/visual/orbit/touch.html
+++ b/test/visual/orbit/touch.html
@@ -41,7 +41,10 @@
               </li>
             </ul>
             <nav class="orbit-bullets">
-              <button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
+              <button class="is-active" data-slide="0">
+                <span class="show-for-sr">First slide details.</span>
+                <span class="show-for-sr" data-slide-active-label>Current Slide</span>
+              </button>
               <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
               <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
               <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>