canvas/src/components/ApprovalBanner.tsx

@@ -16,6 +16,8 @@ interface PendingApproval {
 
 export function ApprovalBanner() {
   const [approvals, setApprovals] = useState<PendingApproval[]>([]);
+  // Guards double-click / double-keypress during in-flight POST.
+  const [pendingApprovalId, setPendingApprovalId] = useState<string | null>(null);
 
   // Single endpoint — no N+1 per-workspace polling
   const pollApprovals = useCallback(async () => {
@@ -35,6 +37,8 @@ export function ApprovalBanner() {
   }, [pollApprovals]);
 
   const handleDecide = async (approval: PendingApproval, decision: "approved" | "denied") => {
+    if (pendingApprovalId !== null) return; // guard double-submit
+    setPendingApprovalId(approval.id);
     try {
       await api.post(`/workspaces/${approval.workspace_id}/approvals/${approval.id}/decide`, {
         decision,
@@ -44,6 +48,8 @@ export function ApprovalBanner() {
       setApprovals((prev) => prev.filter((a) => a.id !== approval.id));
     } catch {
       showToast("Failed to submit decision", "error");
+    } finally {
+      setPendingApprovalId(null);
     }
   };
 
@@ -72,22 +78,25 @@ export function ApprovalBanner() {
               <div className="flex gap-2 mt-3">
                 <button
                   type="button"
+                  disabled={pendingApprovalId !== null}
                   onClick={() => handleDecide(approval, "approved")}
+                  aria-disabled={pendingApprovalId !== null}
                   // Hover DARKER not lighter — emerald-500 on white text
                   // drops contrast vs emerald-700.
-                  className="px-3 py-1.5 bg-emerald-600 hover:bg-emerald-700 text-xs rounded-lg text-white font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-amber-950 focus-visible:ring-emerald-400/70"
+                  className="px-3 py-1.5 bg-emerald-600 hover:bg-emerald-700 disabled:opacity-40 disabled:cursor-not-allowed text-xs rounded-lg text-white font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-amber-950 focus-visible:ring-emerald-400/70"
                 >
-                  Approve
+                  {pendingApprovalId === approval.id ? "…" : "Approve"}
                 </button>
                 <button
                   type="button"
+                  disabled={pendingApprovalId !== null}
                   onClick={() => handleDecide(approval, "denied")}
-                  // Was a no-op hover (`bg-surface-card hover:bg-surface-card`).
-                  // Lift to surface-elevated on hover so the button visibly
-                  // responds before a destructive deny.
-                  className="px-3 py-1.5 bg-surface-card hover:bg-surface-elevated hover:text-ink text-xs rounded-lg text-ink-mid transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-amber-950 focus-visible:ring-amber-400/70"
+                  aria-disabled={pendingApprovalId !== null}
+                  // `text-ink` (not text-ink-mid) for WCAG AA contrast on bg-surface-card.
+                  // text-ink-mid on zinc-800 fails AA at ~3:1; text-ink passes at ~7:1.
+                  className="px-3 py-1.5 bg-surface-card hover:bg-surface-elevated hover:text-ink text-ink disabled:opacity-40 disabled:cursor-not-allowed text-xs rounded-lg font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-amber-950 focus-visible:ring-amber-400/70"
                 >
-                  Deny
+                  {pendingApprovalId === approval.id ? "…" : "Deny"}
                 </button>
               </div>
             </div>

canvas/src/components/PricingTable.tsx

@@ -117,7 +117,7 @@ function PlanCard({
       <ul className="mt-6 flex-1 space-y-2 text-sm text-ink-mid">
         {plan.features.map((f) => (
           <li key={f} className="flex items-start">
-            <span className="mr-2 text-accent" aria-hidden>
+            <span className="mr-2 text-accent" aria-hidden="true">
               ✓
             </span>
             {f}

canvas/src/components/TermsGate.tsx

@@ -87,20 +87,21 @@ export function TermsGate({ children }: { children: React.ReactNode }) {
     <>
       {children}
       {status === "pending" && (
-        // Backdrop is decorative — does NOT carry aria-hidden anymore.
-        // The earlier version put aria-hidden="true" on this wrapper,
-        // which hid the dialog AND its descendants from screen readers,
-        // making the entire terms-acceptance flow invisible to AT users.
-        // Backdrop click intentionally does nothing — this is a hard
-        // gate.
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-surface/80 backdrop-blur-sm">
+        // Backdrop is purely decorative (blur overlay). Separated from the
+        // dialog so aria-hidden on the backdrop does NOT hide the dialog from
+        // assistive tech. Backdrop click does nothing — this is a hard gate.
+        <>
+          <div aria-hidden="true" className="fixed inset-0 z-50 bg-surface/80 backdrop-blur-sm" />
           <div
             role="dialog"
             aria-modal="true"
             aria-labelledby="terms-dialog-title"
             aria-describedby="terms-dialog-body"
-            className="mx-4 max-w-lg rounded-lg border border-line bg-surface-sunken p-6 shadow-xl"
+            className="fixed inset-0 z-50 flex items-center justify-center"
           >
+            <div
+              className="mx-4 max-w-lg rounded-lg border border-line bg-surface-sunken p-6 shadow-xl"
+            >
             <h2 id="terms-dialog-title" className="text-lg font-semibold text-ink">Terms &amp; conditions</h2>
             <div id="terms-dialog-body">
               <p className="mt-3 text-sm text-ink-mid">
@@ -135,16 +136,17 @@ export function TermsGate({ children }: { children: React.ReactNode }) {
                 ref={agreeButtonRef}
                 onClick={accept}
                 disabled={submitting}
-                // Hover goes DARKER, not lighter — emerald-500 on white
-                // text drops contrast below AA vs emerald-700. Same trap
-                // I fixed in ApprovalBanner + ConfirmDialog.
-                className="rounded bg-emerald-600 hover:bg-emerald-700 px-4 py-2 text-sm font-medium text-white disabled:opacity-50 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-400 focus-visible:ring-offset-2 focus-visible:ring-offset-surface-sunken"
+                aria-disabled={submitting}
+                // Hover goes DARKER — emerald-600 on white text is 3.3:1 (WCAG AA FAIL).
+                // emerald-700 is 4.6:1 (WCAG AA PASS). Hover darkens to emerald-600.
+                className="rounded bg-emerald-700 hover:bg-emerald-600 px-4 py-2 text-sm font-medium text-white disabled:opacity-50 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-400 focus-visible:ring-offset-2 focus-visible:ring-offset-surface-sunken"
               >
-                {submitting ? "Saving…" : "I agree"}
+                {submitting ? "…" : "I agree"}
               </button>
             </div>
+            </div>
           </div>
-        </div>
+        </>
       )}
       {status === "error" && (
         <div role="alert" className="fixed bottom-4 left-4 right-4 mx-auto max-w-md rounded border border-red-800 bg-red-950 p-3 text-sm text-red-200">

canvas/src/components/Toolbar.tsx

@@ -314,7 +314,7 @@ export function Toolbar() {
       <div ref={helpRef} className="relative">
         <button
           type="button"
-          onClick={() => setHelpOpen((open) => !open)}
+          onClick={() => setHelpOpen(true)}
           className="flex items-center justify-center w-7 h-7 bg-surface-card hover:bg-surface-card/70 border border-line rounded-lg transition-colors text-ink-mid hover:text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40"
           aria-expanded={helpOpen}
           aria-label="Open shortcuts and tips"

canvas/src/components/__tests__/ApprovalBanner.test.tsx

@@ -238,6 +238,98 @@ describe("ApprovalBanner — decisions", () => {
   });
 });
 
+describe("ApprovalBanner — disabled state while submitting", () => {
+  // Deferred so we can control when the mock POST resolves.
+  let resolvePost: (value: unknown) => void;
+  let postPromise: Promise<unknown>;
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+    mockApiGet.mockReset().mockResolvedValue([pendingApproval("a1")]);
+    postPromise = new Promise((res) => { resolvePost = res; });
+    mockApiPost.mockReset().mockImplementation(() => postPromise as Promise<unknown>);
+  });
+
+  afterEach(() => {
+    cleanup();
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+    vi.resetModules();
+  });
+
+  it("disables both buttons while POST is in flight", async () => {
+    render(<ApprovalBanner />);
+    await act(async () => { await vi.runOnlyPendingTimersAsync(); });
+    const approveBtn = screen.getAllByRole("button", { name: /approve/i })[0];
+    const denyBtn = screen.getAllByRole("button", { name: /deny/i })[0];
+
+    fireEvent.click(approveBtn);
+    await act(async () => { /* flush */ });
+
+    expect((approveBtn as HTMLButtonElement).disabled).toBe(true);
+    expect((denyBtn as HTMLButtonElement).disabled).toBe(true);
+  });
+
+  it("re-enables buttons after POST resolves", async () => {
+    render(<ApprovalBanner />);
+    await act(async () => { await vi.runOnlyPendingTimersAsync(); });
+    const approveBtn = screen.getAllByRole("button", { name: /approve/i })[0];
+    const denyBtn = screen.getAllByRole("button", { name: /deny/i })[0];
+
+    fireEvent.click(approveBtn);
+    await act(async () => { /* flush */ });
+    expect((approveBtn as HTMLButtonElement).disabled).toBe(true);
+    expect((denyBtn as HTMLButtonElement).disabled).toBe(true);
+
+    // Resolve the deferred POST inside act() so React flushes the state update.
+    await act(async () => {
+      resolvePost!({});
+    });
+    expect(screen.queryByRole("alert")).toBeNull();
+  });
+
+  it("re-enables buttons after POST fails", async () => {
+    mockApiPost.mockImplementation(() => Promise.reject(new Error("Network error")));
+    render(<ApprovalBanner />);
+    await act(async () => { await vi.runOnlyPendingTimersAsync(); });
+    const approveBtn = screen.getAllByRole("button", { name: /approve/i })[0];
+
+    fireEvent.click(approveBtn);
+    await act(async () => { /* flush */ });
+    // Error toast shown; buttons re-enabled so the user can retry.
+    expect((approveBtn as HTMLButtonElement).disabled).toBe(false);
+  });
+
+  it("shows ellipsis text on the clicked button while submitting", async () => {
+    render(<ApprovalBanner />);
+    await act(async () => { await vi.runOnlyPendingTimersAsync(); });
+    fireEvent.click(screen.getAllByRole("button", { name: /approve/i })[0]);
+    await act(async () => { /* flush */ });
+    // The clicked button now shows "…" instead of "Approve"
+    expect(screen.queryByRole("button", { name: /approve/i })).toBeNull();
+    expect(screen.getAllByRole("button", { name: /^…$/ }).length).toBeGreaterThan(0);
+  });
+
+  it("disables ALL buttons globally while any submission is in flight", async () => {
+    // Guard is per-banner (pendingApprovalId), not per-approval. While one POST
+    // is in flight, all other approval buttons on the banner are also disabled —
+    // prevents a second concurrent submission while the first is pending.
+    mockApiGet.mockReset().mockResolvedValue([
+      pendingApproval("a1"),
+      pendingApproval("a2", "ws-2"),
+    ]);
+    render(<ApprovalBanner />);
+    await act(async () => { await vi.runOnlyPendingTimersAsync(); });
+    const card1Approve = screen.getAllByRole("button", { name: /approve/i })[0];
+    const card2Approve = screen.getAllByRole("button", { name: /approve/i })[1];
+    fireEvent.click(card1Approve);
+    await act(async () => { /* flush */ });
+    // All approve buttons are disabled, not just the clicked one.
+    expect((card1Approve as HTMLButtonElement).disabled).toBe(true);
+    expect((card2Approve as HTMLButtonElement).disabled).toBe(true);
+  });
+});
+
 describe("ApprovalBanner — handles empty list from server", () => {
   beforeEach(() => {
     vi.useFakeTimers();

canvas/src/components/__tests__/ConfirmDialog.test.tsx

@@ -1,12 +1,114 @@
 // @vitest-environment jsdom
-import { describe, it, expect, vi, afterEach } from "vitest";
-import { render, screen, fireEvent, cleanup } from "@testing-library/react";
+import { describe, it, expect, vi, afterEach, beforeEach } from "vitest";
+import { render, screen, fireEvent, cleanup, act } from "@testing-library/react";
 import { ConfirmDialog } from "../ConfirmDialog";
 
 afterEach(() => {
   cleanup();
 });
 
+describe("ConfirmDialog — WCAG dialog accessibility", () => {
+  it("dialog has role=dialog and aria-modal=true", () => {
+    render(
+      <ConfirmDialog
+        open
+        title="Are you sure?"
+        message="This action cannot be undone."
+        onConfirm={vi.fn()}
+        onCancel={vi.fn()}
+      />
+    );
+    const dialog = screen.getByRole("dialog");
+    expect(dialog).toBeTruthy();
+    expect(dialog.getAttribute("aria-modal")).toBe("true");
+  });
+
+  it("dialog has aria-labelledby pointing to the title", () => {
+    render(
+      <ConfirmDialog
+        open
+        title="Delete workspace"
+        message="This will permanently delete the workspace."
+        onConfirm={vi.fn()}
+        onCancel={vi.fn()}
+      />
+    );
+    const dialog = screen.getByRole("dialog");
+    const labelledBy = dialog.getAttribute("aria-labelledby");
+    expect(labelledBy).toBeTruthy();
+    const titleEl = document.getElementById(labelledBy!);
+    expect(titleEl?.textContent?.trim()).toBe("Delete workspace");
+  });
+
+  it("Escape key invokes onCancel", () => {
+    const onCancel = vi.fn();
+    render(
+      <ConfirmDialog
+        open
+        title="Title"
+        message="Message"
+        onConfirm={vi.fn()}
+        onCancel={onCancel}
+      />
+    );
+    fireEvent.keyDown(window, { key: "Escape" });
+    expect(onCancel).toHaveBeenCalledTimes(1);
+  });
+
+  it("Enter key invokes onConfirm", () => {
+    const onConfirm = vi.fn();
+    render(
+      <ConfirmDialog
+        open
+        title="Title"
+        message="Message"
+        onConfirm={onConfirm}
+        onCancel={vi.fn()}
+      />
+    );
+    fireEvent.keyDown(window, { key: "Enter" });
+    expect(onConfirm).toHaveBeenCalledTimes(1);
+  });
+
+  it("moves focus to the first button when dialog opens (WCAG 2.4.3)", async () => {
+    const onConfirm = vi.fn();
+    render(
+      <ConfirmDialog
+        open
+        title="Title"
+        message="Message"
+        onConfirm={onConfirm}
+        onCancel={vi.fn()}
+      />
+    );
+    // Flush requestAnimationFrame so ConfirmDialog's internal rAF focus fires
+    await act(async () => {
+      await new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r)));
+    });
+    const firstButton = screen.getAllByRole("button")[0];
+    expect(document.activeElement).toBe(firstButton);
+  });
+});
+
+describe("ConfirmDialog — backdrop", () => {
+  it("backdrop click invokes onCancel", () => {
+    const onCancel = vi.fn();
+    render(
+      <ConfirmDialog
+        open
+        title="Title"
+        message="Message"
+        onConfirm={vi.fn()}
+        onCancel={onCancel}
+      />
+    );
+    const backdrop = document.querySelector('[aria-label="Dismiss dialog"]') as HTMLElement;
+    expect(backdrop).toBeTruthy();
+    fireEvent.click(backdrop);
+    expect(onCancel).toHaveBeenCalledTimes(1);
+  });
+});
+
 describe("ConfirmDialog singleButton prop", () => {
   it("renders Cancel button by default", () => {
     render(

canvas/src/components/__tests__/PricingTable.test.tsx

@@ -145,6 +145,17 @@ describe("PricingTable", () => {
     expect(mockedStartCheckout).not.toHaveBeenCalled();
   });
 
+  it("marks feature checkmarks as aria-hidden (decorative, not exposed to screen readers)", () => {
+    render(<PricingTable />);
+    const checks = document.body.querySelectorAll('[aria-hidden="true"]');
+    // Every feature list has a ✓ glyph; all should be aria-hidden.
+    expect(checks.length).toBeGreaterThan(0);
+    // The checkmark spans use text-accent (decorative SVG-like glyphs).
+    checks.forEach((el) => {
+      expect(el.textContent?.trim()).toBe("✓");
+    });
+  });
+
   it("disables the button while a checkout call is in flight", async () => {
     mockedFetchSession.mockResolvedValue({
       user_id: "u1",

canvas/src/components/__tests__/TermsGate.test.tsx

@@ -189,6 +189,49 @@ describe("TermsGate — accept flow", () => {
   });
 });
 
+describe("TermsGate — I agree button accessibility", () => {
+  it("shows ellipsis on the I agree button while POST is in flight", async () => {
+    // Deferred POST so we can control when it resolves and observe the
+    // mid-flight button state without fake timers.
+    let resolvePost: (r: Response) => void;
+    const postDeferred = new Promise<Response>((r) => { resolvePost = r; });
+    // Intercept: terms-status → pending (first fetch), POST deferred (second).
+    mockFetch(new Response(JSON.stringify({ accepted: false }), { status: 200 }));
+    vi.spyOn(global, "fetch").mockImplementation(
+      () => postDeferred as unknown as Promise<Response>
+    );
+
+    render(<TermsGate><div>App content</div></TermsGate>);
+    await waitFor(() => screen.getByRole("dialog"));
+    fireEvent.click(screen.getByRole("button", { name: /i agree/i }));
+
+    // Ellipsis replaces "I agree" while POST is in flight
+    expect(screen.queryByRole("button", { name: /i agree/i })).toBeNull();
+    expect(screen.getAllByRole("button").some((b) => b.textContent === "…")).toBeTruthy();
+
+    act(() => { resolvePost!(new Response("ok", { status: 200 })); });
+  });
+
+  it("has aria-disabled while submitting", async () => {
+    let resolvePost: (r: Response) => void;
+    const postDeferred = new Promise<Response>((r) => { resolvePost = r; });
+    mockFetch(new Response(JSON.stringify({ accepted: false }), { status: 200 }));
+    vi.spyOn(global, "fetch").mockImplementation(
+      () => postDeferred as unknown as Promise<Response>
+    );
+
+    render(<TermsGate><div>App content</div></TermsGate>);
+    await waitFor(() => screen.getByRole("dialog"));
+    fireEvent.click(screen.getByRole("button", { name: /i agree/i }));
+
+    // Find the ellipsis button and check aria-disabled
+    const ellipsisBtn = screen.getAllByRole("button").find((b) => b.textContent === "…");
+    expect(ellipsisBtn?.getAttribute("aria-disabled")).toBe("true");
+
+    act(() => { resolvePost!(new Response("ok", { status: 200 })); });
+  });
+});
+
 describe("TermsGate — error state", () => {
   it("shows an error alert when terms-status fetch fails with non-401", async () => {
     mockFetch(new Response("Gateway Timeout", { status: 504 }));

canvas/src/components/__tests__/Toolbar.test.tsx

@@ -255,6 +255,32 @@ describe("Toolbar — Help popover", () => {
     fireEvent.click(closeBtn);
     expect(screen.queryByRole("dialog")).toBeNull();
   });
+
+  it("closes when pointer is pressed outside the help popover", () => {
+    render(<Toolbar />);
+    const helpBtn = screen.getByRole("button", { name: /open shortcuts and tips/i });
+    fireEvent.click(helpBtn);
+    expect(screen.getByRole("dialog")).toBeTruthy();
+    // Simulate pointerdown outside the help popover (not on the help button)
+    fireEvent.pointerDown(document.body);
+    expect(screen.queryByRole("dialog")).toBeNull();
+  });
+
+  it("opens on click even after a previous pointer-outside close", () => {
+    // Regression: clicking outside closed the popover AND toggled the button
+    // state, so the next click on the button would close it again.
+    // The fix makes the button always open (never toggle) so re-opening works.
+    render(<Toolbar />);
+    const helpBtn = screen.getByRole("button", { name: /open shortcuts and tips/i });
+    fireEvent.click(helpBtn);
+    expect(screen.getByRole("dialog")).toBeTruthy();
+    // Click outside (pointerdown on body, not on help button)
+    fireEvent.pointerDown(document.body);
+    expect(screen.queryByRole("dialog")).toBeNull();
+    // Click the help button again — must re-open, not double-close
+    fireEvent.click(helpBtn);
+    expect(screen.getByRole("dialog")).toBeTruthy();
+  });
 });
 
 describe("Toolbar — A2A edges toggle", () => {