Merge branch 'main' into fix/harness-replays-detect-changes-fetch-depth

canvas/src/components/ConfirmDialog.tsx

@@ -105,8 +105,12 @@ export function ConfirmDialog({
   // (e.g. parents with transform, filter, will-change that break position:fixed).
   return createPortal(
     <div className="fixed inset-0 z-[9999] flex items-center justify-center">
-      {/* Backdrop */}
-      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={onCancel} />
+      {/* Backdrop — interactive dismiss area; accessible name for screen readers (WCAG 4.1.2) */}
+      <div
+        className="absolute inset-0 bg-black/60 backdrop-blur-sm cursor-pointer"
+        aria-label="Dismiss dialog"
+        onClick={onCancel}
+      />
 
       {/* Dialog — role="dialog" + aria-modal prevent interaction with background */}
       <div

canvas/src/components/__tests__/ConfirmDialog.test.tsx

@@ -73,6 +73,21 @@ describe("ConfirmDialog singleButton prop", () => {
     expect(onCancel).toHaveBeenCalledTimes(1);
   });
 
+  it("backdrop has aria-label for screen reader users (WCAG 4.1.2)", () => {
+    render(
+      <ConfirmDialog
+        open
+        title="Title"
+        message="Message"
+        onConfirm={vi.fn()}
+        onCancel={vi.fn()}
+      />
+    );
+    const backdrop = document.querySelector(".bg-black\\/60");
+    expect(backdrop).toBeTruthy();
+    expect(backdrop?.getAttribute("aria-label")).toBe("Dismiss dialog");
+  });
+
   it("singleButton: onConfirm fires on button click", () => {
     const onConfirm = vi.fn();
     render(