@cplieger/web-terminal-ui 4.1.0 → 4.2.0

package/css/30-tabs.css

@@ -356,6 +356,12 @@
      from the filled done/working/input states (WCAG 1.4.1). */
   background: transparent;
   border: 1.5px solid color-mix(in oklch, var(--text) 45%, transparent);
+  /* Reset every transient visual owned by a status. In particular, a dot that
+     leaves working must stop its pulse, and a dot that enters working must not
+     carry the input ring or an exited opacity into the animated paint layer. */
+  box-shadow: none;
+  opacity: 1;
+  animation: none;
 }
 
 /* Reveal a dot only once its session has reported activity (the tabs feature
@@ -370,31 +376,33 @@
   border: 1.5px solid color-mix(in oklch, var(--text) 45%, transparent);
 }
 
-/* Agent working: solid pulsing white. (Was purple to match Kiro IDE's thinking
-   colour, but that collides with the purple active-tab fill; white reads clearly
-   on every tab state.) Motion is the primary non-hue cue. Server-side this is
-   driven by the OSC 9;4 progress signal, so it tracks agent activity, not the
-   user typing at the prompt. */
+/* Agent working: solid pulsing pale lime. Its high lightness keeps it clear on
+   every tab state, while its yellow-green hue complements the Kiro purple active
+   tab. Motion is the primary non-hue cue. Server-side this is driven by the OSC
+   9;4 progress signal, so it tracks agent activity, not the user typing at the
+   prompt. */
 :where(.wt-root) .wt-status-dot[data-status="working"] {
-  background: #fff;
-  border-color: #fff;
+  background: #d9f99d;
+  border-color: #d9f99d;
   animation: wt-pulse 1.2s ease-in-out infinite;
 }
 
-/* Agent done / ready: solid green, matching Kiro IDE's "Ready" (#22c55e), no
-   motion. The filled dot distinguishes it from the hollow idle without hue. */
+/* Agent done / ready: solid saturated green, matching Kiro IDE's "Ready"
+   (#22c55e), no motion. Keeping it darker and more saturated than working's
+   pale lime makes the two states distinct by lightness as well as motion. */
 :where(.wt-root) .wt-status-dot[data-status="done"] {
   background: #22c55e;
   border-color: #22c55e;
 }
 
-/* User action required (permission / approval): solid amber matching Kiro IDE's
-   "waiting-approval" (#fbbf24), plus a ring so it reads as "needs you" via shape
-   as well as hue. It persists until you act on or switch into the tab. */
+/* User action required (permission / approval): solid orange (#fb923c), shifted
+   away from the old amber so it is clearly separated from both pale-lime working
+   and green done, plus a matching ring so it reads as "needs you" via shape as
+   well as hue. It persists until you act on or switch into the tab. */
 :where(.wt-root) .wt-status-dot[data-status="input"] {
-  background: #fbbf24;
-  border-color: #fbbf24;
-  box-shadow: 0 0 0 2px oklch(85% 0.16 85deg / 40%);
+  background: #fb923c;
+  border-color: #fb923c;
+  box-shadow: 0 0 0 2px rgb(251 146 60 / 40%);
 }
 
 /* Exited: a dim hollow dot, static; distinct from idle by its lower opacity. */
@@ -405,7 +413,19 @@
 }
 
 @keyframes wt-pulse {
+  0%,
+  100% {
+    /* Pin the animated layer's paint as well as its opacity. When working begins
+       in the same frame that input/done ends, an opacity-only animation can
+       pulse the previously rasterized orange/green dot. */
+    background-color: #d9f99d;
+    border-color: #d9f99d;
+    opacity: 1;
+  }
+
   50% {
+    background-color: #d9f99d;
+    border-color: #d9f99d;
     opacity: 0.4;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cplieger/web-terminal-ui",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "type": "module",
   "description": "Reference touch-first browser UI for @cplieger/web-terminal-engine: a composable kernel + feature modules (tabs, activity monitor, mobile toolbar, context menu, IME, predictive echo, viewport handling) and CSS. One createTerminal() call.",
   "license": "GPL-3.0-or-later",
@@ -50,7 +50,7 @@
     "@vitest/coverage-v8": "4.1.10",
     "eslint": "10.7.0",
     "fast-check": "4.9.0",
-    "happy-dom": "20.10.6",
+    "happy-dom": "20.11.0",
     "html-validate": "11.5.6",
     "knip": "6.27.0",
     "prettier": "3.9.5",

package/src/features/tabs/index.ts

@@ -908,6 +908,48 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
           }
           switchTo(tab.id);
         });
+        // Keyboard interaction for the ARIA tabs pattern (WCAG 2.1.1): arrows
+        // move selection (wrapping), Home/End jump to the boundaries, Delete
+        // closes the focused tab. Pairs with the roving tabindex the kernel's
+        // registerTab manages (selected tab is tabIndex 0, others -1).
+        el.addEventListener("keydown", (e) => {
+          const current = tabList.indexOf(tab);
+          if (current < 0) {
+            return;
+          }
+
+          if (e.key === "Delete") {
+            e.preventDefault();
+            void close_(tab.id);
+            return;
+          }
+
+          let targetIndex: number;
+          switch (e.key) {
+            case "ArrowLeft":
+              targetIndex = (current - 1 + tabList.length) % tabList.length;
+              break;
+            case "ArrowRight":
+              targetIndex = (current + 1) % tabList.length;
+              break;
+            case "Home":
+              targetIndex = 0;
+              break;
+            case "End":
+              targetIndex = tabList.length - 1;
+              break;
+            default:
+              return;
+          }
+
+          e.preventDefault();
+          const target = tabList[targetIndex];
+          if (!target) {
+            return;
+          }
+          switchTo(target.id);
+          target.el.focus();
+        });
         close.addEventListener("click", (e) => {
           e.stopPropagation();
           void close_(tab.id);
@@ -1169,6 +1211,29 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
         }
       }
 
+      // moveTab shifts a tab one slot left or right in tabList and re-inserts
+      // every tab element in list order (before the "+") so the DOM matches.
+      // It is the single-pointer / non-drag alternative to the drag-and-drop
+      // reorder (WCAG 2.5.7), surfaced as Move left / Move right in the tab
+      // context menu.
+      function moveTab(id: string, delta: -1 | 1): void {
+        const from = tabList.findIndex((t) => t.id === id);
+        const to = from + delta;
+        if (from < 0 || to < 0 || to >= tabList.length) {
+          return;
+        }
+        const [tab] = tabList.splice(from, 1);
+        if (!tab) {
+          return;
+        }
+        tabList.splice(to, 0, tab);
+        for (const item of tabList) {
+          scroller.insertBefore(item.el, newBtn);
+        }
+        syncChrome();
+        ctx.announce(`Moved ${tab.display} to position ${String(to + 1)}`);
+      }
+
       // adoptSession adds a tab for a session that exists server-side but has no
       // local tab yet, e.g. one created in another browser (the server pushes it
       // over the status SSE, and the poll fallback lists it). This keeps every
@@ -1410,6 +1475,12 @@ export function tabs(opts: TabsOptions = {}): TerminalFeature<TabsApi> {
           return;
         }
         const n = tabList.length;
+        tabMenuItem("Move left", idx <= 0, () => {
+          moveTab(id, -1);
+        });
+        tabMenuItem("Move right", idx >= n - 1, () => {
+          moveTab(id, 1);
+        });
         tabMenuItem("Close", false, () => {
           void close_(id);
         });

package/src/kernel/a11y.ts

@@ -97,10 +97,14 @@ export function createTablist(panel: HTMLElement): TablistController {
     tab.setAttribute("role", "tab");
     tab.setAttribute("aria-controls", panelId);
     tab.setAttribute("aria-selected", "false");
+    // Roving tabindex (WAI-ARIA APG Tabs pattern): only the selected tab is in
+    // the Tab sequence; the others are focusable programmatically (arrow keys).
+    tab.tabIndex = -1;
 
     return {
       setSelected(selected: boolean): void {
         tab.setAttribute("aria-selected", selected ? "true" : "false");
+        tab.tabIndex = selected ? 0 : -1;
         if (selected) {
           // The panel is labelled by whichever tab is currently selected.
           panel.setAttribute("aria-labelledby", tabId);
@@ -113,6 +117,7 @@ export function createTablist(panel: HTMLElement): TablistController {
         tab.removeAttribute("role");
         tab.removeAttribute("aria-controls");
         tab.removeAttribute("aria-selected");
+        tab.removeAttribute("tabindex");
         if (panel.getAttribute("aria-labelledby") === tabId) {
           panel.removeAttribute("aria-labelledby");
         }