From 600b7b7ea20f9b4621e5b30ec74e4cf106cd6c5a Mon Sep 17 00:00:00 2001
From: huyplb <huyplb@live.com>
Date: Sun, 1 Nov 2026 14:51:15 -0600
Subject: [PATCH 1/2] fix(web): announce the Safe-mode confirm and Saved
 Credentials as dialogs; Escape closes Saved Credentials

From the 2026-11-01 manual walk:

- The Safe-mode confirm (sql-write-confirm) and Saved Credentials were
  plain divs: a screen reader was not told a dialog had opened. Both now
  have role="dialog", aria-modal and aria-labelledby on their title.
- Saved Credentials did not close on Escape, unlike the other dialogs,
  and its close button was an unnamed icon. It closes on Escape now, but
  not while the credential form is open on top, and the button is named.

useEscapeKey (shared/lib) is the Escape listener WorkspaceSettingsDialog
and others each write by hand, with an enabled flag for layered dialogs.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../components/CredentialManager.test.tsx     | 48 +++++++++++++++++++
 .../components/CredentialManager.tsx          | 11 ++++-
 .../components/WriteConfirmDialog.test.tsx    | 19 ++++++++
 .../components/WriteConfirmDialog.tsx         |  8 +++-
 .../src/frontend/shared/lib/useEscapeKey.ts   | 24 ++++++++++
 5 files changed, 107 insertions(+), 3 deletions(-)
 create mode 100644 apps/web/src/frontend/features/connections/components/CredentialManager.test.tsx
 create mode 100644 apps/web/src/frontend/features/sql-editor/components/WriteConfirmDialog.test.tsx
 create mode 100644 apps/web/src/frontend/shared/lib/useEscapeKey.ts

diff --git a/apps/web/src/frontend/features/connections/components/CredentialManager.test.tsx b/apps/web/src/frontend/features/connections/components/CredentialManager.test.tsx
new file mode 100644
index 000000000..c2a952b90
--- /dev/null
+++ b/apps/web/src/frontend/features/connections/components/CredentialManager.test.tsx
@@ -0,0 +1,48 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+// The editor store loads the theme store, which reads the colour scheme.
+window.matchMedia ??= ((media: string) => ({
+  matches: false,
+  media,
+  onchange: null,
+  addEventListener: () => {},
+  removeEventListener: () => {},
+  addListener: () => {},
+  removeListener: () => {},
+  dispatchEvent: () => false,
+})) as unknown as typeof window.matchMedia;
+
+// The credential form is its own layer; a stand-in is enough to open it.
+vi.mock('./ConnectionModal', () => ({
+  ConnectionModal: ({ open }: { open: boolean }) => (open ? <div data-testid="connection-form" /> : null),
+}));
+
+import { CredentialManager } from './CredentialManager';
+
+describe('CredentialManager', () => {
+  it('is a modal dialog named Saved Credentials, with a named close button', () => {
+    render(<CredentialManager open onClose={() => undefined} />);
+    const dialog = screen.getByRole('dialog', { name: 'Saved Credentials' });
+    expect(dialog.getAttribute('aria-modal')).toBe('true');
+    expect(screen.getByRole('button', { name: 'Close saved credentials' })).toBeTruthy();
+  });
+
+  it('closes on Escape', () => {
+    const onClose = vi.fn();
+    render(<CredentialManager open onClose={onClose} />);
+    fireEvent.keyDown(window, { key: 'Escape' });
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('leaves Escape to the credential form while it is open on top', () => {
+    const onClose = vi.fn();
+    render(<CredentialManager open onClose={onClose} />);
+    fireEvent.click(screen.getByRole('button', { name: /Add Credential/ }));
+    expect(screen.getByTestId('connection-form')).toBeTruthy();
+    fireEvent.keyDown(window, { key: 'Escape' });
+    expect(onClose).not.toHaveBeenCalled();
+  });
+});
diff --git a/apps/web/src/frontend/features/connections/components/CredentialManager.tsx b/apps/web/src/frontend/features/connections/components/CredentialManager.tsx
index a32f23176..7a300b5da 100644
--- a/apps/web/src/frontend/features/connections/components/CredentialManager.tsx
+++ b/apps/web/src/frontend/features/connections/components/CredentialManager.tsx
@@ -21,6 +21,7 @@ import { CloudProviderCredentialsSection } from '@/features/connections/componen
 import { PROVIDER_SETTINGS, type ConnectionOptions, type Dialect } from '@/shared/lib/provider-settings';
 import { dialectLabel } from '@/shared/lib/dialectLabel';
 import { sessionPasswordMap, setSessionPassword } from '@/shared/lib/sessionPasswords';
+import { useEscapeKey } from '@/shared/lib/useEscapeKey';
 import type { SavedConnectionSummary } from '@/shared/api/authApi';
 
 interface Props {
@@ -157,6 +158,9 @@ export const CredentialManager: React.FC<Props> = ({ open, onClose }) => {
     return groups;
   }, [visible]);
 
+  // Escape closes the manager, but not while the credential form is open on top.
+  useEscapeKey(onClose, open && !adding && !editing);
+
   if (!open) return null;
 
   return createPortal(
@@ -165,6 +169,9 @@ export const CredentialManager: React.FC<Props> = ({ open, onClose }) => {
       className="fixed inset-0 z-[90] flex items-center justify-center bg-black/80 backdrop-blur-sm p-4"
     >
       <div
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="cred-manager-title"
         className="w-full max-w-[620px] bg-slate-900 border border-slate-800 rounded-xl shadow-2xl overflow-hidden"
         onClick={(e) => e.stopPropagation()}
       >
@@ -174,7 +181,7 @@ export const CredentialManager: React.FC<Props> = ({ open, onClose }) => {
               <KeyRound className="w-4.5 h-4.5 text-cyan-400" />
             </div>
             <div>
-              <h2 className="text-slate-100 font-bold text-base">Saved Credentials</h2>
+              <h2 id="cred-manager-title" className="text-slate-100 font-bold text-base">Saved Credentials</h2>
               <p className="text-xs text-slate-400 mt-0.5">
                 {tab === 'database'
                   ? 'Encrypted DB connections · reusable from the connection dropdowns'
@@ -192,6 +199,8 @@ export const CredentialManager: React.FC<Props> = ({ open, onClose }) => {
             )}
             <button
               data-testid="cred-close-btn"
+              type="button"
+              aria-label="Close saved credentials"
               onClick={onClose}
               className="p-1.5 hover:bg-slate-800 rounded-lg text-slate-400 hover:text-slate-200 transition"
             >
diff --git a/apps/web/src/frontend/features/sql-editor/components/WriteConfirmDialog.test.tsx b/apps/web/src/frontend/features/sql-editor/components/WriteConfirmDialog.test.tsx
new file mode 100644
index 000000000..d4d77d7f7
--- /dev/null
+++ b/apps/web/src/frontend/features/sql-editor/components/WriteConfirmDialog.test.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { WriteConfirmDialog } from './WriteConfirmDialog';
+
+describe('WriteConfirmDialog', () => {
+  it('is announced as a modal dialog named by its title', () => {
+    render(
+      <WriteConfirmDialog
+        writeStatements={['UPDATE products SET name = name WHERE id = 1']}
+        credentialCount={1}
+        onCancel={() => undefined}
+        onConfirm={() => undefined}
+      />
+    );
+    const dialog = screen.getByRole('dialog', { name: 'Safe mode: run UPDATE statements?' });
+    expect(dialog.getAttribute('aria-modal')).toBe('true');
+  });
+});
diff --git a/apps/web/src/frontend/features/sql-editor/components/WriteConfirmDialog.tsx b/apps/web/src/frontend/features/sql-editor/components/WriteConfirmDialog.tsx
index 7a5469f2d..dfa002cb7 100644
--- a/apps/web/src/frontend/features/sql-editor/components/WriteConfirmDialog.tsx
+++ b/apps/web/src/frontend/features/sql-editor/components/WriteConfirmDialog.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useId, useMemo, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { AlertCircle, Play, Info, ShieldAlert } from 'lucide-react';
 import type { ReadonlyWriteTarget } from '@/features/sql-editor/state/useSqlEditorStore';
@@ -68,6 +68,7 @@ export const WriteConfirmDialog: React.FC<Props> = ({
     return [...set];
   }, [mutating]);
 
+  const titleId = useId();
   const [ackedMissingWhere, setAckedMissingWhere] = useState(false);
   const needsWhereAck = requireMissingWhereAck && missingWhere.length > 0;
   const canConfirm = !needsWhereAck || ackedMissingWhere;
@@ -88,12 +89,15 @@ export const WriteConfirmDialog: React.FC<Props> = ({
       onClick={onCancel}
     >
       <div
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
         className="w-full max-w-[520px] bg-slate-900 border border-slate-800 rounded-xl shadow-2xl overflow-hidden"
         onClick={(e) => e.stopPropagation()}
       >
         <div className="px-6 py-4 border-b border-slate-800 bg-slate-950/40 flex items-center gap-2.5">
           <ShieldAlert className="w-5 h-5 text-rose-400 shrink-0" strokeWidth={SQL_ICON_STROKE} />
-          <h2 className="text-slate-100 font-bold text-base">{title}</h2>
+          <h2 id={titleId} className="text-slate-100 font-bold text-base">{title}</h2>
         </div>
         <div className="p-6 space-y-3">
           {mutating.length > 0 && (
diff --git a/apps/web/src/frontend/shared/lib/useEscapeKey.ts b/apps/web/src/frontend/shared/lib/useEscapeKey.ts
new file mode 100644
index 000000000..25e8a83db
--- /dev/null
+++ b/apps/web/src/frontend/shared/lib/useEscapeKey.ts
@@ -0,0 +1,24 @@
+import { useEffect, useRef } from 'react';
+
+/**
+ * Call `onEscape` when Escape is pressed, while `enabled`. A key another
+ * handler already claimed (`preventDefault`, for example an open menu inside
+ * the dialog) is left alone, and so is everything while `enabled` is false:
+ * a dialog with another layer open on top passes false, so Escape closes only
+ * the top one.
+ *
+ * Registered once per enabled state; callers may pass a fresh function on
+ * every render.
+ */
+export function useEscapeKey(onEscape: () => void, enabled = true): void {
+  const onEscapeRef = useRef(onEscape);
+  onEscapeRef.current = onEscape;
+  useEffect(() => {
+    if (!enabled) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && !e.defaultPrevented) onEscapeRef.current();
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [enabled]);
+}

From 677a7edeeb1d2d33e71a3f6a5073c97fb3834500 Mon Sep 17 00:00:00 2001
From: huyplb <huyplb@live.com>
Date: Sun, 1 Nov 2026 15:28:47 -0600
Subject: [PATCH 2/2] chore(test-ids): regenerate for the named Saved
 Credentials close button

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/e2e/src/generated/test-ids.ts | 2 +-
 docs/testing/TEST_IDS.md           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/e2e/src/generated/test-ids.ts b/apps/e2e/src/generated/test-ids.ts
index 8e71fd15b..99b3ea413 100644
--- a/apps/e2e/src/generated/test-ids.ts
+++ b/apps/e2e/src/generated/test-ids.ts
@@ -1283,7 +1283,7 @@ export const TestIds = {
       credAddBtn: 'cred-add-btn',
       /** button · Clear filters */
       credClearFilters: 'cred-clear-filters',
-      /** button */
+      /** button · Close saved credentials */
       credCloseBtn: 'cred-close-btn',
       /** button · Delete */
       credDelete: (id: string | number) => `cred-delete-${id}`,
diff --git a/docs/testing/TEST_IDS.md b/docs/testing/TEST_IDS.md
index 410723c30..562ff32c3 100644
--- a/docs/testing/TEST_IDS.md
+++ b/docs/testing/TEST_IDS.md
@@ -671,7 +671,7 @@ Every control has a test ID: **1015** buttons, text boxes, selects and textareas
 - **CredentialManager** · `features/connections/components/CredentialManager.tsx`
   - `cred-add-btn` · button · Add Credential
   - `cred-clear-filters` · button · Clear filters
-  - `cred-close-btn` · button
+  - `cred-close-btn` · button · Close saved credentials
   - `cred-delete-{id}` · button · Delete
   - `cred-dialect-filter` · select · Filter by provider
   - `cred-edit-{id}` · button · Edit