<script setup lang="ts">
const open = defineModel<boolean>({ default: false })
const { title } = defineProps<{ title: string }>()
const id = useId()
const panel = useTemplateRef<HTMLDivElement>('panel')
let opener: HTMLElement | null = null

const focusable = () => [...panel.value!.querySelectorAll<HTMLElement>('a[href], button:not([disabled]), input:not([disabled]), select, textarea, [tabindex]:not([tabindex="-1"])')]

watch(open, async (isOpen) => {
  if (isOpen) {
    opener = document.activeElement as HTMLElement | null      // remember where focus came from
    await nextTick()
    document.body.style.overflow = 'hidden'
    document.getElementById('__nuxt')?.setAttribute('inert', '')  // background not focusable or clickable
    ;(focusable()[0] ?? panel.value)?.focus()
  }
  else {
    document.body.style.overflow = ''
    document.getElementById('__nuxt')?.removeAttribute('inert')
    opener?.focus()                                                // restore focus
  }
})

function onKeydown(e: KeyboardEvent) {
  if (e.key === 'Escape') { e.preventDefault(); open.value = false; return }
  if (e.key !== 'Tab') return
  const items = focusable()
  if (!items.length) return
  const first = items[0]!, last = items.at(-1)!
  if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus() }        // trap
  else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus() }
}
</script>

<template>
  <Teleport to="body">
    <div v-if="open" class="fixed inset-0 grid place-items-center bg-black/50" @click.self="open = false">
      <div
        ref="panel"
        role="dialog"
        aria-modal="true"
        :aria-labelledby="`${id}-title`"
        tabindex="-1"
        class="rounded-lg bg-default p-6 shadow-xl"
        @keydown="onKeydown"
      >
        <h2 :id="`${id}-title`" class="text-lg font-semibold">{{ title }}</h2>
        <slot />
        <button type="button" class="mt-4" @click="open = false">Close</button>
      </div>
    </div>
  </Teleport>
</template>

<script setup lang="ts">
import { DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogRoot, DialogTitle, DialogTrigger } from 'reka-ui'
const open = defineModel<boolean>({ default: false })
</script>

<template>
  <DialogRoot v-model:open="open">
    <DialogTrigger as-child><slot name="trigger" /></DialogTrigger>
    <DialogPortal>
      <DialogOverlay class="fixed inset-0 bg-black/50" />
      <DialogContent class="fixed inset-0 m-auto h-fit max-w-md rounded-lg bg-default p-6">
        <DialogTitle class="text-lg font-semibold"><slot name="title" /></DialogTitle>
        <DialogDescription class="sr-only"><slot name="description" /></DialogDescription>
        <slot />
        <DialogClose class="mt-4">Close</DialogClose>
      </DialogContent>
    </DialogPortal>
  </DialogRoot>
</template>

<script setup lang="ts">
const { tabs } = defineProps<{ tabs: { id: string, label: string }[] }>()
const active = defineModel<string>({ default: '' })
const id = useId()
function onKeydown(e: KeyboardEvent, index: number) {
  const map: Record<string, number> = { ArrowRight: index + 1, ArrowLeft: index - 1, Home: 0, End: tabs.length - 1 }
  const next = map[e.key]
  if (next === undefined) return
  e.preventDefault()
  const target = tabs[(next + tabs.length) % tabs.length]!
  active.value = target.id
  document.getElementById(`${id}-tab-${target.id}`)?.focus()
}
</script>

<template>
  <div role="tablist" aria-label="Sections">
    <button
      v-for="(tab, i) in tabs"
      :id="`${id}-tab-${tab.id}`"
      :key="tab.id"
      role="tab"
      type="button"
      :aria-selected="tab.id === active"
      :aria-controls="`${id}-panel-${tab.id}`"
      :tabindex="tab.id === active ? 0 : -1"
      @click="active = tab.id"
      @keydown="onKeydown($event, i)"
    >{{ tab.label }}</button>
  </div>
  <div v-for="tab in tabs" v-show="tab.id === active" :id="`${id}-panel-${tab.id}`" :key="tab.id" role="tabpanel" :aria-labelledby="`${id}-tab-${tab.id}`" tabindex="0">
    <slot :name="tab.id" />
  </div>
</template>

import { expect, test } from '@nuxt/test-utils/playwright'

test('modal traps and restores focus', async ({ page, goto }) => {
  await goto('/demo/modal', { waitUntil: 'hydration' })
  const trigger = page.getByRole('button', { name: 'Open settings' })
  await trigger.click()
  const dialog = page.getByRole('dialog', { name: 'Settings' })      // fails if aria-labelledby is missing
  await expect(dialog).toBeVisible()
  await page.keyboard.press('Tab'); await page.keyboard.press('Tab'); await page.keyboard.press('Tab')
  await expect(dialog.locator(':focus')).toBeVisible()               // focus never left the dialog
  await page.keyboard.press('Escape')
  await expect(dialog).toBeHidden()
  await expect(trigger).toBeFocused()                                // restored
})