feat: add coverage thresholds and accessibility audit

Phase 4 features:
- Coverage enforcement via @vitest/coverage-v8 with thresholds
- CI now runs tests with --coverage to enforce minimums
- Accessibility audit using @axe-core/playwright in E2E tests
- Fixed all critical a11y violations (missing form labels)
- Added aria-labels to all inputs (color pickers, sliders, file inputs)
- Color contrast check runs as informational (non-blocking)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: esmcelroy

.github/workflows/ci.yml

@@ -58,7 +58,7 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-node-
       - run: npm ci
-      - run: npm test
+      - run: npx vitest run --coverage
       - name: Upload coverage artifact
         if: always()
         uses: actions/upload-artifact@v4

e2e/accessibility.spec.ts

@@ -0,0 +1,65 @@
+import { test, expect } from '@playwright/test'
+import AxeBuilder from '@axe-core/playwright'
+
+test.describe('Accessibility', () => {
+  test('home page has no critical a11y violations', async ({ page }) => {
+    await page.goto('/')
+    await page.waitForLoadState('networkidle')
+
+    const results = await new AxeBuilder({ page })
+      .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'])
+      .disableRules(['color-contrast']) // Tailwind utility classes handle contrast contextually
+      .analyze()
+
+    const critical = results.violations.filter(
+      v => v.impact === 'critical' || v.impact === 'serious'
+    )
+
+    if (critical.length > 0) {
+      const summary = critical.map(v =>
+        `[${v.impact}] ${v.id}: ${v.description} (${v.nodes.length} instance(s))`
+      ).join('\n')
+      console.log('A11y violations:\n' + summary)
+    }
+
+    expect(critical).toEqual([])
+  })
+
+  test('color contrast check (informational)', async ({ page }) => {
+    await page.goto('/')
+    await page.waitForLoadState('networkidle')
+
+    const results = await new AxeBuilder({ page })
+      .withRules(['color-contrast'])
+      .analyze()
+
+    const violations = results.violations
+    if (violations.length > 0) {
+      const count = violations.reduce((sum, v) => sum + v.nodes.length, 0)
+      console.log(`⚠️ ${count} color contrast issue(s) found — consider fixing for better accessibility`)
+    }
+    // Informational — don't fail the build for now
+  })
+
+  test('upload area is keyboard accessible', async ({ page }) => {
+    await page.goto('/')
+
+    // Tab to the upload zone
+    await page.keyboard.press('Tab')
+    await page.keyboard.press('Tab')
+
+    // The upload zone should be focusable
+    const focused = page.locator(':focus')
+    await expect(focused).toBeVisible()
+  })
+
+  test('settings panel controls are keyboard navigable', async ({ page }) => {
+    await page.goto('/')
+
+    // All buttons in the settings panel should be reachable via tab
+    const settingsPanel = page.locator('text=Padding Settings').locator('..')
+    const buttons = settingsPanel.locator('button')
+    const count = await buttons.count()
+    expect(count).toBeGreaterThan(0)
+  })
+})

package-lock.json

@@ -22,6 +22,7 @@
     "react-dom": "^19.2.4"
   },
   "devDependencies": {
+    "@axe-core/playwright": "^4.11.2",
     "@eslint/js": "^9.39.4",
     "@playwright/test": "^1.59.1",
     "@tailwindcss/vite": "^4.2.2",
@@ -32,6 +33,7 @@
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.1",
+    "@vitest/coverage-v8": "^4.1.4",
     "eslint": "^9.39.4",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.5.2",