test(e2e): add exported-page a11y smoke (focus outline, skip-link tab order)

2025-11-14 20:29:54 +09:00
parent 602f1eabde
commit 1ffebc774f
2 changed files with 91 additions and 0 deletions
@@ -0,0 +1,49 @@
+import { test, expect } from '@playwright/test'
+
+type WindowWithExport = Window & {
+  __exportPreview?: () => { html: string; css: string; js: string }
+}
+
+const builderUrl = '/en/builder'
+
+// Verify tab order after activating the skip-link: focus should move into <main>
+// Then the first Tab should reach a focusable descendant (e.g., form submit button)
+test('Skip-link Enter moves focus into main; next Tab reaches first focusable', async ({ page, context }) => {
+  await page.goto(builderUrl)
+  await page.getByTestId('card-hero').click()
+
+  await page.waitForFunction(() => Boolean((window as unknown as WindowWithExport).__exportPreview), { timeout: 5000 })
+  const exported = await page.evaluate(() => (window as unknown as WindowWithExport).__exportPreview?.() ?? null)
+  expect(exported).not.toBeNull()
+
+  const preview = await context.newPage()
+  await preview.setContent(exported!.html)
+  await preview.addStyleTag({ content: exported!.css })
+
+  const skip = preview.locator('a.skip-link')
+  await expect(skip).toHaveCount(1)
+  await skip.focus()
+  await expect(skip).toBeFocused()
+
+  // Activate skip-link
+  await preview.keyboard.press('Enter')
+
+  // Focus should be inside #main or on #main
+  const focusedInMain = await preview.evaluate(() => {
+    const main = document.getElementById('main')!
+    const active = document.activeElement as HTMLElement | null
+    if (!active) return false
+    return active === main || main.contains(active)
+  })
+  expect(focusedInMain).toBeTruthy()
+
+  // Press Tab and expect a focusable inside main (submit button) to receive focus
+  await preview.keyboard.press('Tab')
+  const isSubmitFocused = await preview.evaluate(() => {
+    const active = document.activeElement as HTMLElement | null
+    return !!active && active.tagName.toLowerCase() === 'button' && (active as HTMLButtonElement).type === 'submit'
+  })
+  expect(isSubmitFocused).toBeTruthy()
+
+  await preview.close()
+})