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 88e8a05c095fcc6ea93843cfc4c587e7f7096d20..40ade68af2c3fcb25d22bfdbda04a1f2598e5617 100644 (file)
--- 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 853ea6cc5411f16c2c143ab21d7efeb65b3e3850..68f6348306c0847a0e91f0f3c8612613d0d60512 100644 (file)
--- 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 9d94b135da8c3fa2d18f5cb86fe4b0c97d7ff72e..b688eb21db576685e6e1b612d7d75aba7c96615d 100644 (file)
--- 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>