Налаштування тестування доступності в CI/CD пайплайні

Настройка CI/CD пайплайну для тестування доступності

Автоматизоване тестування доступності в CI/CD запобігає регресіям: кожен PR проходить аудит, і якщо появляється нове нарушення WCAG — збірка падає. Комбінуються кілька інструментів: axe-core для компонентного тестування, Playwright для E2E, Lighthouse CI для сторінкового аудиту.

Стратегія покриття

Unit-тесты компонентів (Jest + jest-axe)
  → 100% React-компонентів через Storybook
  → Запуск на кожен коміт

E2E-тесты сторінок (Playwright + axe-core)
  → Ключові сторінки: головна, каталог, форма, checkout
  → Запуск на PR в main

Lighthouse CI (сторінковий аудит)
  → Бюджет: мінімум 90/100 по accessibility
  → Запуск на PR в main

Щотижневий повний аудит (Pa11y + sitemap)
  → Усі публічні сторінки
  → Звіт в Slack

GitHub Actions: повний пайплайн

# .github/workflows/accessibility.yml
name: Accessibility Tests
on:
  pull_request:
    branches: [main]
  schedule:
    - cron: '0 9 * * 1'  # Кожен понеділок в 9:00

jobs:
  component-a11y:
    name: Component Accessibility (Jest)
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: '20' }
      - run: npm ci
      - run: npm test -- --testPathPattern="a11y|accessibility" --coverage=false
        env:
          CI: true

  e2e-a11y:
    name: E2E Accessibility (Playwright)
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: '20' }
      - run: npm ci
      - run: npx playwright install chromium --with-deps
      - name: Start app
        run: npm run build && npm start &
      - name: Wait for app
        run: npx wait-on http://localhost:3000 --timeout 60000
      - name: Run accessibility tests
        run: npx playwright test tests/accessibility/
      - uses: actions/upload-artifact@v4
        if: failure()
        with:
          name: playwright-report
          path: playwright-report/

  lighthouse-a11y:
    name: Lighthouse Audit
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: '20' }
      - run: npm ci && npm run build
      - name: Run Lighthouse CI
        uses: treosh/lighthouse-ci-action@v10
        with:
          urls: |
            http://localhost:3000
            http://localhost:3000/catalog
          budgetPath: .lighthouserc.json
          temporaryPublicStorage: true
        env:
          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}

Playwright: тест доступності сторінок

// tests/accessibility/pages.spec.ts
import { test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';

const PAGES_TO_TEST = [
  { path: '/',         name: 'Головна' },
  { path: '/catalog',  name: 'Каталог' },
  { path: '/contact',  name: 'Контакти' },
];

for (const { path, name } of PAGES_TO_TEST) {
  test(`${name}: WCAG 2.1 AA`, async ({ page }) => {
    await page.goto(path);
    await page.waitForLoadState('networkidle');

    const results = await new AxeBuilder({ page })
      .withTags(['wcag2a', 'wcag2aa'])
      .analyze();

    // Детальний вивід нарушень
    if (results.violations.length > 0) {
      const summary = results.violations.map(v =>
        `[${v.impact}] ${v.id}: ${v.description} (${v.nodes.length} елементів)`
      ).join('\n');
      console.error(`Нарушення на "${name}":\n${summary}`);
    }

    expect(results.violations).toHaveLength(0);
  });
}

Репортинг у Pull Request

# Коментар до PR з результатами аудиту
- name: Comment PR
  uses: thollander/actions-comment-pull-request@v2
  if: always()
  with:
    message: |
      ## Звіт доступності

      | Інструмент | Статус |
      |---|---|
      | Jest + axe | ${{ job.status == 'success' && '✅ Пройдено' || '❌ Помилки' }} |
      | Playwright | ${{ needs.e2e-a11y.result == 'success' && '✅ Пройдено' || '❌ Помилки' }} |
      | Lighthouse | ${{ needs.lighthouse-a11y.result == 'success' && '✅ ≥ 90' || '❌ < 90' }} |

Відомі виключення

Фіксуємо хибнопозитивні спрацьовування в конфігу:

// axe-config.js — виключення для віджетів третіх сторін
const AXE_CONFIG = {
  rules: [
    // Віджет чату (третя сторона, не контролюємо)
    { id: 'color-contrast', selector: '#intercom-frame', enabled: false },
  ],
};

Терміни

Повний CI/CD пайплайн доступності з Jest, Playwright, Lighthouse та репортингом у PR: 3–4 робочих дні.