diff options
| author | netop://ウィビ <paul@webb.page> | 2026-04-24 16:37:49 -0700 |
|---|---|---|
| committer | netop://ウィビ <paul@webb.page> | 2026-04-24 16:37:49 -0700 |
| commit | c013ed57bf3d7dd83bd59a9b984d87aebde6003c (patch) | |
| tree | 31d25456496f013f13f3cae1ded376d5323b3200 /source/library/components/TabBar.svelte | |
| parent | 510fd8cbe53abb39cba2c7cbaaefcf2783dc0066 (diff) | |
| download | graphiql-c013ed57bf3d7dd83bd59a9b984d87aebde6003c.tar.gz graphiql-c013ed57bf3d7dd83bd59a9b984d87aebde6003c.zip | |
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
Diffstat (limited to 'source/library/components/TabBar.svelte')
| -rw-r--r-- | source/library/components/TabBar.svelte | 15 |
1 files changed, 12 insertions, 3 deletions
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> |