From 57f715fec5a92ba2a16851172a5cebf62040c150 Mon Sep 17 00:00:00 2001
From: Haileyesus <something@gmail.com>
Date: Tue, 24 Feb 2026 14:13:05 +0300
Subject: [PATCH] fix(git-panel): add keyboard handling for Escape key for
 confirm action modal

---
 .../view/modals/ConfirmActionModal.tsx        | 31 +++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/components/git-panel/view/modals/ConfirmActionModal.tsx b/src/components/git-panel/view/modals/ConfirmActionModal.tsx
index fff1eb45..78f8b048 100644
--- a/src/components/git-panel/view/modals/ConfirmActionModal.tsx
+++ b/src/components/git-panel/view/modals/ConfirmActionModal.tsx
@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { Check, Download, Trash2, Upload } from 'lucide-react';
 import {
   CONFIRMATION_ACTION_LABELS,
@@ -30,6 +31,25 @@ function renderConfirmActionIcon(actionType: ConfirmationRequest['type']) {
 }
 
 export default function ConfirmActionModal({ action, onCancel, onConfirm }: ConfirmActionModalProps) {
+  const titleId = action ? `confirmation-title-${action.type}` : undefined;
+
+  useEffect(() => {
+    if (!action) {
+      return;
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onCancel();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [action, onCancel]);
+
   if (!action) {
     return null;
   }
@@ -37,13 +57,20 @@ export default function ConfirmActionModal({ action, onCancel, onConfirm }: Conf
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
       <div className="fixed inset-0 bg-black/60 backdrop-blur-sm" onClick={onCancel} />
-      <div className="relative bg-card border border-border rounded-xl shadow-2xl max-w-md w-full overflow-hidden">
+      <div
+        className="relative bg-card border border-border rounded-xl shadow-2xl max-w-md w-full overflow-hidden"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
+      >
         <div className="p-6">
           <div className="flex items-center mb-4">
             <div className={`p-2 rounded-full mr-3 ${CONFIRMATION_ICON_CONTAINER_CLASSES[action.type]}`}>
               {renderConfirmActionIcon(action.type)}
             </div>
-            <h3 className="text-lg font-semibold text-foreground">{CONFIRMATION_TITLES[action.type]}</h3>
+            <h3 id={titleId} className="text-lg font-semibold text-foreground">
+              {CONFIRMATION_TITLES[action.type]}
+            </h3>
           </div>
 
           <p className="text-sm text-muted-foreground mb-6">{action.message}</p>