From adba108f8deb09348ba7d0bf5670a34aa01cb055 Mon Sep 17 00:00:00 2001
From: Dan Smith <dev@dotherightthing.co.nz>
Date: Wed, 23 Sep 2020 16:41:39 +1200
Subject: [PATCH] Create separate test for selection-follows-focus

---
 cypress/integration/tabbed-carousel.js |  3 +-
 js/init.js                             |  2 +-
 tabbed-carousel.html                   | 70 ++++++++++++++++++++++----
 3 files changed, 63 insertions(+), 12 deletions(-)

diff --git a/cypress/integration/tabbed-carousel.js b/cypress/integration/tabbed-carousel.js
index 02f76af..6e86cc4 100644
--- a/cypress/integration/tabbed-carousel.js
+++ b/cypress/integration/tabbed-carousel.js
@@ -47,7 +47,8 @@ describe('Tabbed Carousel', function () {
     });
 
     const testIds = [
-        'test-1'
+        'test-1',
+        'test-2'
     ];
 
     describe('Tests', function () {
diff --git a/js/init.js b/js/init.js
index 462ad9c..ecdbe7a 100644
--- a/js/init.js
+++ b/js/init.js
@@ -33,7 +33,7 @@ document.onreadystatechange = () => {
         document.querySelectorAll('.tabbed-carousel').forEach((tabbedCarousel) => {
             const tabbedCarouselInstance = new TabbedCarousel({
                 instanceElement: tabbedCarousel,
-                selectionFollowsFocus: true
+                selectionFollowsFocus: tabbedCarousel.getAttribute('data-selection-follows-focus')
             });
 
             tabbedCarouselInstance.init();
diff --git a/tabbed-carousel.html b/tabbed-carousel.html
index e0b9cc0..d7823d9 100644
--- a/tabbed-carousel.html
+++ b/tabbed-carousel.html
@@ -11,21 +11,22 @@
         <h1>Tabbed carousel</h1>
         <p>See Cypress unit tests for specification.</p>
         <div id="test-1">
+            <h2>Test 1</h2>
             <div class="tabbed-carousel">
                 <div role="tablist" aria-label="Choose photo to display">
-                    <button role="tab" aria-controls="tabpanel-1" aria-selected="true" id="tab-1">
+                    <button role="tab" aria-controls="test-1-tabpanel-1" aria-selected="true" id="test-1-tab-1">
                         <img src="https://placehold.it/44x44?text=1" alt="Photo 1">
                     </button>
-                    <button role="tab" aria-controls="tabpanel-2" aria-selected="false" id="tab-2" tabindex="-1">
+                    <button role="tab" aria-controls="test-1-tabpanel-2" aria-selected="false" id="test-1-tab-2" tabindex="-1">
                         <img src="https://placehold.it/44x44?text=2" alt="Photo 2">
                     </button>
-                    <button role="tab" aria-controls="tabpanel-3" aria-selected="false" id="tab-3" tabindex="-1">
+                    <button role="tab" aria-controls="test-1-tabpanel-3" aria-selected="false" id="test-1-tab-3" tabindex="-1">
                         <img src="https://placehold.it/44x44?text=3" alt="Photo 3">
                     </button>
-                    <button role="tab" aria-controls="tabpanel-4" aria-selected="false" id="tab-4" tabindex="-1">
+                    <button role="tab" aria-controls="test-1-tabpanel-4" aria-selected="false" id="test-1-tab-4" tabindex="-1">
                         <img src="https://placehold.it/44x44?text=4" alt="Photo 4">
                     </button>
-                    <button role="tab" aria-controls="tabpanel-5" aria-selected="false" id="tab-5" tabindex="-1">
+                    <button role="tab" aria-controls="test-1-tabpanel-5" aria-selected="false" id="test-1-tab-5" tabindex="-1">
                         <img src="https://placehold.it/44x44?text=5" alt="Photo 5">
                     </button>
                 </div>
@@ -35,23 +36,72 @@ <h1>Tabbed carousel</h1>
                         <button class="tabpanels__nav-next" data-kh-proxy="selectNext">Next</button>
                     </div>
                     <!-- Next element in the page tab is typically either the first focusable element inside the tab panel or the tab panel itself. -->
-                    <div class="tabpanel" role="tabpanel" id="tabpanel-1" aria-labelledby="tab-1" tabindex="0">
+                    <div class="tabpanel" role="tabpanel" id="test-1-tabpanel-1" aria-labelledby="test-1-tab-1" tabindex="0">
                         <h2>Image 1</h2>
                         <img src="https://placehold.it/400x300" alt="Description of photo 1">
                     </div>
-                    <div class="tabpanel" role="tabpanel" id="tabpanel-2" aria-labelledby="tab-2" tabindex="0" hidden>
+                    <div class="tabpanel" role="tabpanel" id="test-1-tabpanel-2" aria-labelledby="test-1-tab-2" tabindex="0" hidden>
                         <h2>Image 2</h2>
                         <img src="https://placehold.it/400x300" alt="Description of photo 2">
                     </div>
-                    <div class="tabpanel" role="tabpanel" id="tabpanel-3" aria-labelledby="tab-3" tabindex="0" hidden>
+                    <div class="tabpanel" role="tabpanel" id="test-1-tabpanel-3" aria-labelledby="test-1-tab-3" tabindex="0" hidden>
                         <h2>Image 3</h2>
                         <img src="https://placehold.it/400x300" alt="Description of photo 3">
                     </div>
-                    <div class="tabpanel" role="tabpanel" id="tabpanel-4" aria-labelledby="tab-4" tabindex="0" hidden>
+                    <div class="tabpanel" role="tabpanel" id="test-1-tabpanel-4" aria-labelledby="test-1-tab-4" tabindex="0" hidden>
                         <h2>Image 4</h2>
                         <img src="https://placehold.it/400x300" alt="Description of photo 4">
                     </div>
-                    <div class="tabpanel" role="tabpanel" id="tabpanel-5" aria-labelledby="tab-5" tabindex="0" hidden>
+                    <div class="tabpanel" role="tabpanel" id="test-1-tabpanel-5" aria-labelledby="test-1-tab-5" tabindex="0" hidden>
+                        <h2>Image 5</h2>
+                        <img src="https://placehold.it/400x300" alt="Description of photo 5">
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div id="test-2">
+            <h2>Test 2: Selection follows focus</h2>
+            <div class="tabbed-carousel" data-selection-follows-focus="true">
+                <div role="tablist" aria-label="Choose photo to display">
+                    <button role="tab" aria-controls="test-2-tabpanel-1" aria-selected="true" id="test-2-tab-1">
+                        <img src="https://placehold.it/44x44?text=1" alt="Photo 1">
+                    </button>
+                    <button role="tab" aria-controls="test-2-tabpanel-2" aria-selected="false" id="test-2-tab-2" tabindex="-1">
+                        <img src="https://placehold.it/44x44?text=2" alt="Photo 2">
+                    </button>
+                    <button role="tab" aria-controls="test-2-tabpanel-3" aria-selected="false" id="test-2-tab-3" tabindex="-1">
+                        <img src="https://placehold.it/44x44?text=3" alt="Photo 3">
+                    </button>
+                    <button role="tab" aria-controls="test-2-tabpanel-4" aria-selected="false" id="test-2-tab-4" tabindex="-1">
+                        <img src="https://placehold.it/44x44?text=4" alt="Photo 4">
+                    </button>
+                    <button role="tab" aria-controls="test-2-tabpanel-5" aria-selected="false" id="test-2-tab-5" tabindex="-1">
+                        <img src="https://placehold.it/44x44?text=5" alt="Photo 5">
+                    </button>
+                </div>
+                <div class="tabpanels">
+                    <div class="tabpanels__nav">
+                        <button class="tabpanels__nav-previous" data-kh-proxy="selectPrevious">Previous</button>
+                        <button class="tabpanels__nav-next" data-kh-proxy="selectNext">Next</button>
+                    </div>
+                    <!-- Next element in the page tab is typically either the first focusable element inside the tab panel or the tab panel itself. -->
+                    <div class="tabpanel" role="tabpanel" id="test-2-tabpanel-1" aria-labelledby="test-2-tab-1" tabindex="0">
+                        <h2>Image 1</h2>
+                        <img src="https://placehold.it/400x300" alt="Description of photo 1">
+                    </div>
+                    <div class="tabpanel" role="tabpanel" id="test-2-tabpanel-2" aria-labelledby="test-2-tab-2" tabindex="0" hidden>
+                        <h2>Image 2</h2>
+                        <img src="https://placehold.it/400x300" alt="Description of photo 2">
+                    </div>
+                    <div class="tabpanel" role="tabpanel" id="test-2-tabpanel-3" aria-labelledby="test-2-tab-3" tabindex="0" hidden>
+                        <h2>Image 3</h2>
+                        <img src="https://placehold.it/400x300" alt="Description of photo 3">
+                    </div>
+                    <div class="tabpanel" role="tabpanel" id="test-2-tabpanel-4" aria-labelledby="test-2-tab-4" tabindex="0" hidden>
+                        <h2>Image 4</h2>
+                        <img src="https://placehold.it/400x300" alt="Description of photo 4">
+                    </div>
+                    <div class="tabpanel" role="tabpanel" id="test-2-tabpanel-5" aria-labelledby="test-2-tab-5" tabindex="0" hidden>
                         <h2>Image 5</h2>
                         <img src="https://placehold.it/400x300" alt="Description of photo 5">
                     </div>