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

w3c · Oct 7, 2019 · 39a79fc · 39a79fc
1 parent 559f473
commit 39a79fc
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 11 deletions.
diff --git a/examples/tabs/css/tabs.css b/examples/tabs/css/tabs.css
@@ -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%);

diff --git a/examples/tabs/tabs-1/js/tabs.js b/examples/tabs/tabs-1/js/tabs.js
@@ -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) {
@@ -177,7 +177,7 @@
     };
 
     for (p = 0; p < panels.length; p++) {
-      panels[p].setAttribute('hidden', 'hidden');
+      panels[p].classList.add('is-hidden');
     };
   };
 

diff --git a/examples/tabs/tabs-1/tabs.html b/examples/tabs/tabs-1/tabs.html
@@ -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>
@@ -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>

diff --git a/examples/tabs/tabs-2/js/tabs.js b/examples/tabs/tabs-2/js/tabs.js
@@ -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) {
@@ -177,7 +177,7 @@
     };
 
     for (p = 0; p < panels.length; p++) {
-      panels[p].setAttribute('hidden', 'hidden');
+      panels[p].classList.add('is-hidden');
     };
   };
 

diff --git a/examples/tabs/tabs-2/tabs.html b/examples/tabs/tabs-2/tabs.html
@@ -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>