From edc76a7fab4529bbd0728eeb9e0c176e3a3e16b8 Mon Sep 17 00:00:00 2001
From: NimBold <NimBold@users.noreply.github.com>
Date: Mon, 27 Jul 2026 19:37:47 +0330
Subject: [PATCH] fix(ui): avoid default modal action focus

---
 src/components/KeychainPermissionModal.tsx | 1 -
 src/hooks/useModalFocus.ts                 | 4 +++-
 src/index.css                              | 5 +++++
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/KeychainPermissionModal.tsx b/src/components/KeychainPermissionModal.tsx
index a5bb89a..3dce51e 100644
--- a/src/components/KeychainPermissionModal.tsx
+++ b/src/components/KeychainPermissionModal.tsx
@@ -247,7 +247,6 @@ export const KeychainPermissionModal: React.FC<KeychainPermissionModalProps> = (
           <button
             type="button"
             onClick={handleLater}
-            data-modal-autofocus="true"
             className="keychain-modal-action px-4 py-2 rounded-lg text-sm font-medium text-text-secondary hover:bg-item-hover hover:text-text-primary disabled:opacity-50"
           >
             {t($ => $.keychain.later)}
diff --git a/src/hooks/useModalFocus.ts b/src/hooks/useModalFocus.ts
index 8c88c0c..cfccae2 100644
--- a/src/hooks/useModalFocus.ts
+++ b/src/hooks/useModalFocus.ts
@@ -66,8 +66,10 @@ export const useModalFocus = (enabled = true) => {
 
     const focusInitialElement = () => {
       if (!isTopmostModal(surface)) return;
+      // Keep initial focus on the dialog itself. This avoids visually selecting
+      // an action when a modal opens from a pointer interaction; Tab still
+      // enters the first available control through the trap below.
       const initialElement = surface.querySelector<HTMLElement>('[data-modal-autofocus="true"]')
-        || getFocusableElements(surface)[0]
         || surface;
       initialElement.focus({ preventScroll: true });
     };
diff --git a/src/index.css b/src/index.css
index 90b65f3..8e1c595 100644
--- a/src/index.css
+++ b/src/index.css
@@ -632,6 +632,11 @@ html[data-list-density="relaxed"] {
     contain: layout;
   }
 
+  /* The panel is a focus anchor for the modal trap, not an action control. */
+  .app-modal[tabindex="-1"]:focus {
+    outline: none;
+  }
+
   .keychain-modal {
     max-width: 560px;
     max-height: min(680px, 100%);