enhancementgood first issuehacktoberfest
仓库指标
- Star
- (1,087 star)
- PR 合并指标
- (PR 指标待抓取)
描述
Description
Automate accessibility testing by integrating axe-core or Lighthouse CI into the GitHub Actions workflow.
Problem
- No automated accessibility testing
- Manual testing is time-consuming and inconsistent
- WCAG compliance not verified
- Accessibility regressions can go unnoticed
Current Accessibility Features
prefers-reduced-motionsupport in animations- Semantic HTML structure
- No automated testing
Proposed Solution
Add automated a11y testing with:
- axe-core - Fast, comprehensive accessibility testing
- Lighthouse CI - Full accessibility audit
- Run on every PR
- Fail CI if critical issues found
Implementation Options
Option 1: axe-core with Playwright
import { test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';
test('Homepage should not have accessibility violations', async ({ page }) => {
await page.goto('/');
const results = await new AxeBuilder({ page }).analyze();
expect(results.violations).toEqual([]);
});
Option 2: Lighthouse CI
- name: Run Lighthouse CI
uses: treosh/lighthouse-ci-action@v10
with:
urls: |
http://localhost:3000
http://localhost:3000/quizzes
configPath: './.lighthouserc.json'
Acceptance Criteria
- Install axe-core or Lighthouse CI
- Add accessibility tests for key pages
- Test: Homepage
- Test: Quizzes page
- Test: Quiz detail page
- Test: Post page
- Test: Games page
- Configure GitHub Actions workflow
- Fail builds on critical violations
- Generate accessibility report
- Document how to fix common issues
Files to Create/Modify
.github/workflows/accessibility.yml- New workflow.lighthouserc.json- Lighthouse config (if using Lighthouse)tests/accessibility/*.test.ts- Accessibility testsdocs/accessibility.md- Documentation