Skip to content

Commit

Permalink
Fix thumbnails, disable buttons and set initial selection when JS dis…
Browse files Browse the repository at this point in the history 
…abled
  • Loading branch information
@dotherightthing
dotherightthing committed Dec 27, 2020
1 parent fc73261 commit cbd8753
Showing 1 changed file with 30 additions and 30 deletions.
60 changes: 30 additions & 30 deletions tabbed-carousel.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,52 +16,52 @@ <h2>Test 1: Tabs with Manual Activation</h2>
<button class="test-focus-start" id="test-1-start">Start test</button>
<div class="tabbed-carousel" data-initial-selection="1">
<div role="tablist" aria-label="Choose photo to display">
<button role="tab" aria-controls="test-1-tabpanel-1" aria-selected="false" id="test-1-tab-1" tabindex="-1">
<img src="https://placehold.it/44x44?text=1" alt="Photo 1">
<button role="tab" aria-controls="test-1-tabpanel-1" aria-selected="true" id="test-1-tab-1" tabindex="0" disabled>
<img src="http://placehold.it/44x44?text=1" alt="Photo 1">
</button>
<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 role="tab" aria-controls="test-1-tabpanel-2" aria-selected="false" id="test-1-tab-2" tabindex="-1" disabled>
<img src="http://placehold.it/44x44?text=2" alt="Photo 2">
</button>
<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 role="tab" aria-controls="test-1-tabpanel-3" aria-selected="false" id="test-1-tab-3" tabindex="-1" disabled>
<img src="http://placehold.it/44x44?text=3" alt="Photo 3">
</button>
<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 role="tab" aria-controls="test-1-tabpanel-4" aria-selected="false" id="test-1-tab-4" tabindex="-1" disabled>
<img src="http://placehold.it/44x44?text=4" alt="Photo 4">
</button>
<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 role="tab" aria-controls="test-1-tabpanel-5" aria-selected="false" id="test-1-tab-5" tabindex="-1" disabled>
<img src="http://placehold.it/44x44?text=5" alt="Photo 5">
</button>
</div>
<div class="tabpanels">
<!-- 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-1-tabpanel-1" aria-labelledby="test-1-tab-1" tabindex="0">
<h2 class="tabpanel__title">Image 1</h2>
<div class="tabpanel__img-wrap">
<img src="https://placehold.it/400x300" alt="Description of photo 1">
<img src="http://placehold.it/400x300" alt="Description of photo 1">
</div>
</div>
<div class="tabpanel" role="tabpanel" id="test-1-tabpanel-2" aria-labelledby="test-1-tab-2" tabindex="0" hidden>
<h2 class="tabpanel__title">Image 2</h2>
<div class="tabpanel__img-wrap">
<img src="https://placehold.it/400x300" alt="Description of photo 2">
<img src="http://placehold.it/400x300" alt="Description of photo 2">
</div>
</div>
<div class="tabpanel" role="tabpanel" id="test-1-tabpanel-3" aria-labelledby="test-1-tab-3" tabindex="0" hidden>
<h2 class="tabpanel__title">Image 3</h2>
<div class="tabpanel__img-wrap">
<img src="https://placehold.it/400x300" alt="Description of photo 3">
<img src="http://placehold.it/400x300" alt="Description of photo 3">
</div>
</div>
<div class="tabpanel" role="tabpanel" id="test-1-tabpanel-4" aria-labelledby="test-1-tab-4" tabindex="0" hidden>
<h2 class="tabpanel__title">Image 4</h2>
<div class="tabpanel__img-wrap">
<img src="https://placehold.it/400x300" alt="Description of photo 4">
<img src="http://placehold.it/400x300" alt="Description of photo 4">
</div>
</div>
<div class="tabpanel" role="tabpanel" id="test-1-tabpanel-5" aria-labelledby="test-1-tab-5" tabindex="0" hidden>
<h2 class="tabpanel__title">Image 5</h2>
<div class="tabpanel__img-wrap">
<img src="https://placehold.it/400x300" alt="Description of photo 5">
<img src="http://placehold.it/400x300" alt="Description of photo 5">
</div>
</div>
<!--
Expand All @@ -81,52 +81,52 @@ <h2>Test 2: Tabs with Automatic Activation</h2>
<button class="test-focus-start" id="test-2-start">Start test</button>
<div class="tabbed-carousel" data-selection-follows-focus="true" data-initial-selection="1">
<div role="tablist" aria-label="Choose photo to display">
<button role="tab" aria-controls="test-2-tabpanel-1" aria-selected="false" id="test-2-tab-1" tabindex="-1">
<img src="https://placehold.it/44x44?text=1" alt="Photo 1">
<button role="tab" aria-controls="test-2-tabpanel-1" aria-selected="true" id="test-2-tab-1" tabindex="0" disabled>
<img src="http://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 role="tab" aria-controls="test-2-tabpanel-2" aria-selected="false" id="test-2-tab-2" tabindex="-1" disabled>
<img src="http://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 role="tab" aria-controls="test-2-tabpanel-3" aria-selected="false" id="test-2-tab-3" tabindex="-1" disabled>
<img src="http://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 role="tab" aria-controls="test-2-tabpanel-4" aria-selected="false" id="test-2-tab-4" tabindex="-1" disabled>
<img src="http://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 role="tab" aria-controls="test-2-tabpanel-5" aria-selected="false" id="test-2-tab-5" tabindex="-1" disabled>
<img src="http://placehold.it/44x44?text=5" alt="Photo 5">
</button>
</div>
<div class="tabpanels">
<!-- 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 class="tabpanel__title">Image 1</h2>
<div class="tabpanel__img-wrap">
<img src="https://placehold.it/400x300" alt="Description of photo 1">
<img src="http://placehold.it/400x300" alt="Description of photo 1">
</div>
</div>
<div class="tabpanel" role="tabpanel" id="test-2-tabpanel-2" aria-labelledby="test-2-tab-2" tabindex="0" hidden>
<h2 class="tabpanel__title">Image 2</h2>
<div class="tabpanel__img-wrap">
<img src="https://placehold.it/400x300" alt="Description of photo 2">
<img src="http://placehold.it/400x300" alt="Description of photo 2">
</div>
</div>
<div class="tabpanel" role="tabpanel" id="test-2-tabpanel-3" aria-labelledby="test-2-tab-3" tabindex="0" hidden>
<h2 class="tabpanel__title">Image 3</h2>
<div class="tabpanel__img-wrap">
<img src="https://placehold.it/400x300" alt="Description of photo 3">
<img src="http://placehold.it/400x300" alt="Description of photo 3">
</div>
</div>
<div class="tabpanel" role="tabpanel" id="test-2-tabpanel-4" aria-labelledby="test-2-tab-4" tabindex="0" hidden>
<h2 class="tabpanel__title">Image 4</h2>
<div class="tabpanel__img-wrap">
<img src="https://placehold.it/400x300" alt="Description of photo 4">
<img src="http://placehold.it/400x300" alt="Description of photo 4">
</div>
</div>
<div class="tabpanel" role="tabpanel" id="test-2-tabpanel-5" aria-labelledby="test-2-tab-5" tabindex="0" hidden>
<h2 class="tabpanel__title">Image 5</h2>
<div class="tabpanel__img-wrap">
<img src="https://placehold.it/400x300" alt="Description of photo 5">
<img src="http://placehold.it/400x300" alt="Description of photo 5">
</div>
</div>
<!--
Expand Down

0 comments on commit cbd8753

Please sign in to comment.