molecule-ai/molecule-core
39
0
Fork 2
Code Issues 46 Pull Requests 33 Actions 8 Packages Projects Releases Wiki Activity

fix(canvas/a11y): add accessible name to ConsoleModal + DeleteCascadeConfirmDialog backdrops

Browse Source 
ConsoleModal backdrop: aria-hidden removed, aria-label="Close terminal" added.
DeleteCascadeConfirmDialog backdrop: aria-hidden removed, aria-label="Dismiss dialog" added.
cursor-pointer also added to both for consistent pointer affordance.

Matches the same fix applied to KeyboardShortcutsDialog (PR #299) and
ConfirmDialog (PR #398) for WCAG 2.4.6 compliance.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Molecule AI · core-fe 2026-05-11 06:33:13 +00:00
parent 3df3cce8e1
commit 7433ba2fb7
4 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
canvas/src/components/ConsoleModal.tsx
View File

@ -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"

6
canvas/src/components/DeleteCascadeConfirmDialog.tsx
View File

@ -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

4
canvas/src/components/__tests__/ConsoleModal.test.tsx
View File

@ -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");
});

4
canvas/src/components/__tests__/DeleteCascadeConfirmDialog.test.tsx
View File

@ -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");
});