fix(VDialog): fix focus trap when tabbing forward

packages/vuetify/src/components/VDialog/VDialog.tsx

@@ -80,15 +80,39 @@ export const VDialog = genericComponent<OverlaySlots>()({
       }
     }
 
+    function onKeydown (e: KeyboardEvent) {
+      if (e.key !== 'Tab' || !overlay.value?.contentEl) return
+
+      const focusable = focusableChildren(overlay.value.contentEl)
+      if (!focusable.length) return
+
+      const firstElement = focusable[0]
+      const lastElement = focusable[focusable.length - 1]
+      const active = document.activeElement as HTMLElement | null
+
+      if (e.shiftKey && active === firstElement) {
+        e.preventDefault()
+        lastElement.focus()
+      } else if (!e.shiftKey && active === lastElement) {
+        e.preventDefault()
+        firstElement.focus()
+      }
+    }
+
     onBeforeUnmount(() => {
       document.removeEventListener('focusin', onFocusin)
+      document.removeEventListener('keydown', onKeydown)
     })
 
     if (IN_BROWSER) {
       watch(() => isActive.value && props.retainFocus, val => {
-        val
-          ? document.addEventListener('focusin', onFocusin)
-          : document.removeEventListener('focusin', onFocusin)
+        if (val) {
+          document.addEventListener('focusin', onFocusin)
+          document.addEventListener('keydown', onKeydown)
+        } else {
+          document.removeEventListener('focusin', onFocusin)
+          document.removeEventListener('keydown', onKeydown)
+        }
       }, { immediate: true })
     }
 

packages/vuetify/src/components/VDialog/__test__/VDialog.spec.browser.tsx

@@ -44,4 +44,48 @@ describe('VDialog', () => {
     await userEvent.click(element)
     await expect.poll(() => onAfterLeave).toHaveBeenCalledTimes(1)
   })
+
+  it('should focus on the last element when shift + tab key is pressed on the first element', async () => {
+    const model = ref(true)
+    render(() => (
+      <div>
+        <VDialog v-model={ model.value } persistent>
+          <div>
+            <button data-testid="first">First</button>
+            <button data-testid="last">Last</button>
+          </div>
+        </VDialog>
+      </div>
+    ))
+    const first = screen.getByCSS('button[data-testid="first"]')
+    const last = screen.getByCSS('button[data-testid="last"]')
+
+    first.focus()
+    await expect.poll(() => document.activeElement).toBe(first)
+
+    await userEvent.tab({ shift: true })
+    await expect.poll(() => document.activeElement).toBe(last)
+  })
+
+  it('should focus on the first element when Tab key is pressed on the last element', async () => {
+    const model = ref(true)
+    render(() => (
+      <div>
+        <VDialog v-model={ model.value }>
+          <div>
+            <button data-testid="first">First</button>
+            <button data-testid="last">Last</button>
+          </div>
+        </VDialog>
+      </div>
+    ))
+    const first = screen.getByCSS('button[data-testid="first"]')
+    const last = screen.getByCSS('button[data-testid="last"]')
+
+    last.focus()
+    await expect.poll(() => document.activeElement).toBe(last)
+
+    await userEvent.tab()
+    await expect.poll(() => document.activeElement).toBe(first)
+  })
 })