50 lines
1.9 KiB
TypeScript
50 lines
1.9 KiB
TypeScript
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()
|
|
})
|