Include accessibility testing

import { render } from '@testing-library/react'
import { axe, toHaveNoViolations } from 'jest-axe'
 
expect.extend(toHaveNoViolations)
 
describe('Button', () => {
  it('should have no accessibility violations', async () => {
    const { container } = render(
      <Button onClick={() => {}}>Click me</Button>
    )
    const results = await axe(container)
    expect(results).toHaveNoViolations()
  })
})
 
// Test specific rules
it('should have proper color contrast', async () => {
  const { container } = render(<Alert type="warning">Warning</Alert>)
  const results = await axe(container, {
    rules: {
      'color-contrast': { enabled: true }
    }
  })
  expect(results).toHaveNoViolations()
})

import { test, expect } from '@playwright/test'
import AxeBuilder from '@axe-core/playwright'
 
test.describe('Homepage accessibility', () => {
  test('should have no violations', async ({ page }) => {
    await page.goto('/')
 
    const accessibilityScanResults = await new AxeBuilder({ page }).analyze()
 
    expect(accessibilityScanResults.violations).toEqual([])
  })
 
  test('should have no violations on mobile', async ({ page }) => {
    await page.setViewportSize({ width: 375, height: 667 })
    await page.goto('/')
 
    const results = await new AxeBuilder({ page })
      .withTags(['wcag2a', 'wcag2aa'])
      .analyze()
 
    expect(results.violations).toEqual([])
  })
})

import 'cypress-axe'
 
describe('Form accessibility', () => {
  beforeEach(() => {
    cy.visit('/contact')
    cy.injectAxe()
  })
 
  it('should have no violations on load', () => {
    cy.checkA11y()
  })
 
  it('should have no violations after form errors', () => {
    cy.get('button[type="submit"]').click()
    cy.checkA11y()
  })
 
  it('should exclude known issues', () => {
    cy.checkA11y(null, {
      rules: {
        'color-contrast': { enabled: false } // Known issue, tracked in backlog
      }
    })
  })
})

# GitHub Actions
name: Accessibility Tests
on: [push, pull_request]
 
jobs:
  a11y:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
      - run: npm ci
      - run: npm run test:a11y
      - uses: actions/upload-artifact@v4
        if: failure()
        with:
          name: a11y-report
          path: a11y-report.html

{
  "ci": {
    "assert": {
      "assertions": {
        "categories:accessibility": ["error", { "minScore": 0.9 }],
        "image-alt": "error",
        "label": "error",
        "link-name": "error"
      }
    }
  }
}