From b9897b62b871bd9bf6997844adc5f6fe58174a26 Mon Sep 17 00:00:00 2001
From: Leo Vasanko <git@vasanko.com>
Date: Tue, 9 Dec 2025 16:54:46 +0000
Subject: [PATCH] Remove trash bin icons from tab order. Instead, implement
 Delete key support (Backspace accepted on Apple devices).

---
 frontend/src/components/CredentialList.vue | 10 ++++++++++
 frontend/src/components/SessionList.vue    | 10 ++++++++++
 2 files changed, 20 insertions(+)

diff --git a/frontend/src/components/CredentialList.vue b/frontend/src/components/CredentialList.vue
index 8a3d127..6420932 100644
--- a/frontend/src/components/CredentialList.vue
+++ b/frontend/src/components/CredentialList.vue
@@ -14,6 +14,7 @@
         tabindex="0"
         @focusin="handleCredentialFocus(credential.credential_uuid)"
         @focusout="handleCredentialBlur($event)"
+        @keydown="handleDelete($event, credential)"
       >
         <div class="item-top">
           <div class="item-icon">
@@ -38,6 +39,7 @@
               class="btn-card-delete"
               :disabled="credential.is_current_session"
               :title="credential.is_current_session ? 'Cannot delete current session credential' : 'Delete passkey'"
+              tabindex="-1"
             >🗑️</button>
           </div>
         </div>
@@ -82,6 +84,14 @@ const handleCredentialBlur = (event) => {
   }
 }
 
+const handleDelete = (event, credential) => {
+  const apple = navigator.userAgent.includes('Mac OS')
+  if (event.key === 'Delete' || apple && event.key === 'Backspace') {
+    event.preventDefault()
+    if (props.allowDelete && !credential.is_current_session) emit('delete', credential)
+  }
+}
+
 const getCredentialAuthName = (credential) => {
   const info = props.aaguidInfo?.[credential.aaguid]
   return info ? info.name : 'Unknown Authenticator'
diff --git a/frontend/src/components/SessionList.vue b/frontend/src/components/SessionList.vue
index c1de91a..1ad8a25 100644
--- a/frontend/src/components/SessionList.vue
+++ b/frontend/src/components/SessionList.vue
@@ -24,6 +24,7 @@
                 tabindex="0"
                 @focusin="handleSessionFocus(session)"
                 @focusout="handleSessionBlur($event)"
+                @keydown="handleDelete($event, session)"
               >
                 <div class="item-top">
                   <h4 class="item-title">{{ session.user_agent }}</h4>
@@ -37,6 +38,7 @@
                       class="btn-card-delete"
                       :disabled="isTerminating(session.id)"
                       :title="isTerminating(session.id) ? 'Terminating...' : 'Terminate session'"
+                      tabindex="-1"
                     >🗑️</button>
                   </div>
                 </div>
@@ -92,6 +94,14 @@ const handleSessionBlur = (event) => {
   }
 }
 
+const handleDelete = (event, session) => {
+  const apple = navigator.userAgent.includes('Mac OS')
+  if (event.key === 'Delete' || apple && event.key === 'Backspace') {
+    event.preventDefault()
+    if (!isTerminating(session.id)) emit('terminate', session)
+  }
+}
+
 const isTerminating = (sessionId) => !!props.terminatingSessions[sessionId]
 
 const hostUrl = (host) => {