New design for tabs widget

w3c · Feb 17, 2017 · 1b7de6b · 1b7de6b
1 parent 7cbf6f8
commit 1b7de6b
Show file tree

Hide file tree

Showing 5 changed files with 122 additions and 119 deletions.
diff --git a/examples/tabs/css/tabs.css b/examples/tabs/css/tabs.css
@@ -0,0 +1,105 @@
+.tabs {
+  margin-top: 2em;
+  width: 20em;
+  font-family: "lucida grande", sans-serif;
+}
+
+[role="tablist"] {
+  margin: 0 0 -.1em;
+  overflow: visible;
+}
+
+[role="tab"] {
+  position: relative;
+  margin: 0;
+  padding: .3em .5em .4em;
+  border: 1px solid hsl(219, 1%, 72%);
+  border-radius: .2em .2em 0 0;
+  box-shadow: 0 0 .2em hsl(219, 1%, 72%);
+  overflow: visible;
+  font-family: inherit;
+  font-size: inherit;
+  background: hsl(220, 20%, 94%);
+}
+
+[role="tab"]:hover::before,
+[role="tab"]:focus::before,
+[role="tab"][aria-selected="true"]::before {
+  position: absolute;
+  bottom: 100%;
+  right: -1px;
+  left: -1px;
+  border-radius: 0.2em 0.2em 0 0;
+  border-top: 3px solid hsl(20, 96%, 48%);
+  content: '';
+}
+
+[role="tab"][aria-selected="true"] {
+  border-radius: 0;
+  background: hsl(220, 43%, 99%);
+  outline: 0;
+}
+
+[role="tab"][aria-selected="true"]:not(:focus):not(:hover)::before {
+  border-top: 5px solid hsl(218, 96%, 48%);
+}
+
+[role="tab"][aria-selected="true"]::after {
+  position: absolute;
+  z-index: 3;
+  bottom: -1px;
+  right: 0;
+  left: 0;
+  height: .3em;
+  background: hsl(220, 43%, 99%);
+  box-shadow: none;
+  content: '';
+}
+
+[role="tab"]:hover,
+[role="tab"]:focus,
+[role="tab"]:active {
+  outline: 0;
+  border-radius: 0;
+  color: inherit;
+}
+
+[role="tab"]:hover::before,
+[role="tab"]:focus::before {
+  border-color: hsl(20, 96%, 48%);
+}
+
+[role="tabpanel"] {
+  position: relative;
+  z-index: 2;
+  padding: .5em .5em .7em;
+  border: 1px solid hsl(219, 1%, 72%);
+  border-radius: 0 .2em .2em .2em;
+  box-shadow: 0 0 .2em hsl(219, 1%, 72%);
+  background: hsl(220, 43%, 99%);
+
+}
+
+[role="tabpanel"]:focus {
+  border-color: hsl(20, 96%, 48%);
+  box-shadow: 0 0 .2em hsl(20, 96%, 48%);
+  outline: 0;
+}
+
+[role="tabpanel"]:focus::after {
+  position: absolute;
+  bottom: 0;
+  right: -1px;
+  left: -1px;
+  border-bottom: 3px solid hsl(20, 96%, 48%);
+  border-radius: 0 0 0.2em 0.2em;
+  content: '';
+}
+
+[role="tabpanel"] p {
+  margin: 0;
+}
+
+[role="tabpanel"] * + p {
+  margin-top: 1em;
+}
diff --git a/examples/tabs/tabs-1/css/tabs.css b/examples/tabs/tabs-1/css/tabs.css
diff --git a/examples/tabs/tabs-1/tabs.html b/examples/tabs/tabs-1/tabs.html
@@ -10,15 +10,13 @@
     <script src="../../js/examples.js" type="text/javascript"></script>
 
     <!--  js and css for this example. -->
-    <link href="css/tabs.css" rel="stylesheet">
-
-
+    <link href="../css/tabs.css" rel="stylesheet">
   </head>
   <body>
     <main>
       <h1>Tabs With Automatic Activation</h1>
       <p>
-        Provide feedback on updates to this page in 
+        Provide feedback on updates to this page in
         <a href="https://github.com/w3c/aria-practices/issues/278">issue 278.</a>
       </p>
       <p>
@@ -31,24 +29,24 @@ <h1>Tabs With Automatic Activation</h1>
       <ul>
         <li><a href="../tabs-2/tabs.html">Tabs With Manual Activation</a>: A tabs widget where users activate a tab and display its panel by pressing <kbd>Space</kbd> or <kbd>Enter</kbd>.</li>
       </ul>
-      
+
       <section>
         <h2 id="ex_label">Example</h2>
         <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
         <div id="ex1">
           <div class="tabs">
             <div role="tablist" aria-label="Entertainment">
               <button role="tab" aria-selected="true" aria-controls="nils-tab" id="nils">Nils Frahm</button>
-              <button role="tab" aria-selected="false" aria-controls="helios-tab" id="helios" tabindex="-1">Helios</button>
+              <button role="tab" aria-selected="false" aria-controls="agnes-tab" id="agnes" tabindex="-1">Agnes Obel</button>
               <button role="tab" aria-selected="false" aria-controls="complexcomplex" id="complex" tabindex="-1" data-deletable>Joke</button>
             </div>
 
             <div tabindex="0" role="tabpanel" id="nils-tab" aria-labelledby="nils">
               <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="helios-tab" aria-labelledby="helios" hidden>
-              <p>Helios (Keith Kenniff) is an American composer, multi-instrumentalist, and electronic music producer. He composes ambient/electronic music under the moniker Helios and post-classical piano music under Goldmund. He is also one half of the indie band Mint Julep, and ambient project "A Pale Fire". Keith is also a composer for film, television, dance and performance art. In 2010 he created the record label Unseen.</p>
+            <div tabindex="0" role="tabpanel" id="agnes-tab" aria-labelledby="agnes" 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>
@@ -63,7 +61,7 @@ <h2 id="ex_label">Example</h2>
       <section>
         <h2>Accessibility Features</h2>
         <p>
-          To demonstrate the effects of deleting a tab, the third tab, labeled <q>Joke</q>, 
+          To demonstrate the effects of deleting a tab, the third tab, labeled <q>Joke</q>,
           can be deleted when it has focus by pressing <kbd>Delete</kbd>.
         </p>
       </section>
@@ -312,13 +310,13 @@ <h2 id="sc1_label">HTML Source Code</h2>
       </section>
 
     </main>
-    
+
     <nav>
       <!--  Update the pattern_ID parameter of this link to refer to the APG design pattern section related to this example.  -->
       <a href="../../../#tabpanel">Tabs Design Pattern in WAI-ARIA Authoring Practices 1.1</a>
     </nav>
-    
+
     <script src="js/tabs.js" type="text/javascript"></script>
-    
+
   </body>
 </html>
diff --git a/examples/tabs/tabs-2/css/tabs.css b/examples/tabs/tabs-2/css/tabs.css
diff --git a/examples/tabs/tabs-2/tabs.html b/examples/tabs/tabs-2/tabs.html
@@ -10,13 +10,13 @@
     <script src="../../js/examples.js" type="text/javascript"></script>
 
     <!--  js and css for this example. -->
-    <link href="css/tabs.css" rel="stylesheet">
+    <link href="../css/tabs.css" rel="stylesheet">
   </head>
   <body>
     <main>
       <h1>Tabs With Manual Activation</h1>
       <p>
-        Please provide feedback on updates to this page in 
+        Please provide feedback on updates to this page in
         <a href="https://github.com/w3c/aria-practices/issues/279">issue 279.</a>
       </p>
       <p>
@@ -37,16 +37,16 @@ <h2 id="ex_label">Example</h2>
           <div class="tabs">
             <div role="tablist" aria-label="Entertainment">
               <button role="tab" aria-selected="true" aria-controls="nils-tab" id="nils">Nils Frahm</button>
-              <button role="tab" aria-selected="false" aria-controls="helios-tab" id="helios" tabindex="-1">Helios</button>
+              <button role="tab" aria-selected="false" aria-controls="agnes-tab" id="agnes" tabindex="-1">Agnes Obel</button>
               <button role="tab" aria-selected="false" aria-controls="complexcomplex" id="complex" tabindex="-1" data-deletable>Joke</button>
             </div>
 
             <div tabindex="0" role="tabpanel" id="nils-tab" aria-labelledby="nils">
               <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="helios-tab" aria-labelledby="helios" hidden>
-              <p>Helios (Keith Kenniff) is an American composer, multi-instrumentalist, and electronic music producer. He composes ambient/electronic music under the moniker Helios and post-classical piano music under Goldmund. He is also one half of the indie band Mint Julep, and ambient project "A Pale Fire". Keith is also a composer for film, television, dance and performance art. In 2010 he created the record label Unseen.</p>
+            <div tabindex="0" role="tabpanel" id="agnes-tab" aria-labelledby="agnes" 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>
@@ -59,11 +59,9 @@ <h2 id="ex_label">Example</h2>
       </section>
 
       <section>
-        <h2>Accessibility Features</h2>
-        <section>
         <h2>Accessibility Features</h2>
         <p>
-          To demonstrate the effects of deleting a tab, the third tab, labeled <q>Joke</q>, 
+          To demonstrate the effects of deleting a tab, the third tab, labeled <q>Joke</q>,
           can be deleted when it has focus by pressing <kbd>Delete</kbd>.
         </p>
       </section>
@@ -321,6 +319,6 @@ <h2 id="sc1_label">HTML Source Code</h2>
     </nav>
 
     <script src="js/tabs.js" type="text/javascript"></script>
-    
+
   </body>
 </html>