From c013ed57bf3d7dd83bd59a9b984d87aebde6003c Mon Sep 17 00:00:00 2001
From: "netop://ウィビ" <paul@webb.page>
Date: Fri, 24 Apr 2026 16:37:49 -0700
Subject: Migrate from Deno/JSR to npm publishing

- @sveltejs/package builds dist/ for @eeeooolll/graphiql with three entry
  points (./, ./component, ./splitter)
- Vitest + svelte-check replace Deno test/check; runes shim no longer
  needed since the Svelte plugin compiles .svelte.ts at runtime
- Drop $app/environment dep in Editor.svelte to support non-SvelteKit
  consumers
- Refactor TabBar tab element from nested <button> to role=tab <div> per
  PLAN.md gotcha; svelte-check flagged the invalid HTML
- README now documents npm install, integration patterns for Yoga,
  Apollo, graphql-modules, Hono/Bun/Deno, plus APQ + keyboard table
---
 source/library/components/TabBar.svelte | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

(limited to 'source/library/components/TabBar.svelte')

diff --git a/source/library/components/TabBar.svelte b/source/library/components/TabBar.svelte
index 9c34f20..0bfec02 100644
--- a/source/library/components/TabBar.svelte
+++ b/source/library/components/TabBar.svelte
@@ -130,13 +130,22 @@
   }
 </style>
 
-<div class="tabbar">
+<div class="tabbar" role="tablist">
   {#each tabs as tab (tab.id)}
-    <button
+    <div
+      aria-selected={tab.id === activeId}
       class="tab"
       class:active={tab.id === activeId}
       ondblclick={() => startEditing(tab)}
       onclick={() => onSelect(tab.id)}
+      onkeydown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onSelect(tab.id);
+        }
+      }}
+      role="tab"
+      tabindex="0"
     >
       {#if editingId === tab.id}
         <input
@@ -157,7 +166,7 @@
         class="close"
         onclick={(e) => handleClose(e, tab.id)}
       >×</button>
-    </button>
+    </div>
   {/each}
   <button aria-label="New tab" class="add" onclick={onAdd}>+</button>
 </div>
-- 
cgit v1.2.3