Initial testing framework

tests/e2e/axe.ts

@@ -0,0 +1,5 @@
+import { injectAxe, checkA11y } from '@axe-core/playwright';
+export async function runA11y(page, options = {}) {
+  await injectAxe(page);
+  await checkA11y(page, undefined, { detailedReport: true, detailedReportOptions: { html: true }, ...options });
+}

tests/e2e/homepage.spec.ts

@@ -0,0 +1,95 @@
+import { test, expect } from '@playwright/test';
+import { runA11y } from './axe';
+
+test('home loads, nav works, basic a11y passes', async ({ page }) => {
+  await page.goto('/');
+  
+  // Check that the page loads
+  await expect(page).toHaveTitle(/Community Rule/);
+  
+  // Check for main navigation elements
+  await expect(page.getByRole('banner')).toBeVisible();
+  
+  // Check for main content
+  await expect(page.getByRole('main')).toBeVisible();
+  
+  // Check for footer
+  await expect(page.getByRole('contentinfo')).toBeVisible();
+});
+
+test('keyboard navigation works', async ({ page }) => {
+  await page.goto('/');
+  
+  // Tab through the page
+  await page.keyboard.press('Tab');
+  
+  // Check that focus is visible
+  await expect(page.locator(':focus')).toBeVisible();
+  
+  // Continue tabbing to test navigation
+  for (let i = 0; i < 5; i++) {
+    await page.keyboard.press('Tab');
+    await expect(page.locator(':focus')).toBeVisible();
+  }
+});
+
+test('accessibility standards are met', async ({ page }) => {
+  await page.goto('/');
+  
+  // Run automated a11y checks
+  await runA11y(page, { 
+    axeOptions: { 
+      runOnly: ['wcag2a', 'wcag2aa'] 
+    } 
+  });
+});
+
+test('responsive design works', async ({ page }) => {
+  // Test mobile viewport
+  await page.setViewportSize({ width: 375, height: 667 });
+  await page.goto('/');
+  
+  // Check that content is visible on mobile
+  await expect(page.getByRole('main')).toBeVisible();
+  
+  // Test tablet viewport
+  await page.setViewportSize({ width: 768, height: 1024 });
+  await expect(page.getByRole('main')).toBeVisible();
+  
+  // Test desktop viewport
+  await page.setViewportSize({ width: 1440, height: 900 });
+  await expect(page.getByRole('main')).toBeVisible();
+});
+
+test('images have alt text', async ({ page }) => {
+  await page.goto('/');
+  
+  // Get all images
+  const images = page.locator('img');
+  const imageCount = await images.count();
+  
+  // Check that all images have alt attributes
+  for (let i = 0; i < imageCount; i++) {
+    const image = images.nth(i);
+    const alt = await image.getAttribute('alt');
+    expect(alt).toBeTruthy();
+  }
+});
+
+test('links are accessible', async ({ page }) => {
+  await page.goto('/');
+  
+  // Get all links
+  const links = page.locator('a');
+  const linkCount = await links.count();
+  
+  // Check that all links have either text content or aria-label
+  for (let i = 0; i < linkCount; i++) {
+    const link = links.nth(i);
+    const text = await link.textContent();
+    const ariaLabel = await link.getAttribute('aria-label');
+    
+    // Link should have either text content or aria-label
+    expect(text?.trim() || ariaLabel).toBeTruthy();
+  }
+});