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

test.describe('Accessibility', () => {
  test('home page has no critical violations', async ({ page }) => {
    await page.goto('/');
    await page.waitForLoadState('networkidle');

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

    // Log violations for debugging
    if (results.violations.length > 0) {
      console.log('Violations:', JSON.stringify(results.violations, null, 2));
    }

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

  test('modal dialog is accessible when open', async ({ page }) => {
    await page.goto('/');
    await page.click('[data-testid="open-modal"]');
    await page.waitForSelector('[role="dialog"]');

    const results = await new AxeBuilder({ page })
      .include('[role="dialog"]')
      .analyze();

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

// scripts/triage-a11y.ts
import Anthropic from '@anthropic-ai/sdk';
import { readFileSync } from 'fs';

const client = new Anthropic();

async function triageViolations(violationsJson: string): Promise<void> {
  const violations = JSON.parse(violationsJson);

  const prompt = `
You are an accessibility specialist. Here are axe-core violations from our app:

${JSON.stringify(violations, null, 2)}

For each violation:
1. Rate severity: Critical (blocks users), High (significant barrier), Medium (annoyance), Low (minor)
2. Identify which WCAG success criterion is violated
3. Write a 1-sentence fix recommendation
4. Flag if this likely affects screen reader users, keyboard-only users, or both

Return as a JSON array sorted by severity. Do not include Low severity items if there are more than 10 total violations.
`;

  const response = await client.messages.create({
    model: 'claude-sonnet-4-6',
    max_tokens: 2048,
    messages: [{ role: 'user', content: prompt }],
  });

  console.log(response.content[0].text);
}

const violations = readFileSync('axe-results.json', 'utf8');
triageViolations(violations);

// tests/keyboard-nav.spec.ts
import { test, expect } from '@playwright/test';

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

  // Start from outside the form
  await page.keyboard.press('Tab');

  const focusTrail: string[] = [];
  const maxTabs = 30;

  for (let i = 0; i < maxTabs; i++) {
    const focusedElement = await page.evaluate(() => {
      const el = document.activeElement;
      if (!el) return null;
      return {
        tag: el.tagName,
        type: el.getAttribute('type'),
        label: el.getAttribute('aria-label') ||
               el.getAttribute('placeholder') ||
               document.querySelector(`label[for="${el.id}"]`)?.textContent?.trim(),
        role: el.getAttribute('role'),
      };
    });

    if (focusedElement) {
      focusTrail.push(JSON.stringify(focusedElement));
    }

    // Stop if we've looped back
    if (i > 5 && focusTrail[i] === focusTrail[0]) break;

    await page.keyboard.press('Tab');
  }

  // Log for debugging — paste into Claude for analysis
  console.log('Focus order:', focusTrail.join('\n'));

  // Basic assertion: all interactive elements received focus
  const submitButton = await page.evaluate(() => {
    return document.activeElement?.textContent?.includes('Submit');
  });

  // This just verifies tab reaches submit — Claude audits the full trail
  expect(focusTrail.some(f => f.includes('Submit'))).toBe(true);
});