fix(webui): let the tab strip and the diff stats pass the accessibility scan

Two findings the scan reports, both real, both fixed in code rather than
recorded as debt - the scan refuses contrast exceptions, and a reviewed fix is
the house rule.

The workspace tab strip claimed `role="tablist"` and gave each tab a
`role="tab"`, but every tab also carries a close button, and a tablist owns
only tabs: axe reported "children which are not allowed" for the close button
in every state, including the empty one. The app has no `role="tabpanel"` for
the strip to point at either, so the tabs pattern was already incomplete. The
strip is a group of toggle buttons now - `role="group"` on the row,
`aria-pressed` on the tab that is open - and the close button stays where it
is. The rendered vocabulary changed, so the presentation gate's reviewed
signature is recorded for the two modules.

The diff stats are 12px text drawn in the status colours, and the light
theme's green measures 2.7:1 on the grouped surface; the scan reported the
addition and the deletion badge in both themes. The stylesheet already asked
for `--code-theme-addition-foreground` and `--code-theme-deletion-foreground`,
and those tokens did not exist, so it fell back to colours that never passed.
They are defined now: green 700 and red 600 on light (6.3:1 and 5.7:1), green
400 and red 300 on dark (6.3:1 and 5.9:1).

Author: stevenjj33

packages/webui/src/client/features/workspace/ui/WebuiWorkspaceTabStrip.public.tsx

@@ -286,7 +286,7 @@ export function WebuiWorkspaceTabStrip({
   const tabListRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
     tabListRef.current
-      ?.querySelector<HTMLElement>('[aria-selected="true"]')
+      ?.querySelector<HTMLElement>('[aria-pressed="true"]')
       ?.scrollIntoView({ block: "nearest", inline: "nearest" });
   }, [state.activeTabId]);
 
@@ -335,8 +335,7 @@ export function WebuiWorkspaceTabStrip({
             variant="plain"
             size="regular"
             className="webui-workspace-tab-control"
-            role="tab"
-            aria-selected={state.activeTabId === item.id}
+            aria-pressed={state.activeTabId === item.id}
             data-testid={`workspace-tab-${item.id}`}
             onClick={() => dispatch({ type: "select-tab", tabId: item.id })}
           >

packages/webui/src/client/features/workspace/ui/WorkspacePanels.tsx

@@ -752,7 +752,7 @@ export function WebuiWorkspacePanel({ state, dispatch, sessionId, workspaceDir,
   return <aside ref={panelRef} className={`webui-workspace-panel ${state.expanded ? "is-expanded" : ""} ${panelClosing ? "is-closing" : ""} ${expansionMotion ? `is-${expansionMotion}` : ""}`} onAnimationEnd={handlePanelAnimationEnd} style={panelWidth !== undefined && !state.expanded && surfaceTier === "split" ? { width: `${panelWidth}px`, flex: `0 0 ${panelWidth}px` } : undefined} data-testid="workspace-panel" data-active-tab={tab} data-webui-surface-tier={surfaceTier}>
     <div className="webui-workspace-panel-resize-handle" role="separator" aria-label="调整工作区面板宽度" aria-orientation="vertical" aria-valuenow={Math.round(panelWidth ?? 50)} tabIndex={state.expanded ? -1 : 0} onPointerDown={startPanelResize} onPointerMove={movePanelResize} onPointerUp={stopPanelResize} onPointerCancel={stopPanelResize} onKeyDown={nudgePanelResize} />
     <div className="webui-workspace-panel-header">
-      <div className="webui-workspace-tabs" role="tablist" aria-label="工作区面板标签">
+      <div className="webui-workspace-tabs" role="group" aria-label="工作区面板标签">
         <WebuiWorkspaceTabStrip state={state} dispatch={panelDispatch} sessionId={sessionId} />
       </div>
       <div className="webui-workspace-panel-actions">

packages/webui/src/client/styles/tokens.css

@@ -280,6 +280,11 @@
   --border_tertiary_hover: var(--opacity_black_1_8);
   --border_tertiary_inactive: var(--opacity_black_1_8);
   --border_tertiary_press: var(--opacity_black_1_15);
+  /* The diff stats are 12px text, and a code colour has to clear WCAG AA
+   * (4.5:1) against the surface it is drawn on. The status colours do not:
+   * the light theme's green measures 2.7:1 on the grouped surface. */
+  --code-theme-addition-foreground: var(--green_700);
+  --code-theme-deletion-foreground: var(--red_600);
   --icon_default_accent: var(--blue_400);
   --icon_default_inverted: var(--gray_0);
   --icon_default_inverted_static: var(--opacity_white_0_95);
@@ -495,6 +500,11 @@
   --border_tertiary_hover: var(--opacity_black_1_8);
   --border_tertiary_inactive: var(--opacity_black_1_8);
   --border_tertiary_press: var(--opacity_black_1_15);
+  /* The diff stats are 12px text, and a code colour has to clear WCAG AA
+   * (4.5:1) against the surface it is drawn on. The status colours do not:
+   * the light theme's green measures 2.7:1 on the grouped surface. */
+  --code-theme-addition-foreground: var(--green_700);
+  --code-theme-deletion-foreground: var(--red_600);
   --icon_default_accent: var(--blue_400);
   --icon_default_inverted: var(--gray_0);
   --icon_default_inverted_static: var(--opacity_white_0_95);
@@ -713,6 +723,10 @@
   --border_tertiary_hover: var(--opacity_white_0_15);
   --border_tertiary_inactive: var(--opacity_white_0_15);
   --border_tertiary_press: var(--opacity_white_0_8);
+  /* The dark theme draws the diff stats on a darker surface, so the code
+   * colours are the lighter steps: they measure 6.3:1 and 5.9:1 there. */
+  --code-theme-addition-foreground: var(--green_400);
+  --code-theme-deletion-foreground: var(--red_300);
   --icon_default_accent: var(--blue_500);
   --icon_default_inverted: var(--gray_1000);
   --icon_default_inverted_static: var(--opacity_white_0_95);

packages/webui/test/browser/workspace-panel-actions.spec.mjs

@@ -111,8 +111,8 @@ test("an open preview tab survives leaving the session and coming back", async (
   // so the panel re-renders from a store that never asked the runtime again.
   await expect(preview).toBeVisible();
   await expect(preview).toContainText("export const answer = 42;");
-  await expect(page.getByRole("tab", { name: /a\.ts/u })).toHaveAttribute(
-    "aria-selected",
+  await expect(page.getByRole("button", { name: "a.ts", exact: true })).toHaveAttribute(
+    "aria-pressed",
     "true",
   );
   expect(

scripts/lib/webui-presentation-inventory.json

@@ -228,14 +228,14 @@
     "features/transcript/ui/markdown.public.tsx": "125a314c717770f5",
     "features/transcript/ui/webui-mermaid.tsx": "fc1aab96c48f3a3d",
     "features/workspace/ui/WebuiWorkspaceDirectoryBrowser.public.tsx": "9feb6e3d2b274a52",
-    "features/workspace/ui/WebuiWorkspaceTabStrip.public.tsx": "b267d52d32598fdd",
+    "features/workspace/ui/WebuiWorkspaceTabStrip.public.tsx": "4d45a3b6e622571c",
     "features/workspace/ui/WorkspaceArchiveView.tsx": "b4ac1e613b7eff7c",
     "features/workspace/ui/WorkspaceCanvas.tsx": "cb7f6f22caa93fd0",
     "features/workspace/ui/WorkspaceFileTree.tsx": "606b6b0696e488b7",
     "features/workspace/ui/WorkspaceHtmlPreview.tsx": "f19ad21c5fe816f1",
     "features/workspace/ui/WorkspaceMediaPreview.tsx": "cbeadd98697a96c9",
     "features/workspace/ui/WorkspacePanelControls.tsx": "36d3cfa00459a60a",
-    "features/workspace/ui/WorkspacePanels.tsx": "9c2df5d705fbb2fb",
+    "features/workspace/ui/WorkspacePanels.tsx": "8137d1d6980c6917",
     "features/workspace/ui/WorkspaceProgressPanel.tsx": "e05e76aca83cf877",
     "shell/ArchonPage.tsx": "ce4b452ba9bb68ac",
     "shell/ArchonShell.tsx": "3dfc406588433f84",