From 651f44790bb5d1dfb3686d52fc09a55c9bcb51d0 Mon Sep 17 00:00:00 2001
From: Molecule AI Core-FE <core-fe@agents.moleculesai.app>
Date: Mon, 11 May 2026 09:41:16 +0000
Subject: [PATCH] fix(canvas/a11y): add accessible name to ConsoleModal +
 DeleteCascadeConfirmDialog backdrops (#410) Co-authored-by: Molecule AI
 Core-FE <core-fe@agents.moleculesai.app> Co-committed-by: Molecule AI Core-FE
 <core-fe@agents.moleculesai.app>

---
 canvas/src/components/ConsoleModal.tsx                      | 6 +++++-
 canvas/src/components/DeleteCascadeConfirmDialog.tsx        | 6 +++++-
 canvas/src/components/__tests__/ConsoleModal.test.tsx       | 4 ++--
 .../__tests__/DeleteCascadeConfirmDialog.test.tsx           | 4 ++--
 4 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/canvas/src/components/ConsoleModal.tsx b/canvas/src/components/ConsoleModal.tsx
index f20faa8a..907dc37f 100644
--- a/canvas/src/components/ConsoleModal.tsx
+++ b/canvas/src/components/ConsoleModal.tsx
@@ -90,7 +90,11 @@ export function ConsoleModal({ workspaceId, workspaceName, open, onClose }: Prop
 
   return createPortal(
     <div className="fixed inset-0 z-[9999] flex items-center justify-center">
-      <div aria-hidden="true" className="absolute inset-0 bg-black/70 backdrop-blur-sm" onClick={onClose} />
+      <div
+        className="absolute inset-0 bg-black/70 backdrop-blur-sm cursor-pointer"
+        onClick={onClose}
+        aria-label="Close terminal"
+      />
       <div
         role="dialog"
         aria-modal="true"
diff --git a/canvas/src/components/DeleteCascadeConfirmDialog.tsx b/canvas/src/components/DeleteCascadeConfirmDialog.tsx
index ba68bb83..3dfdc4b1 100644
--- a/canvas/src/components/DeleteCascadeConfirmDialog.tsx
+++ b/canvas/src/components/DeleteCascadeConfirmDialog.tsx
@@ -81,7 +81,11 @@ export function DeleteCascadeConfirmDialog({
   return createPortal(
     <div className="fixed inset-0 z-[9999] flex items-center justify-center">
       {/* Backdrop */}
-      <div aria-hidden="true" className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={onCancel} />
+      <div
+        className="absolute inset-0 bg-black/60 backdrop-blur-sm cursor-pointer"
+        onClick={onCancel}
+        aria-label="Dismiss dialog"
+      />
 
       {/* Dialog */}
       <div
diff --git a/canvas/src/components/__tests__/ConsoleModal.test.tsx b/canvas/src/components/__tests__/ConsoleModal.test.tsx
index 6e816f1d..28c1c5ac 100644
--- a/canvas/src/components/__tests__/ConsoleModal.test.tsx
+++ b/canvas/src/components/__tests__/ConsoleModal.test.tsx
@@ -98,10 +98,10 @@ describe("ConsoleModal — WCAG 2.1 dialog accessibility", () => {
     expect(titleEl?.textContent?.trim()).toBe("EC2 console output");
   });
 
-  it("backdrop div has aria-hidden='true' so screen readers skip it (WCAG 4.1.2)", async () => {
+  it("backdrop div has aria-label for screen readers (WCAG 2.4.6)", async () => {
     mockGet.mockResolvedValueOnce({ output: "" });
     render(<ConsoleModal workspaceId="ws-1" open={true} onClose={() => {}} />);
-    const backdrop = document.querySelector('[aria-hidden="true"]');
+    const backdrop = document.querySelector('[aria-label="Close terminal"]');
     expect(backdrop).toBeTruthy();
     expect(backdrop?.className).toContain("bg-black");
   });
diff --git a/canvas/src/components/__tests__/DeleteCascadeConfirmDialog.test.tsx b/canvas/src/components/__tests__/DeleteCascadeConfirmDialog.test.tsx
index 9f20a104..58b2cc9a 100644
--- a/canvas/src/components/__tests__/DeleteCascadeConfirmDialog.test.tsx
+++ b/canvas/src/components/__tests__/DeleteCascadeConfirmDialog.test.tsx
@@ -99,9 +99,9 @@ describe("DeleteCascadeConfirmDialog — WCAG 2.1 dialog accessibility", () => {
     expect(titleEl?.textContent?.trim()).toBe("Delete Workspace and Children");
   });
 
-  it("backdrop div has aria-hidden='true' so screen readers skip it (WCAG 4.1.2)", () => {
+  it("backdrop div has aria-label for screen readers (WCAG 2.4.6)", () => {
     renderDialog();
-    const backdrop = document.querySelector('[aria-hidden="true"]');
+    const backdrop = document.querySelector('[aria-label="Dismiss dialog"]');
     expect(backdrop).toBeTruthy();
     expect(backdrop?.className).toContain("bg-black");
   });