カバレッジが失われるのはチケットの段階。ツールの段階ではない

npm i -D @playwright/test @axe-core/playwright
npx playwright install --with-deps chromium

// playwright.config.js
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  use: { baseURL: process.env.BASE_URL ?? 'http://localhost:5173' },
  // すべてのテストが2回走る：デスクトップの表示と、スマートフォンの表示で。
  projects: [
    { name: 'desktop', use: { ...devices['Desktop Chrome'] } },
    { name: 'phone', use: { ...devices['Pixel 7'] } }
  ]
});

// tests/a11y/scan.spec.js
import { test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';

const TAGS = ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa', 'wcag22aa'];
const scan = (page, within) =>
  new AxeBuilder({ page }).withTags(TAGS).include(within).analyze();

// プルリクエストで変えたもの：開いた状態の部品だけ。
test('newsletter dialog has no axe violations', async ({ page }) => {
  await page.goto('/');
  await page.getByRole('button', { name: 'Subscribe' }).click();
  const { violations } = await scan(page, '[role=dialog]');
  expect(violations.map((v) => v.id)).toEqual([]);
});

// 共通テンプレート：種類ごとに1ページ、静止状態で。1ページ数秒。
for (const path of ['/', '/products/example', '/checkout']) {
  test(`axe ${path}`, async ({ page }) => {
    await page.goto(path);
    const { violations } = await scan(page, 'body');
    expect(violations.map((v) => v.id)).toEqual([]);
    // リフロー（WCAG 1.4.10）：幅320pxで横スクロールが出ない。
    await page.setViewportSize({ width: 320, height: 800 });
    const over = () => document.documentElement.scrollWidth > 320;
    expect(await page.evaluate(over)).toBe(false);
  });
}

// tests/newsletter.spec.js
// 機能自身のテスト。アクセシビリティの要件もここに。
test('newsletter dialog keeps focus', async ({ page }) => {
  await page.goto('/');
  const opener = page.getByRole('button', { name: 'Subscribe' });
  await opener.focus();
  await page.keyboard.press('Enter');
  const dialog = page.getByRole('dialog', { name: 'Newsletter' });
  await expect(dialog).toBeVisible();
  // フォーカスが中に移った
  await expect(dialog.locator(':focus')).toHaveCount(1);
  // そして中に留まった
  for (let i = 0; i < 10; i++) await page.keyboard.press('Tab');
  await expect(dialog.locator(':focus')).toHaveCount(1);
  // そして戻った
  await page.keyboard.press('Escape');
  await expect(opener).toBeFocused();
});

# .github/workflows/accessibility.yml
name: Accessibility
on: pull_request
jobs:
  accessibility:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v5
      - uses: actions/setup-node@v5
        with: { node-version: 22, cache: npm }
      - run: npm ci
      - run: npm run lint
      - run: npx playwright install --with-deps chromium
      - run: npx playwright test
        env:
          # playwright.config.js がこれを baseURL として読む。
          BASE_URL: ${{ vars.PREVIEW_URL }}