remora/web/tests/e2e/accessibility.spec.ts

61 lines
2 KiB
TypeScript
Raw Permalink Normal View History

import AxeBuilder from '@axe-core/playwright'
import { expect, test } from '@playwright/test'
test.beforeEach(async ({ page }) => {
await page.route('**/auth/session', (route) =>
route.fulfill({
contentType: 'application/json',
body: JSON.stringify({
kind: 'authenticated',
identity: 'issuer\u0000subject',
csrfToken: 'csrf-value',
}),
}),
)
await page.route(/\/bff\/api\//, (route) => {
const path = new URL(route.request().url()).pathname
if (path.endsWith('/jobs'))
return route.fulfill({
contentType: 'application/json',
body: JSON.stringify({
items: [],
next_cursor: null,
event_cursor: 'cursor-snapshot-0001',
management_capabilities: { revoke_execution_grants: false },
}),
})
return route.fulfill({
status: 201,
contentType: 'application/json',
body: JSON.stringify({
ticket: 'ticket_00001',
expires_at: '2026-07-20T00:00:00Z',
}),
})
})
await page.routeWebSocket(/\/bff\/events/, () => {})
})
test('meets automated WCAG A and AA checks', async ({ page }) => {
await page.goto('/')
await expect(page.getByRole('heading', { name: 'Remora' })).toBeVisible()
const results = await new AxeBuilder({ page })
.withTags(['wcag2a', 'wcag2aa', 'wcag21aa', 'wcag22aa'])
.analyze()
expect(results.violations).toEqual([])
})
test('reflows at 320 CSS pixels and preserves keyboard focus', async ({
page,
}) => {
await page.setViewportSize({ width: 320, height: 720 })
await page.goto('/')
await expect(page.getByRole('heading', { name: 'Remora' })).toBeVisible()
expect(
await page.evaluate(() => document.documentElement.scrollWidth),
).toBeLessThanOrEqual(320)
await page.keyboard.press('Tab')
await expect(page.getByRole('button', { name: 'Sign out' })).toBeFocused()
await page.keyboard.press('Tab')
await expect(page.getByRole('button', { name: 'Jobs' })).toBeFocused()
})