From 851b17f45c07caefd7c1043e308d484b129ed39c Mon Sep 17 00:00:00 2001
From: Leo Vasanko <git@vasanko.com>
Date: Wed, 10 Dec 2025 19:41:55 +0000
Subject: [PATCH] Adopt <dialog> for our modals to tap into browser built-in
 functionality.

---
 frontend/src/components/Modal.vue             | 76 +++++++++----------
 .../src/components/RegistrationLinkModal.vue  | 60 ++++++++++-----
 2 files changed, 80 insertions(+), 56 deletions(-)

diff --git a/frontend/src/components/Modal.vue b/frontend/src/components/Modal.vue
index 48f8b24..9362c49 100644
--- a/frontend/src/components/Modal.vue
+++ b/frontend/src/components/Modal.vue
@@ -1,9 +1,7 @@
 <template>
-  <div class="modal-overlay" @keydown.esc="$emit('close')" @keydown="handleOverlayKeydown" tabindex="-1">
-    <div class="modal" role="dialog" aria-modal="true">
-      <slot />
-    </div>
-  </div>
+  <dialog ref="dialog" @close="$emit('close')" @keydown="handleDialogKeydown">
+    <slot />
+  </dialog>
 </template>
 
 <script setup>
@@ -21,6 +19,9 @@ const props = defineProps({
 
 defineEmits(['close'])
 
+// Dialog element reference
+const dialog = ref(null)
+
 // Store the element that had focus before modal opened
 const previouslyFocusedElement = ref(null)
 
@@ -74,7 +75,7 @@ const restoreFocus = () => {
   }
 }
 
-const handleOverlayKeydown = (event) => {
+const handleDialogKeydown = (event) => {
   const direction = getDirection(event)
   if (!direction) return
 
@@ -110,19 +111,21 @@ onMounted(() => {
   // Save currently focused element before modal takes focus
   previouslyFocusedElement.value = document.activeElement
 
-  // Autofocus the most appropriate element:
-  // - For form dialogs (rename, edit): focus first input and select text
-  // - For other dialogs: focus primary button (or fallback)
+  // Show the dialog as a modal
   nextTick(() => {
-    const modal = document.querySelector('.modal')
-    if (modal) {
+    if (dialog.value) {
+      dialog.value.showModal()
+
+      // Autofocus the most appropriate element:
+      // - For form dialogs (rename, edit): focus first input and select text
+      // - For other dialogs: focus primary button (or fallback)
       // Mark primary button for keyboard navigation
-      const primaryBtn = modal.querySelector('.modal-actions .btn-primary')
+      const primaryBtn = dialog.value.querySelector('.modal-actions .btn-primary')
       if (primaryBtn) {
         primaryBtn.setAttribute('data-nav-primary', '')
       }
       // Focus the most appropriate element
-      focusDialogDefault(modal)
+      focusDialogDefault(dialog.value)
     }
   })
 })
@@ -134,22 +137,7 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: transparent;
-  backdrop-filter: blur(.1rem) brightness(0.7);
-  -webkit-backdrop-filter: blur(.1rem) brightness(0.7);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-}
-
-.modal {
+dialog {
   background: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
@@ -159,37 +147,47 @@ onUnmounted(() => {
   width: min(500px, 90vw);
   max-height: 90vh;
   overflow-y: auto;
+  position: fixed;
+  inset: 0;
+  margin: auto;
+  height: fit-content;
 }
 
-.modal :deep(.modal-title),
-.modal :deep(h3) {
+dialog::backdrop {
+  background: transparent;
+  backdrop-filter: blur(.1rem) brightness(0.7);
+  -webkit-backdrop-filter: blur(.1rem) brightness(0.7);
+}
+
+dialog :deep(.modal-title),
+dialog :deep(h3) {
   margin: 0 0 var(--space-md);
   font-size: 1.25rem;
   font-weight: 600;
   color: var(--color-heading);
 }
 
-.modal :deep(form) {
+dialog :deep(form) {
   display: flex;
   flex-direction: column;
   gap: var(--space-md);
 }
 
-.modal :deep(.modal-form) {
+dialog :deep(.modal-form) {
   display: flex;
   flex-direction: column;
   gap: var(--space-md);
 }
 
-.modal :deep(.modal-form label) {
+dialog :deep(.modal-form label) {
   display: flex;
   flex-direction: column;
   gap: var(--space-xs);
   font-weight: 500;
 }
 
-.modal :deep(.modal-form input),
-.modal :deep(.modal-form textarea) {
+dialog :deep(.modal-form input),
+dialog :deep(.modal-form textarea) {
   padding: var(--space-md);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-sm);
@@ -200,14 +198,14 @@ onUnmounted(() => {
   min-height: 2.5rem;
 }
 
-.modal :deep(.modal-form input:focus),
-.modal :deep(.modal-form textarea:focus) {
+dialog :deep(.modal-form input:focus),
+dialog :deep(.modal-form textarea:focus) {
   outline: none;
   border-color: var(--color-accent);
   box-shadow: 0 0 0 2px #c7d2fe;
 }
 
-.modal :deep(.modal-actions) {
+dialog :deep(.modal-actions) {
   display: flex;
   justify-content: flex-end;
   gap: var(--space-sm);
diff --git a/frontend/src/components/RegistrationLinkModal.vue b/frontend/src/components/RegistrationLinkModal.vue
index 186dacc..4d58158 100644
--- a/frontend/src/components/RegistrationLinkModal.vue
+++ b/frontend/src/components/RegistrationLinkModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="linkUrl" class="dialog-overlay no-backdrop" @keydown.esc.prevent="$emit('close')">
+  <dialog ref="dialog" @close="$emit('close')" @keydown="handleDialogKeydown">
     <div class="device-dialog" role="dialog" aria-modal="true" aria-labelledby="regTitle">
       <div class="reg-header-row">
         <h2 id="regTitle" class="reg-title">
@@ -29,13 +29,13 @@
         <button class="btn-secondary" @click="$emit('close')">Close</button>
       </div>
     </div>
-  </div>
+  </dialog>
 </template>
 
 <script setup>
 import { ref, onMounted, onUnmounted, nextTick } from 'vue'
 import QRCodeDisplay from '@/components/QRCodeDisplay.vue'
-import { apiJson, holdGlobalBackdrop, releaseGlobalBackdrop } from '@/utils/api'
+import { apiJson } from '@/utils/api'
 import { formatDate } from '@/utils/helpers'
 import { getDirection } from '@/utils/keynav'
 
@@ -46,6 +46,7 @@ const props = defineProps({
 
 const emit = defineEmits(['close', 'copied'])
 
+const dialog = ref(null)
 const linkUrl = ref(null)
 const expiresAt = ref(null)
 const actionsRow = ref(null)
@@ -58,11 +59,17 @@ async function generateLink() {
     if (data.url) {
       linkUrl.value = data.url
       expiresAt.value = data.expires ? new Date(data.expires) : null
-      // Focus primary button (or first button if no primary) after content renders
+
+      // Show the dialog as modal
       await nextTick()
-      const actions = actionsRow.value
-      const target = actions?.querySelector('.btn-primary') || actions?.querySelector('button')
-      target?.focus()
+      if (dialog.value) {
+        dialog.value.showModal()
+
+        // Focus primary button (or first button if no primary) after content renders
+        const actions = actionsRow.value
+        const target = actions?.querySelector('.btn-primary') || actions?.querySelector('button')
+        target?.focus()
+      }
     } else {
       emit('close')
     }
@@ -75,6 +82,18 @@ function onCopied() {
   emit('copied')
 }
 
+const handleDialogKeydown = (event) => {
+  // ESC is handled automatically by <dialog>
+  // Handle other key navigation
+  const direction = getDirection(event)
+  if (!direction) return
+
+  if (direction === 'down' || direction === 'up') {
+    // Let the individual handlers manage navigation
+    return
+  }
+}
+
 const handleQRKeydown = (event) => {
   const direction = getDirection(event)
   if (!direction) return
@@ -106,14 +125,10 @@ const handleActionsKeydown = (event) => {
 onMounted(() => {
   // Save currently focused element before modal takes focus
   previouslyFocusedElement.value = document.activeElement
-  // Hold backdrop before fetch to avoid gap if auth iframe shows
-  holdGlobalBackdrop()
   generateLink()
 })
 
 onUnmounted(() => {
-  // Release backdrop when modal closes
-  releaseGlobalBackdrop()
   // Restore focus when modal closes
   const prev = previouslyFocusedElement.value
   if (prev && document.body.contains(prev) && !prev.disabled) {
@@ -123,6 +138,23 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
+dialog {
+  border: none;
+  background: transparent;
+  padding: 0;
+  max-width: none;
+  width: fit-content;
+  height: fit-content;
+  position: fixed;
+  inset: 0;
+  margin: auto;
+}
+
+dialog::backdrop {
+  -webkit-backdrop-filter: blur(.2rem) brightness(0.5);
+  backdrop-filter: blur(.2rem) brightness(0.5);
+}
+
 .icon-btn { background: none; border: none; cursor: pointer; font-size: 1rem; opacity: .6; }
 .icon-btn:hover { opacity: 1; }
 .reg-header-row { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: .75rem; }
@@ -131,10 +163,4 @@ onUnmounted(() => {
 .reg-help { margin: .5rem 0 .75rem; font-size: .85rem; line-height: 1.4; text-align: center; color: var(--color-text-muted); }
 .reg-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }
 .expiry-note { font-size: .75rem; color: var(--color-text-muted); text-align: center; margin-top: .75rem; }
-
-/* Use global backdrop, not local */
-.dialog-overlay.no-backdrop {
-  backdrop-filter: none;
-  -webkit-backdrop-filter: none;
-}
 </style>