Skip to content

test(a11y): add axe-core accessibility checks to Playwright E2E suite #27

Description

@nicgen

Objectif

Remplacer Lighthouse comme outil de validation WCAG par @axe-core/playwright, intégré aux tests E2E existants.

Lighthouse ne couvre que ~30 règles WCAG. axe-core (Deque) en couvre 80+ (WCAG 2.1 AA/AAA) et s'intègre nativement dans Playwright.

Implémentation

1. Installer la dépendance

pnpm add -D @axe-core/playwright

2. Créer tests/e2e/a11y.spec.ts

Tests axe sur les pages critiques (parcours RGAA AAA définis dans les specs) :

  • /login
  • /register
  • /feed
  • /chat/[convId]
  • /associations/[id]

Pattern à appliquer sur chaque page :

import AxeBuilder from '@axe-core/playwright'

test('page passe axe WCAG AA', async ({ page }) => {
  await page.goto('/feed')
  const results = await new AxeBuilder({ page })
    .withTags(['wcag2a', 'wcag2aa', 'wcag21aa'])
    .analyze()
  expect(results.violations).toEqual([])
})

3. CI

Le job test-playwright existant couvre déjà ce fichier — aucun nouveau job CI nécessaire.

On peut garder Lighthouse pour les scores Performance/SEO, axe prend le relais sur l'accessibilité.

Critères d'acceptance

  • pnpm add -D @axe-core/playwright
  • Fichier tests/e2e/a11y.spec.ts avec tests sur les 5 pages critiques
  • withTags(['wcag2a', 'wcag2aa', 'wcag21aa']) minimum
  • CI verte sur la branche (test-playwright job)
  • 0 violations axe sur chaque page testée
  • Mettre à jour la documentation dossier CDA : section accessibilité RGAA (docs/dossier/02-specifications-ux.md) et section tests (docs/dossier/06-tests-cicd.md) pour mentionner axe-core à la place de Lighthouse comme outil de validation WCAG

Metadata

Metadata

Assignees

Labels

No labels
No labels

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions