From f1904b8a47abf05c046e94dcd173c00e02b7036c Mon Sep 17 00:00:00 2001
From: Molecule AI Core-FE <core-fe@agents.moleculesai.app>
Date: Mon, 11 May 2026 05:08:54 +0000
Subject: [PATCH] fix(canvas/a11y): add aria-label to KeyboardShortcutsDialog
 backdrop click area

Backdrop click (closes the dialog) now has aria-label="Close keyboard
shortcuts dialog" so screen reader users understand what the clickable
overlay area does. WCAG 2.4.6 (headings and labels): descriptive labels.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 canvas/src/components/KeyboardShortcutsDialog.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/canvas/src/components/KeyboardShortcutsDialog.tsx b/canvas/src/components/KeyboardShortcutsDialog.tsx
index f0500d26..54cdc2d6 100644
--- a/canvas/src/components/KeyboardShortcutsDialog.tsx
+++ b/canvas/src/components/KeyboardShortcutsDialog.tsx
@@ -151,8 +151,9 @@ export function KeyboardShortcutsDialog({ open, onClose }: Props) {
     <div className="fixed inset-0 z-[9999] flex items-center justify-center">
       {/* Backdrop */}
       <div
-        className="absolute inset-0 bg-black/60 backdrop-blur-sm"
+        className="absolute inset-0 bg-black/60 backdrop-blur-sm cursor-pointer"
         onClick={onClose}
+        aria-label="Close keyboard shortcuts dialog"
       />
 
       {/* Dialog */}