Skip to content

Commit

Permalink
Create separate test for selection-follows-focus
Browse files Browse the repository at this point in the history
  • Loading branch information
@dotherightthing
dotherightthing committed Sep 23, 2020
1 parent db01e98 commit adba108
Show file tree
Hide file tree
Showing 3 changed files with 63 additions and 12 deletions.
3 changes: 2 additions & 1 deletion cypress/integration/tabbed-carousel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,8 @@ describe('Tabbed Carousel', function () {
});

const testIds = [
'test-1'
'test-1',
'test-2'
];

describe('Tests', function () {
Expand Down
2 changes: 1 addition & 1 deletion js/init.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
70 changes: 60 additions & 10 deletions tabbed-carousel.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down

0 comments on commit adba108

Please sign in to comment.