Add axe-playwright accessibility checks to E2E suite #122

New Issue

marcel · 2026-03-27T18:36:06+01:00

marcel commented

2026-03-27 18:36:06 +01:00

Problem

The Playwright E2E suite has no accessibility checks. axe-playwright is not installed. Not a single test calls checkA11y(). Accessibility violations introduced by UI changes are invisible to CI.

Why This Matters

This is a family archival system used by family members of all ages — including older relatives who may rely on screen readers, keyboard navigation, or high contrast. An accessibility regression on the document list or upload form is a real usability failure for those users, not a theoretical concern.

Beyond usability: accessibility violations are some of the easiest bugs to introduce accidentally (missing aria-label, wrong heading hierarchy, unlabelled form inputs) and the hardest to notice in manual review.

What Needs To Be Done

Install axe-playwright:
```
npm install -D axe-playwright
```

Add checkA11y to every E2E test file on the critical pages:

import { checkA11y } from 'axe-playwright';

test('user can search documents', async ({ page }) => {
  await page.goto('/');
  await checkA11y(page, undefined, {
    detailedReport: true,
    detailedReportOptions: { html: true }
  });
  // ... rest of test
});

Priority pages to cover first:
- Home / document search (/)
- Document detail (/documents/[id])
- Document edit form (/documents/[id]/edit)
- Login page (/login)
- Persons list (/persons)
- Admin panel (/admin)
Zero accessibility violations becomes a CI quality gate — the E2E job fails if any checkA11y call reports violations

Acceptance Criteria

axe-playwright installed and imported in E2E tests
checkA11y called on all 6 priority pages
CI E2E job fails on any accessibility violation
Zero existing violations (or all existing ones are documented as known issues with linked tickets)

## Problem The Playwright E2E suite has no accessibility checks. `axe-playwright` is not installed. Not a single test calls `checkA11y()`. Accessibility violations introduced by UI changes are invisible to CI. ## Why This Matters This is a family archival system used by family members of all ages — including older relatives who may rely on screen readers, keyboard navigation, or high contrast. An accessibility regression on the document list or upload form is a real usability failure for those users, not a theoretical concern. Beyond usability: accessibility violations are some of the easiest bugs to introduce accidentally (missing `aria-label`, wrong heading hierarchy, unlabelled form inputs) and the hardest to notice in manual review. ## What Needs To Be Done 1. Install `axe-playwright`: ```bash npm install -D axe-playwright ``` 2. Add `checkA11y` to every E2E test file on the critical pages: ```typescript import { checkA11y } from 'axe-playwright'; test('user can search documents', async ({ page }) => { await page.goto('/'); await checkA11y(page, undefined, { detailedReport: true, detailedReportOptions: { html: true } }); // ... rest of test }); ``` 3. Priority pages to cover first: - Home / document search (`/`) - Document detail (`/documents/[id]`) - Document edit form (`/documents/[id]/edit`) - Login page (`/login`) - Persons list (`/persons`) - Admin panel (`/admin`) 4. Zero accessibility violations becomes a CI quality gate — the E2E job fails if any `checkA11y` call reports violations ## Acceptance Criteria - [ ] `axe-playwright` installed and imported in E2E tests - [ ] `checkA11y` called on all 6 priority pages - [ ] CI E2E job fails on any accessibility violation - [ ] Zero existing violations (or all existing ones are documented as known issues with linked tickets)

marcel added the test label 2026-03-27 18:45:09 +01:00

marcel referenced this issue

2026-03-27 18:53:56 +01:00

devops(testing): add axe-core accessibility checks to Playwright E2E suite #118

marcel commented

2026-03-27 18:54:19 +01:00

Architect review (@mkeller): Closing as duplicate of #118.

Both tickets cover the same goal — automated accessibility checks in the Playwright E2E suite. The difference is the package:

This ticket: axe-playwright (community wrapper, older, largely superseded)
#118: @axe-core/playwright (official Deque integration, actively maintained)

Implement #118. The @axe-core/playwright approach is also better on the implementation details — it handles the hydration wait correctly before running checks.

**Architect review (@mkeller):** Closing as duplicate of #118. Both tickets cover the same goal — automated accessibility checks in the Playwright E2E suite. The difference is the package: - This ticket: `axe-playwright` (community wrapper, older, largely superseded) - #118: `@axe-core/playwright` (official Deque integration, actively maintained) Implement #118. The `@axe-core/playwright` approach is also better on the implementation details — it handles the hydration wait correctly before running checks.

marcel closed this issue

2026-03-27 18:54:43 +01:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: marcel/familienarchiv#122