Compare commits

...

2 Commits

Author SHA1 Message Date
core-fe 44205b6974 chore: re-trigger CI after jq install fix (PR #410)
Block internal-flavored paths / Block forbidden paths (pull_request) Successful in 12s
CI / Detect changes (pull_request) Successful in 27s
E2E API Smoke Test / detect-changes (pull_request) Successful in 27s
Harness Replays / detect-changes (pull_request) Failing after 12s
E2E Staging Canvas (Playwright) / detect-changes (pull_request) Successful in 26s
Harness Replays / Harness Replays (pull_request) Has been skipped
Handlers Postgres Integration / detect-changes (pull_request) Successful in 23s
Secret scan / Scan diff for credential-shaped strings (pull_request) Successful in 10s
Runtime PR-Built Compatibility / detect-changes (pull_request) Successful in 20s
sop-tier-check / tier-check (pull_request) Successful in 15s
CI / Platform (Go) (pull_request) Successful in 12s
CI / Shellcheck (E2E scripts) (pull_request) Successful in 8s
CI / Python Lint & Test (pull_request) Successful in 10s
E2E API Smoke Test / E2E API Smoke Test (pull_request) Successful in 13s
Handlers Postgres Integration / Handlers Postgres Integration (pull_request) Successful in 12s
Runtime PR-Built Compatibility / PR-built wheel + import smoke (pull_request) Successful in 11s
audit-force-merge / audit (pull_request) Successful in 29s
E2E Staging Canvas (Playwright) / Canvas tabs E2E (pull_request) Successful in 9m44s
CI / Canvas (Next.js) (pull_request) Failing after 11m49s
CI / Canvas Deploy Reminder (pull_request) Has been skipped
2026-05-11 09:31:41 +00:00
core-fe 53ff06c722 fix(canvas/a11y): add accessible name to ConsoleModal + DeleteCascadeConfirmDialog backdrops
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>
2026-05-11 09:31:41 +00:00
4 changed files with 14 additions and 6 deletions
+5 -1
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"
@@ -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
@@ -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");
});
@@ -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");
});