a11y: mode tabs are real buttons (keyboard focus + role=tab/aria-selected)

bfbe282c6e0acd52619b2922d1e4dd8c6e350133 · 2026-07-01 10:35:13 -0700 · Steve Abrams

Files touched

M index.html

Diff

commit bfbe282c6e0acd52619b2922d1e4dd8c6e350133
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Wed Jul 1 10:35:13 2026 -0700

    a11y: mode tabs are real buttons (keyboard focus + role=tab/aria-selected)
---
 index.html | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index b0796e9..d4139ad 100644
--- a/index.html
+++ b/index.html
@@ -21,8 +21,9 @@
   .sub{color:var(--muted);margin:2px 0 18px;font-size:13.5px}
   .tabs{display:flex;gap:8px;margin-bottom:16px}
   .tab{padding:8px 16px;border-radius:999px;border:1.5px solid var(--line);background:#fff;cursor:pointer;
-       font-size:13.5px;font-weight:600;color:var(--muted)}
+       font-size:13.5px;font-weight:600;color:var(--muted);font-family:inherit}
   .tab.active{background:var(--li);color:#fff;border-color:var(--li)}
+  .tab:focus-visible{outline:2px solid var(--li);outline-offset:2px}
   .card{background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);
         padding:18px 20px;margin-bottom:16px}
   label{font-weight:600;font-size:13px;display:block;margin-bottom:6px}
@@ -78,9 +79,9 @@
     </div>
   </header>
 
-  <div class="tabs">
-    <div class="tab active" data-mode="feeds" onclick="setMode('feeds')">📜 Feed pages — scroll &amp; like in place</div>
-    <div class="tab" data-mode="links" onclick="setMode('links')">🔗 Post links</div>
+  <div class="tabs" role="tablist" aria-label="Mode">
+    <button type="button" class="tab active" data-mode="feeds" role="tab" aria-selected="true" onclick="setMode('feeds')">📜 Feed pages — scroll &amp; like in place</button>
+    <button type="button" class="tab" data-mode="links" role="tab" aria-selected="false" onclick="setMode('links')">🔗 Post links</button>
   </div>
 
   <!-- ============ FEED-PAGES MODE ============ -->
@@ -209,7 +210,11 @@ function groupSizeFrom(selId, customId){
 
 /* ---------- mode switch ---------- */
 function setMode(m){
-  document.querySelectorAll('.tab').forEach(t=>t.classList.toggle('active', t.dataset.mode===m));
+  document.querySelectorAll('.tab').forEach(t=>{
+    const on = t.dataset.mode===m;
+    t.classList.toggle('active', on);
+    t.setAttribute('aria-selected', on ? 'true' : 'false');
+  });
   document.getElementById('pane-feeds').classList.toggle('active', m==='feeds');
   document.getElementById('pane-links').classList.toggle('active', m==='links');
   localStorage.setItem('lk_mode', m);

← d7cf6b0 feed mode: persist Opened set to localStorage so progress su · back to Linkedin Like Helper · Feed-pages: visible per-stream checklist (label + opened pil e35fcb1 →