From 1e4b6d020378df10da48383d9ed6dd46a06ed993 Mon Sep 17 00:00:00 2001
From: Molecule AI Frontend Engineer <frontend-engineer@agents.moleculesai.app>
Date: Sat, 18 Apr 2026 01:14:51 +0000
Subject: [PATCH] =?UTF-8?q?fix(a11y):=20DetailsTab=20=E2=80=94=20use=20rol?=
 =?UTF-8?q?e=3Dalertdialog=20for=20delete=20confirmation=20(#905)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

role="alert" is for passive announcements. A delete confirmation with
Confirm/Cancel action buttons requires a user response, which is the
semantics of role="alertdialog" (interactive dialog requiring response).

- Replace role="alert" with role="alertdialog" + aria-modal="true"
- Add aria-labelledby="delete-confirm-title" for an accessible name
- Add <h3 id="delete-confirm-title"> as the labelling element
  ("Confirm deletion") so AT announces the dialog purpose on focus

Closes #905

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 canvas/src/components/tabs/DetailsTab.tsx | 36 +++++++++++++++--------
 1 file changed, 23 insertions(+), 13 deletions(-)

diff --git a/canvas/src/components/tabs/DetailsTab.tsx b/canvas/src/components/tabs/DetailsTab.tsx
index b9f9042f..5138d924 100644
--- a/canvas/src/components/tabs/DetailsTab.tsx
+++ b/canvas/src/components/tabs/DetailsTab.tsx
@@ -255,19 +255,29 @@ export function DetailsTab({ workspaceId, data }: Props) {
           </div>
         )}
         {confirmDelete ? (
-          <div className="flex gap-2">
-            <button
-              onClick={handleDelete}
-              className="px-3 py-1 bg-red-600 hover:bg-red-500 text-xs rounded text-white"
-            >
-              Confirm Delete
-            </button>
-            <button
-              onClick={() => { setConfirmDelete(false); setDeleteError(null); }}
-              className="px-3 py-1 bg-zinc-700 hover:bg-zinc-600 text-xs rounded text-zinc-300"
-            >
-              Cancel
-            </button>
+          <div
+            role="alertdialog"
+            aria-modal="true"
+            aria-labelledby="delete-confirm-title"
+            className="space-y-2"
+          >
+            <h3 id="delete-confirm-title" className="text-xs font-medium text-red-400">
+              Confirm deletion
+            </h3>
+            <div className="flex gap-2">
+              <button
+                onClick={handleDelete}
+                className="px-3 py-1 bg-red-600 hover:bg-red-500 text-xs rounded text-white"
+              >
+                Confirm Delete
+              </button>
+              <button
+                onClick={() => { setConfirmDelete(false); setDeleteError(null); }}
+                className="px-3 py-1 bg-zinc-700 hover:bg-zinc-600 text-xs rounded text-zinc-300"
+              >
+                Cancel
+              </button>
+            </div>
           </div>
         ) : (
           <button