Remove trash bin icons from tab order. Instead, implement Delete key support (Backspace accepted on Apple devices).

This commit is contained in:
Leo Vasanko
2025-12-09 16:54:46 +00:00
parent 2776a8d83a
commit 9835c13e25
2 changed files with 20 additions and 0 deletions
@@ -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'
+10
View File
@@ -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) => {