Component-Level Accessibility Testing Patterns

1import { render, screen } from '@testing-library/react';
2import { axe, toHaveNoViolations } from 'jest-axe';
3
4expect.extend(toHaveNoViolations);
5
6describe('Component-Level Accessibility Testing Patterns', () => {
7  it('meets WCAG 2.1 AA requirements', async () => {
8    const { container } = render(<YourComponent />);
9    const results = await axe(container, {
10      runOnly: { type: 'tag', values: ['wcag2a', 'wcag2aa'] },
11    });
12    expect(results).toHaveNoViolations();
13  });
14
15  it('has proper semantic structure', () => {
16    render(<YourComponent />);
17    // Verify landmarks, headings, and semantic elements
18    expect(screen.getByRole('main')).toBeInTheDocument();
19    expect(screen.getByRole('heading', { level: 1 })).toBeInTheDocument();
20  });
21});

1// Accessible component pattern
2function AccessibleComponent({ label, error }: Props) {
3  const inputId = useId();
4  const errorId = useId();
5
6  return (
7    <div>
8      <label htmlFor={inputId}>{label}</label>
9      <input
10        id={inputId}
11        aria-describedby={error ? errorId : undefined}
12        aria-invalid={error ? 'true' : undefined}
13      />
14      {error && (
15        <span id={errorId} role="alert">
16          {error}
17        </span>
18      )}
19    </div>
20  );
21}

1import { test, expect } from '@playwright/test';
2import AxeBuilder from '@axe-core/playwright';
3
4test('component-level accessibility testing patterns meets WCAG AA', async ({ page }) => {
5  await page.goto('/your-page');
6  await page.waitForLoadState('networkidle');
7
8  const results = await new AxeBuilder({ page })
9    .withTags(['wcag2a', 'wcag2aa'])
10    .analyze();
11
12  const critical = results.violations.filter(
13    v => v.impact === 'critical' || v.impact === 'serious'
14  );
15
16  if (critical.length > 0) {
17    critical.forEach(v => console.error('[' + v.impact + '] ' + v.description));
18  }
19
20  expect(critical).toHaveLength(0);
21});

1# .github/workflows/a11y.yml
2name: Accessibility Tests
3on: [push, pull_request]
4jobs:
5  a11y:
6    runs-on: ubuntu-latest
7    steps:
8      - uses: actions/checkout@v4
9      - uses: actions/setup-node@v4
10        with: { node-version: '20', cache: 'npm' }
11      - run: npm ci
12      - run: npm run test:a11y
13      - uses: actions/upload-artifact@v4
14        if: always()
15        with:
16          name: a11y-results
17          path: test-results/

1// Violation: Missing form label
2// BAD:
3<input type="email" placeholder="Email" />
4
5// GOOD:
6<label htmlFor="email">Email address</label>
7<input id="email" type="email" aria-required="true" />
8
9// Violation: Non-descriptive link text
10// BAD:
11<a href="/courses/1">Read more</a>
12
13// GOOD:
14<a href="/courses/typescript-mastery">
15  View TypeScript Mastery course
16</a>
17
18// Violation: Color as only differentiator
19// BAD:
20<span style={{ color: 'red' }}>Error</span>
21
22// GOOD:
23<span style={{ color: 'red' }} role="alert">
24  <svg aria-hidden="true"><path /></svg>
25  Error: Invalid email format
26</span>