add more examples to examples page

github · Feb 16, 2024 · 5260f36 · 5260f36
1 parent 772c88f
commit 5260f36
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 8 deletions.
diff --git a/examples/index.html b/examples/index.html
@@ -6,11 +6,58 @@
   <link rel="stylesheet" href="tabs.css" />
 </head>
 <body>
+  <h1>Tab Container Examples</h1>
+
+  <h2>Horizontal</h2>
+
+  <tab-container>
+    <div role="tablist" aria-label="Horizontal Tabs Example">
+      <button type="button" id="tab-one" role="tab">Tab one</button>
+      <button type="button" id="tab-two" role="tab">Tab two</button>
+      <button type="button" id="tab-three" role="tab">Tab three</button>
+    </div>
+    <div role="tabpanel" aria-labelledby="tab-one">
+      Panel 1
+    </div>
+    <div role="tabpanel" aria-labelledby="tab-two" hidden>
+      Panel 2
+    </div>
+    <div role="tabpanel" aria-labelledby="tab-three" hidden>
+      Panel 3
+    </div>
+  </tab-container>
+
+  <h2>Vertical</h2>
+
+  <tab-container>
+    <div role="tablist" aria-label="Vertical Tabs Example" aria-orientation="vertical">
+      <button type="button" id="tab-one" role="tab">Tab one</button>
+      <button type="button" id="tab-two" role="tab">Tab two</button>
+      <button type="button" id="tab-three" role="tab">Tab three</button>
+    </div>
+    <div role="tabpanel" aria-labelledby="tab-one">
+      Panel 1
+    </div>
+    <div role="tabpanel" aria-labelledby="tab-two" hidden>
+      Panel 2
+    </div>
+    <div role="tabpanel" aria-labelledby="tab-three" hidden>
+      Panel 3
+    </div>
+  </tab-container>
+
+  <h2>Panel with extra buttons</h2>
+
   <tab-container>
-    <div role="tablist">
-      <button type="button" id="tab-one" role="tab" tabindex="0" aria-selected="true">Tab one</button>
-      <button type="button" id="tab-two" role="tab" tabindex="-1">Tab two</button>
-      <button type="button" id="tab-three" role="tab" tabindex="-1">Tab three</button>
+    <div style="display: flex">
+      <button>Left button, not a tab!</button>
+      <button>2nd Left button, not a tab!</button>
+      <div role="tablist" aria-label="Tabs Example with extra buttons">
+        <button type="button" id="tab-one" role="tab">Tab one</button>
+        <button type="button" id="tab-two" role="tab">Tab two</button>
+        <button type="button" id="tab-three" role="tab">Tab three</button>
+      </div>
+      <button>Right button, not a tab!</button>
     </div>
     <div role="tabpanel" aria-labelledby="tab-one">
       Panel 1
@@ -21,6 +68,7 @@
     <div role="tabpanel" aria-labelledby="tab-three" hidden>
       Panel 3
     </div>
+    <p>This comes after the panels</p>
   </tab-container>
 
   <!-- <script src="../dist/index.js" type="module"></script> -->

diff --git a/examples/tabs.css b/examples/tabs.css
@@ -1,8 +1,20 @@
-/* Borrowed from https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html */
+/* Borrowed (and modified) from https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html */
 
-[role="tablist"] {
-  margin: 0 0 -.1em;
-  overflow: visible;
+tab-container {
+  width: 100%;
+  margin: 2rem 0;
+}
+
+tab-container>[role="tablist"][aria-orientation="vertical"] {
+  display: flex;
+  flex-direction: column;
+}
+tab-container:has([aria-orientation="vertical"]) {
+  display: flex;
+  flex-direction: row;
+}
+tab-container:has([aria-orientation="vertical"]) [role="tabpanel"] {
+  flex: 1;
 }
 
 [role="tab"] {