From 823b41e28d0ffae133f65659555473ce59a9673c Mon Sep 17 00:00:00 2001
From: Vadym Samoilenko <vadymsamoilenko@oliver.agency>
Date: Wed, 13 May 2026 11:06:19 +0100
Subject: [PATCH] feat(dialog): focus trap, autofocus on open, scrollable body

---
 web/src/components/ui/Dialog.vue    | 12 +++++--
 web/src/composables/useFocusTrap.ts | 56 +++++++++++++++++++++++++++++
 2 files changed, 65 insertions(+), 3 deletions(-)
 create mode 100644 web/src/composables/useFocusTrap.ts

diff --git a/web/src/components/ui/Dialog.vue b/web/src/components/ui/Dialog.vue
index 698a81b..8cf42f6 100644
--- a/web/src/components/ui/Dialog.vue
+++ b/web/src/components/ui/Dialog.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted } from 'vue'
+import { ref, toRef, onMounted, onUnmounted } from 'vue'
 import Button from './Button.vue'
+import { useFocusTrap } from '@/composables/useFocusTrap'
 
 const props = withDefaults(
   defineProps<{
@@ -16,6 +17,10 @@ const emit = defineEmits<{
   close: []
 }>()
 
+const contentRef = ref<HTMLElement | null>(null)
+const isOpen = toRef(props, 'open')
+useFocusTrap(contentRef, isOpen)
+
 function handleKeydown(e: KeyboardEvent) {
   if (e.key === 'Escape' && props.open) {
     emit('close')
@@ -48,9 +53,10 @@ onUnmounted(() => document.removeEventListener('keydown', handleKeydown))
 
         <!-- Dialog panel -->
         <div
+          ref="contentRef"
           :class="['relative w-full bg-card border border-border rounded-lg shadow-xl z-10', maxWidth]"
           role="dialog"
-          :aria-modal="true"
+          aria-modal="true"
           :aria-label="title"
         >
           <!-- Header -->
@@ -69,7 +75,7 @@ onUnmounted(() => document.removeEventListener('keydown', handleKeydown))
           </div>
 
           <!-- Body -->
-          <div class="px-6 pb-4">
+          <div class="px-6 pb-4 max-h-[85vh] overflow-y-auto">
             <slot />
           </div>
 
diff --git a/web/src/composables/useFocusTrap.ts b/web/src/composables/useFocusTrap.ts
new file mode 100644
index 0000000..845c860
--- /dev/null
+++ b/web/src/composables/useFocusTrap.ts
@@ -0,0 +1,56 @@
+import { watch, onUnmounted } from 'vue'
+import type { Ref } from 'vue'
+
+const FOCUSABLE = [
+  '[autofocus]',
+  'button:not([disabled])',
+  '[href]',
+  'input:not([disabled])',
+  'select:not([disabled])',
+  'textarea:not([disabled])',
+  '[tabindex]:not([tabindex="-1"])',
+].join(', ')
+
+export function useFocusTrap(containerRef: Ref<HTMLElement | null>, isOpen: Ref<boolean>) {
+  let previousFocus: Element | null = null
+
+  function getFocusable(): HTMLElement[] {
+    if (!containerRef.value) return []
+    return Array.from(containerRef.value.querySelectorAll<HTMLElement>(FOCUSABLE))
+  }
+
+  function onKeydown(e: KeyboardEvent) {
+    if (!isOpen.value || !containerRef.value) return
+    if (e.key !== 'Tab') return
+    const focusable = getFocusable()
+    if (!focusable.length) { e.preventDefault(); return }
+    const first = focusable[0]
+    const last = focusable[focusable.length - 1]
+    if (e.shiftKey) {
+      if (document.activeElement === first) { e.preventDefault(); last.focus() }
+    } else {
+      if (document.activeElement === last) { e.preventDefault(); first.focus() }
+    }
+  }
+
+  watch(isOpen, (open) => {
+    if (open) {
+      previousFocus = document.activeElement
+      document.addEventListener('keydown', onKeydown)
+      // Defer to next tick so the dialog content is rendered
+      setTimeout(() => {
+        const focusable = getFocusable()
+        if (focusable.length) focusable[0].focus()
+      }, 50)
+    } else {
+      document.removeEventListener('keydown', onKeydown)
+      if (previousFocus && 'focus' in previousFocus) {
+        (previousFocus as HTMLElement).focus()
+      }
+    }
+  })
+
+  onUnmounted(() => {
+    document.removeEventListener('keydown', onKeydown)
+  })
+}