From 23137bf5be340c433dae8bb321f69143e5d5c081 Mon Sep 17 00:00:00 2001
From: Keith Cirkel <keithamus@users.noreply.github.com>
Date: Fri, 16 Feb 2024 12:13:37 +0000
Subject: [PATCH] get example page axe clean

---
 examples/index.html | 116 +++++++++++++++++++++++---------------------
 1 file changed, 60 insertions(+), 56 deletions(-)
diff --git a/examples/index.html b/examples/index.html
index 1201944..b4be7b1 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -6,70 +6,74 @@
   <link rel="stylesheet" href="tabs.css" />
 </head>
 <body>
-  <h1>Tab Container Examples</h1>
-  
-  <h2>Horizontal</h2>
+  <main>
 
-  <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>
+    <h1>Tab Container Examples</h1>
+    
+    <h2>Horizontal</h2>
 
-  <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>
+    <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>Panel with extra buttons</h2>
+    <h2>Vertical</h2>
 
-  <tab-container>
-    <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">
+    <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>
-      <button>Right button, not a tab!</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>
-    <p>This comes after the panels</p>
-  </tab-container>
+      <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 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
+      </div>
+      <div role="tabpanel" aria-labelledby="tab-two" hidden>
+        Panel 2
+      </div>
+      <div role="tabpanel" aria-labelledby="tab-three" hidden>
+        Panel 3
+      </div>
+      <p>This comes after the panels</p>
+    </tab-container>
+
+  </main>
 
   <!-- <script src="../dist/index.js" type="module"></script> -->
   <script src="https://unpkg.com/@github/tab-container-element@latest/dist/index.js" type="module"></script>
