From 3261f5994f794311f3f2b1b46a0824ad95143527 Mon Sep 17 00:00:00 2001
From: Jason Webb <zen.webb@gmail.com>
Date: Mon, 11 Jan 2021 16:05:20 -0600
Subject: [PATCH] #21 differentiating adjacent synched carousels with
 regionLabel.

---
 docs/index.html | 27 ++++++++++++++++++++-------
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index 57171f585..a4226a88f 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -605,7 +605,8 @@ <h3 id="slider-syncing" tabindex="-1">Slider Syncing</h3>
   arrows: false,
   fade: true,
   asNavFor: '.slider-nav',
-  instructionsText: 'Changing this current slide of this carousel will change the current slide of the carousel that follows.'
+  instructionsText: 'Changing this current slide of this carousel will change the current slide of the thumbnail carousel that follows.',
+  regionLabel: 'main image carousel'
 });
 
 $('.slider-nav').slick({
@@ -614,8 +615,8 @@ <h3 id="slider-syncing" tabindex="-1">Slider Syncing</h3>
   asNavFor: '.slider-for',
   dots: true,
   centerMode: true,
-  focusOnSelect: true,
-  instructionsText: 'Changing the current slide of this carousel will change the current slide of the preceding carousel.'
+  instructionsText: 'Changing the current slide of this carousel will change the current slide of the preceding main image carousel.',
+  regionLabel: 'thumbnail carousel'
 });</code></pre>
 
         <div class="accessibility-tip">
@@ -625,7 +626,18 @@ <h3 id="slider-syncing" tabindex="-1">Slider Syncing</h3>
 
           <div class="content">
             <h4 class="heading">TIP: always explain how sliders are synced!</h4>
-            <p>Use the new <code>instructionsText</code> setting </code> to provide clear, simple instructions for screen reader users to explain what happens when they interact with these sliders. These instructions will be added as screen-reader-only text at the beginning of the slider.</p>
+            <p>Use the new <code>instructionsText</code> setting to provide clear, simple instructions for screen reader users to explain what happens when they interact with these sliders. These instructions will be added as screen-reader-only text at the beginning of the slider.</p>
+          </div>
+        </div>
+
+        <div class="accessibility-tip">
+          <div class="icon">
+            <span class="fa fa-universal-access" aria-hidden="true"></span>
+          </div>
+
+          <div class="content">
+            <h4 class="heading">TIP: differentiate adjacent carousels</h4>
+            <p>Use the new <code>regionLabel</code> setting to change to <code>aria-label</code> on the wrapper regions so that they are easier for screen reader users to tell apart. Even better, use that same text in the instructions you provide so these users know what to listen for as they explore the page!</p>
           </div>
         </div>
 
@@ -999,7 +1011,8 @@ <h2 id="go-get-it" tabindex="-1">Go Get It</h2>
       arrows: false,
       fade: true,
       asNavFor: '.slider-nav',
-      instructionsText: 'Changing this current slide of this carousel will change the current slide of the carousel that follows.'
+      instructionsText: 'Changing this current slide of this carousel will change the current slide of the thumbnail carousel that follows.',
+      regionLabel: 'main image carousel'
     });
 
     // b. Control slider
@@ -1010,9 +1023,9 @@ <h2 id="go-get-it" tabindex="-1">Go Get It</h2>
       asNavFor: '.slider-for',
       dots: true,
       centerMode: true,
-      focusOnSelect: true,
       slide: 'div',
-      instructionsText: 'Changing the current slide of this carousel will change the current slide of the preceding carousel.'
+      instructionsText: 'Changing the current slide of this carousel will change the current slide of the preceding main image carousel.',
+      regionLabel: 'thumbnail carousel'
     });
 
     // Right to Left