From 5fc7008c05a4a6e527b1e617c8705f367d29f2f7 Mon Sep 17 00:00:00 2001 From: agent-linusswartz Date: Thu, 30 Jul 2026 11:15:01 -0300 Subject: [PATCH 1/4] feat(tabs): add inline close and confirm bulk closure --- docs/accessibility.md | 2 +- index.html | 178 ++++++++++++++++-- scripts/validate-accessibility.mjs | 5 +- scripts/validate-browser-quality.mjs | 35 +++- scripts/validate-runtime-smoke.mjs | 33 +++- src/capabilities/02c-shell-bootstrap-ui.js | 4 +- src/capabilities/03-dom-editor-results.js | 6 +- src/capabilities/03a-localization-messages.js | 5 + src/capabilities/23-sql-tabs-state.js | 40 +++- src/capabilities/24-sql-tabs-render.js | 42 ++++- src/index.template.html | 16 +- src/styles/03-components.css | 64 ++++++- src/ui/72-bindings-advanced-ui.js | 9 +- 13 files changed, 392 insertions(+), 47 deletions(-) diff --git a/docs/accessibility.md b/docs/accessibility.md index 33c8943..8c8e94c 100644 --- a/docs/accessibility.md +++ b/docs/accessibility.md @@ -11,7 +11,7 @@ hSQLite Editor targets WCAG 2.2 Level AA for the latest release. Accessibility i - Controls require programmatic names; placeholders are not labels. - Dialogs require an accessible name, appropriate description, focus containment, and focus restoration. - Status and error feedback must be exposed without moving focus unnecessarily. -- SQL tabs keep form controls outside `role="tab"`. F2 starts an inline rename, Enter commits, Escape cancels, and both paths restore focus to the same tab. Rename and close commands for the active tab live outside the tablist and remain keyboard reachable. +- SQL tabs keep form controls outside `role="tab"`. F2 starts an inline rename, Enter commits, Escape cancels, and both paths restore focus to the same tab. The rename command for the active tab remains outside the tablist; each close command is a sibling of its tab, appears on hover or focus, and remains keyboard reachable. Closing a tab restores focus to the resulting active tab. Closing all tabs requires a count-specific destructive confirmation whose initial focus is Cancel. - Error toasts use atomic assertive announcements; informational toasts use atomic polite announcements. Toasts never take focus, and their close buttons have localized accessible names. - Results-grid sorting, row selection, current-row movement, and column operations require keyboard equivalents or an accessible command surface. - SQL Map table and field selectors expose names derived from the visible database identifiers. Relationship controls support Enter and Space, preserve pressed state while a source is selected, and announce source, cancellation, blocked validation, and completion within the open dialog. diff --git a/index.html b/index.html index 0b632cd..df64f17 100644 --- a/index.html +++ b/index.html @@ -1983,7 +1983,8 @@ align-items: center; gap: 9px; min-width: 0; - width: 100%; + width: auto; + flex: 1 1 auto; min-height: 32px; padding: 0 10px 0 12px; border: 0; @@ -2072,6 +2073,47 @@ display: none; } +.sql-tab-inline-actions { +display: inline-flex; + align-items: center; + justify-content: flex-end; + width: 28px; + min-width: 28px; + margin-right: 3px; + opacity: 0; + visibility: hidden; + pointer-events: none; + transition: opacity 0.15s ease, visibility 0.15s ease; +} + +.sql-tab-item:hover .sql-tab-inline-actions, + .sql-tab-item:focus-within .sql-tab-inline-actions { +opacity: 1; + visibility: visible; + pointer-events: auto; +} + +.sql-tab-item.is-editing .sql-tab-inline-actions { +display: none; +} + +.sql-tab-inline-action { +width: 26px; + height: 26px; + min-width: 26px; + min-height: 26px; + padding: 0; + border-color: transparent; + background: transparent; + color: var(--mutedText); +} + +.sql-tab-inline-action:hover { +border-color: color-mix(in srgb, var(--danger) 28%, var(--border)); + background: color-mix(in srgb, var(--danger) 9%, var(--input-bg)); + color: var(--danger); +} + .sql-tab-header-action { width: 30px; height: 30px; @@ -2079,6 +2121,26 @@ flex: 0 0 auto; } +.sql-tabs-close-all { +border-color: transparent; + background: color-mix(in srgb, var(--border) 35%, transparent); + color: var(--mutedText); +} + +.sql-tabs-close-all:not(:disabled):hover { +border-color: color-mix(in srgb, var(--border) 70%, transparent); + background: color-mix(in srgb, var(--border) 55%, transparent); + color: var(--foreground); +} + +@media (hover: none), (pointer: coarse) { +.sql-tab-item.active .sql-tab-inline-actions { +opacity: 1; + visibility: visible; + pointer-events: auto; +} +} + .new-sql-tab-btn { width: 34px; height: 30px; @@ -5366,7 +5428,7 @@

Schema

- - @@ -5624,6 +5683,17 @@

Fechar aba?

+ + + +