Skip to content

Commit

Permalink
Use tag selector to identify disabled buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
@dotherightthing
dotherightthing committed Dec 29, 2020
1 parent 072ff02 commit 7212799
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 14 deletions.
7 changes: 3 additions & 4 deletions js/_tabbed-carousel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,6 @@ class TabbedCarousel {
this.selectors = {
selected: '[aria-selected="true"]',
unselected: '[aria-selected="false"]',
jsEnabled: '.nojs-disabled',
tab: '[role="tab"]',
tablist: '[role="tablist"]',
tabpanel: '[role="tabpanel"]',
Expand Down Expand Up @@ -158,14 +157,14 @@ class TabbedCarousel {
init() {
this.assignInstanceId();

const jsEnabled = document.querySelectorAll(`#${this.instanceId} ${this.selectors.jsEnabled}`);
const disabledButtons = document.querySelectorAll(`#${this.instanceId} button[disabled]`);
const tabs = document.querySelectorAll(`#${this.instanceId} ${this.selectors.tab}`);
const tablist = document.querySelector(`#${this.instanceId} ${this.selectors.tablist}`);
const tabpanels = document.querySelectorAll(`#${this.instanceId} ${this.selectors.tabpanel}`);
const tabpanelExpandButtons = document.querySelectorAll(`#${this.instanceId} ${this.selectors.tabpanelExpandButton}`);

jsEnabled.forEach((jsEnable) => {
jsEnable.disabled = false;
disabledButtons.forEach((disabledButton) => {
disabledButton.disabled = false;
});

if (tabs.length) {
Expand Down
20 changes: 10 additions & 10 deletions tabbed-carousel.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,19 +15,19 @@ <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" class="tabbed-carousel__tablist" aria-label="Choose photo to display">
<button role="tab" class="tabbed-carousel__tab nojs-disabled" aria-controls="test-1-tabpanel-1" aria-selected="true" id="test-1-tab-1" tabindex="0" disabled>
<button role="tab" class="tabbed-carousel__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" class="tabbed-carousel__tab nojs-disabled" aria-controls="test-1-tabpanel-2" aria-selected="false" id="test-1-tab-2" tabindex="-1" disabled>
<button role="tab" class="tabbed-carousel__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" class="tabbed-carousel__tab nojs-disabled" aria-controls="test-1-tabpanel-3" aria-selected="false" id="test-1-tab-3" tabindex="-1" disabled>
<button role="tab" class="tabbed-carousel__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" class="tabbed-carousel__tab nojs-disabled" aria-controls="test-1-tabpanel-4" aria-selected="false" id="test-1-tab-4" tabindex="-1" disabled>
<button role="tab" class="tabbed-carousel__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" class="tabbed-carousel__tab nojs-disabled" aria-controls="test-1-tabpanel-5" aria-selected="false" id="test-1-tab-5" tabindex="-1" disabled>
<button role="tab" class="tabbed-carousel__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>
Expand Down Expand Up @@ -81,19 +81,19 @@ <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" class="tabbed-carousel__tablist" aria-label="Choose photo to display">
<button role="tab" class="tabbed-carousel__tab nojs-disabled" aria-controls="test-2-tabpanel-1" aria-selected="true" id="test-2-tab-1" tabindex="0" disabled>
<button role="tab" class="tabbed-carousel__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" class="tabbed-carousel__tab nojs-disabled" aria-controls="test-2-tabpanel-2" aria-selected="false" id="test-2-tab-2" tabindex="-1" disabled>
<button role="tab" class="tabbed-carousel__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" class="tabbed-carousel__tab nojs-disabled" aria-controls="test-2-tabpanel-3" aria-selected="false" id="test-2-tab-3" tabindex="-1" disabled>
<button role="tab" class="tabbed-carousel__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" class="tabbed-carousel__tab nojs-disabled" aria-controls="test-2-tabpanel-4" aria-selected="false" id="test-2-tab-4" tabindex="-1" disabled>
<button role="tab" class="tabbed-carousel__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" class="tabbed-carousel__tab nojs-disabled" aria-controls="test-2-tabpanel-5" aria-selected="false" id="test-2-tab-5" tabindex="-1" disabled>
<button role="tab" class="tabbed-carousel__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>
Expand Down

0 comments on commit 7212799

Please sign in to comment.