Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tabs Example: use display: none; to hide panels (Issue #1197) #1198

Merged
merged 1 commit into from
Oct 7, 2019
Merged

Tabs Example: use display: none; to hide panels (Issue #1197) #1198

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions examples/tabs/css/tabs.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,10 @@
background: hsl(220, 43%, 99%);
}

[role="tabpanel"].is-hidden {
display: none;
}

[role="tabpanel"]:focus {
border-color: hsl(20, 96%, 48%);
box-shadow: 0 0 0.2em hsl(20, 96%, 48%);
Expand Down
6 changes: 3 additions & 3 deletions examples/tabs/tabs-1/js/tabs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,8 +159,8 @@
// Get the value of aria-controls (which is an ID)
var controls = tab.getAttribute('aria-controls');

// Remove hidden attribute from tab panel to make it visible
document.getElementById(controls).removeAttribute('hidden');
// Remove is-hidden class from tab panel to make it visible
document.getElementById(controls).classList.remove('is-hidden');

// Set focus when required
if (setFocus) {
Expand All @@ -177,7 +177,7 @@
};

for (p = 0; p < panels.length; p++) {
panels[p].setAttribute('hidden', 'hidden');
panels[p].classList.add('is-hidden');
};
};

Expand Down
6 changes: 3 additions & 3 deletions examples/tabs/tabs-1/tabs.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
<li><a href="https://github.com/w3c/aria-practices/projects/11">Related Issues</a></li>
<li><a href="../../../#tabpanel">Design Pattern</a></li>
</ul>
</nav>
</nav>
<main>
<h1>Example of Tabs with Automatic Activation</h1>
<p>
Expand Down Expand Up @@ -51,11 +51,11 @@ <h2 id="ex_label">Example</h2>
<p>Nils Frahm is a German musician, composer and record producer based in Berlin. He is known for combining classical and electronic music and for an unconventional approach to the piano in which he mixes a grand piano, upright piano, Roland Juno-60, Rhodes piano, drum machine, and Moog Taurus.</p>
</div>

<div tabindex="0" role="tabpanel" id="agnes-tab" aria-labelledby="agnes" hidden>
<div tabindex="0" role="tabpanel" id="agnes-tab" aria-labelledby="agnes" class="is-hidden">
<p>Agnes Caroline Thaarup Obel is a Danish singer/songwriter. Her first album, Philharmonics, was released by PIAS Recordings on 4 October 2010 in Europe. Philharmonics was certified gold in June 2011 by the Belgian Entertainment Association (BEA) for sales of 10,000 Copies.</p>
</div>

<div tabindex="0" role="tabpanel" id="complexcomplex" aria-labelledby="complex" hidden>
<div tabindex="0" role="tabpanel" id="complexcomplex" aria-labelledby="complex" class="is-hidden">
<p>Fear of complicated buildings:</p>
<p>A complex complex complex.</p>
</div>
Expand Down
6 changes: 3 additions & 3 deletions examples/tabs/tabs-2/js/tabs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,8 +160,8 @@
// Get the value of aria-controls (which is an ID)
var controls = tab.getAttribute('aria-controls');

// Remove hidden attribute from tab panel to make it visible
document.getElementById(controls).removeAttribute('hidden');
// Remove is-hidden class from tab panel to make it visible
document.getElementById(controls).classList.remove('is-hidden');

// Set focus when required
if (setFocus) {
Expand All @@ -177,7 +177,7 @@
};

for (p = 0; p < panels.length; p++) {
panels[p].setAttribute('hidden', 'hidden');
panels[p].classList.add('is-hidden');
};
};

Expand Down
4 changes: 2 additions & 2 deletions examples/tabs/tabs-2/tabs.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,11 +51,11 @@ <h2 id="ex_label">Example</h2>
<p>Nils Frahm is a German musician, composer and record producer based in Berlin. He is known for combining classical and electronic music and for an unconventional approach to the piano in which he mixes a grand piano, upright piano, Roland Juno-60, Rhodes piano, drum machine, and Moog Taurus.</p>
</div>

<div tabindex="0" role="tabpanel" id="agnes-tab" aria-labelledby="agnes" hidden>
<div tabindex="0" role="tabpanel" id="agnes-tab" aria-labelledby="agnes" class="is-hidden">
<p>Agnes Caroline Thaarup Obel is a Danish singer/songwriter. Her first album, Philharmonics, was released by PIAS Recordings on 4 October 2010 in Europe. Philharmonics was certified gold in June 2011 by the Belgian Entertainment Association (BEA) for sales of 10,000 Copies.</p>
</div>

<div tabindex="0" role="tabpanel" id="complexcomplex" aria-labelledby="complex" hidden>
<div tabindex="0" role="tabpanel" id="complexcomplex" aria-labelledby="complex" class="is-hidden">
<p>Fear of complicated buildings:</p>
<p>A complex complex complex.</p>
</div>
Expand Down