feat(a11y): wire @axe-core/playwright into the e2e suite - #13251

Closes #13007

Wires @axe-core/playwright into the existing Playwright suite so a11y fix PRs can prove their fix in a real browser. [feature]

Phase 1 (#13006) covers ARIA patterns in Lit components, but those run in jsdom, which never lays out or paints. Colour contrast and anything else needing rendered pixels can only be checked here.

Technical

• @axe-core/playwright devDependency (4.12.1)
• tests/e2e/a11y.ts — shared a11yCheck(page, options) defaulting to WCAG 2.1 AA, with rules / include / exclude / disableRules scoping
• tests/e2e/a11y.spec.ts — 3 smoke tests
• tests/e2e/README.md — full docs
• .gitignore for playwright-report/ and test-results/, which had none

Not wired to CI, deliberately. No workflow runs npm run test:e2e and this PR doesn't add one. axe-core bumps introduce new rules, so gating on it could fail unrelated PRs. Suggested follow-up: a non-blocking reporting job on a pinned version first.

Baseline. /, /search?q=tolkien, and /subjects/history are clean at WCAG 2.1 AA. Following @RayBB's review, the a11y specs now block archive.org before navigating: axe does scan inside cross-origin iframes under Playwright, and the donation banner's content rotates by campaign (the variant served during development failed image-alt on its close button; the current one doesn't), so leaving it in would tie the scan's result to whatever archive.org serves that day. THIRD_PARTY_FRAMES still excludes any iframe, exported rather than applied as a silent default. Ten nodes come back incomplete for contrast (mostly the gradient borrow buttons, where axe can't determine a background colour) and will never fail a test. Worth a follow-up.

Testing

npx playwright install chromium chromium-headless-shell
npx playwright test                          # 23 passed (20 existing + 3 new)
npx playwright test --grep @a11y --headed    # watch it run

Also npx jest (26 suites, 495 tests, unaffected) and npm run lint (0 errors).

To confirm the gate bites, plant a violation: add this line to the first test in a11y.spec.ts after gotoSettled and rerun.

await page.evaluate(() => document.body.insertAdjacentHTML('beforeend', '<img src="x.gif">'));

It fails on image-alt with the offending markup and remediation steps. (An earlier version of this description said dropping the iframe exclusion would fail on the donation banner. That was true of the banner variant served at the time, but the banner rotates — which is exactly why the specs now block it.)

Adding or editing tests

Scan a page:

import { a11yCheck, expectNoViolations, THIRD_PARTY_FRAMES } from './a11y';

await page.goto('/my-page');
expectNoViolations(await a11yCheck(page, { exclude: THIRD_PARTY_FRAMES }));

For a fix PR, scope to the rule you fixed so it stays green while unrelated violations are outstanding:

expectNoViolations(await a11yCheck(page, { rules: ['frame-title'] }));

Then check it fails without your fix. A scoped rule matching no elements passes trivially, which looks identical to a fix that works. More in tests/e2e/README.md.

Screenshot

No UI changes — test infrastructure only.

Stakeholders

@mekarpeles @RayBB @cdrini @jimchamp