From 0526373be43dba5fd61fb8dc8eaf369f7d6cc661 Mon Sep 17 00:00:00 2001
From: WofWca <wofwca@protonmail.com>
Date: Sun, 7 Sep 2025 09:25:33 +0400
Subject: [PATCH] fix: a11y: fix tabs

See https://www.w3.org/WAI/ARIA/apg/patterns/tabs/.

Follow-up to https://github.com/webxdc/webxdc-test/pull/39.
---
 index.html | 57 +++++++++++++++++++++++++++++++++++++++++++++---------
 styles.css |  6 +++++-
 2 files changed, 53 insertions(+), 10 deletions(-)
diff --git a/index.html b/index.html
index 002ecf2..cba2242 100644
--- a/index.html
+++ b/index.html
@@ -25,7 +25,12 @@
   </head>
   <body>
     <div class="pages">
-      <div class="page active" id="page-webxdc">
+      <div
+        class="page active"
+        id="page-webxdc"
+        role="tabpanel"
+        aria-labelledby="tab-webxdc"
+      >
         <div class="card" id="realtime-output"></div>
         <script src="js/realtime.js"></script>
         <div class="card" id="uploads-output"></div>
@@ -50,7 +55,12 @@
         <div class="card" id="info-output"></div>
         <script src="js/info.js"></script>
       </div>
-      <div class="page" id="page-web-api">
+      <div
+        class="page"
+        id="page-web-api"
+        role="tabpanel"
+        aria-labelledby="tab-web-api"
+      >
         <div class="card" id="storage-output"></div>
         <script src="js/storage.js"></script>
         <div class="card" id="unload-output"></div>
@@ -67,7 +77,12 @@
         <div class="card" id="links-output"></div>
         <script src="js/links.js"></script>
       </div>
-      <div class="page" id="page-sandbox">
+      <div
+        class="page"
+        id="page-sandbox"
+        role="tabpanel"
+        aria-labelledby="tab-sandbox"
+      >
         <div class="card" id="cookies-output"></div>
         <script src="js/cookies.js"></script>
         <div class="card" id="camera-access"></div>
@@ -158,10 +173,34 @@ <h2>DNS Prefetch</h2>
         <script src="js/dns-prefetch.js"></script>
       </div>
     </div>
-    <div class="tabs">
-      <div class="tab active" id="tab-webxdc">Webxdc</div>
-      <div class="tab" id="tab-web-api">Web API</div>
-      <div class="tab" id="tab-sandbox">Sandboxing</div>
+    <div class="tabs" role="tablist" aria-orientation="horizontal">
+      <button
+        role="tab"
+        aria-controls="page-webxdc"
+        class="tab"
+        aria-selected="true"
+        id="tab-webxdc"
+      >
+        Webxdc
+      </button>
+      <button
+        role="tab"
+        aria-controls="page-web-api"
+        aria-selected="false"
+        class="tab"
+        id="tab-web-api"
+      >
+        Web API
+      </button>
+      <button
+        role="tab"
+        aria-controls="page-sandbox"
+        aria-selected="false"
+        class="tab"
+        id="tab-sandbox"
+      >
+        Sandboxing
+      </button>
     </div>
     <script>
       var tabs = [
@@ -182,10 +221,10 @@ <h2>DNS Prefetch</h2>
         tab.onclick = () => {
           tabs.forEach(({ page, tab }) => {
             page.classList.remove("active");
-            tab.classList.remove("active");
+            tab.ariaSelected = false;
           });
           page.classList.add("active");
-          tab.classList.add("active");
+          tab.ariaSelected = true;
         };
       }
     </script>
diff --git a/styles.css b/styles.css
index d5db5f9..d29d102 100644
--- a/styles.css
+++ b/styles.css
@@ -82,11 +82,15 @@ body {
 .tab {
     flex-grow: 1;
     height: 36px;
+    padding: 0;
+    border: none;
+    margin: 0;
+    background-color: transparent;
     font-size: 1.3em;
     text-align: center;
     align-content: center;
 }
 
-.tab.active {
+.tab[aria-selected="true"] {
     background-color: lightgrey;
 }
\ No newline at end of file
