The five layers of an a11y audit

import { test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';

test('homepage has no WCAG violations', async ({ page }) => {
  await page.goto('/');

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

  // Fail on any violation — keep your baseline at zero
  expect(results.violations, formatViolations(results.violations))
    .toHaveLength(0);
});

function formatViolations(v: import('axe-core').Result[]) {
  return v
    .map((r) => `${r.id} (${r.impact}): ${r.help}`)
    .join('\n');
}

test('checkout is fully keyboard-navigable', async ({ page }) => {
  await page.goto('/checkout');

  // Tab through every field in order
  const expectedFocus = [
    'email',
    'fullName',
    'address1',
    'city',
    'zip',
    'cardNumber',
    'expiry',
    'cvv',
    'submit',
  ];

  for (const fieldId of expectedFocus) {
    await page.keyboard.press('Tab');
    const focused = await page.evaluate(() => document.activeElement?.id);
    expect(focused, `focus should land on #${fieldId}`).toBe(fieldId);
  }

  // Submit via Enter, not mouse
  await page.keyboard.press('Enter');
  await expect(page.getByText(/thank you/i)).toBeVisible();
});

// Partial automation — verify ARIA contracts that screen readers depend on
test('error summary is announced when submit fails', async ({ page }) => {
  await page.goto('/checkout');
  await page.getByRole('button', { name: /submit/i }).click();

  // aria-live="assertive" on the error region means SR announces immediately
  const errorRegion = page.getByRole('alert');
  await expect(errorRegion).toBeVisible();
  await expect(errorRegion).toContainText(/please fix/i);

  // Focus should move to the summary for SR users
  await expect(errorRegion).toBeFocused();
});

// Manual verification (scripted for manual QA)
/*
 1. Turn on VoiceOver (Cmd+F5 on macOS)
 2. Submit empty form
 3. Expect: "4 errors in this form. Please fix and resubmit." announced
 4. Tab → should land on first error-linked input
 5. Input's label should be "Email. Invalid. 'abc' is not a valid email."
*/

test('error states survive forced colors', async ({ page }) => {
  await page.emulateMedia({ forcedColors: 'active' });
  await page.goto('/checkout');

  await page.getByRole('button', { name: /submit/i }).click();

  // Red border alone is invisible in forced colors — need icon + text
  const error = page.getByTestId('email-error');
  await expect(error).toBeVisible();
  await expect(error).toContainText(/required/i);     // not just colour
  await expect(error.locator('svg[aria-label]')).toBeVisible();  // icon present
});

test('hero animation respects reduced motion', async ({ page }) => {
  await page.emulateMedia({ reducedMotion: 'reduce' });
  await page.goto('/');

  const hero = page.getByTestId('hero-carousel');
  // Auto-rotate must be OFF
  await expect(hero).toHaveAttribute('data-autoplay', 'false');
  // Keyframe animations paused
  const animState = await hero.evaluate(
    (el) => getComputedStyle(el).animationPlayState,
  );
  expect(animState).toBe('paused');
});

// Partial automation — detect known anti-patterns
test('form does not auto-submit on field change', async ({ page }) => {
  await page.goto('/search');

  const before = page.url();
  await page.getByLabel(/query/i).fill('test');
  await page.keyboard.press('Tab');  // leave field — should NOT submit

  expect(page.url()).toBe(before);
});

test('session timeout warning appears before logout', async ({ page }) => {
  await page.goto('/dashboard');

  // Advance clock by 15 min (timeout is 20 min)
  await page.clock.fastForward(15 * 60 * 1000);

  // Warning banner must appear at least 5 min before forced logout
  await expect(page.getByRole('alert', { name: /session/i })).toBeVisible();
  await expect(page.getByRole('button', { name: /keep me signed in/i })).toBeVisible();
});

// Heuristic checklist (reviewed manually per page)
/*
 - Can the user undo destructive actions within 5 minutes?
 - Are error messages phrased as solutions ("Use YYYY-MM-DD"), not diagnoses ("invalid format")?
 - Does the page work at 200% browser zoom without horizontal scroll?
 - Is there a 'skip to content' link at the top of every page?
*/