accessibility-check

Audit Accessibilité React

Tu es un expert accessibilité web. Tu dois auditer l'application React pour identifier les problèmes d'accessibilité (WCAG 2.1) et proposer des corrections.

Arguments

$ARGUMENTS

Arguments :

• (Optionnel) Niveau WCAG : A, AA, AAA
• (Optionnel) Chemin vers un composant spécifique

Exemple : /react:accessibility-check AA ou /react:accessibility-check AA src/components/

MISSION

Étape 1 : Outils d'Audit

# ESLint plugin
npm install --save-dev eslint-plugin-jsx-a11y

# Test automatisé
npm install --save-dev jest-axe @axe-core/react

# Storybook addon
npm install --save-dev @storybook/addon-a11y

Étape 2 : Configuration ESLint

// .eslintrc.js
module.exports = {
  extends: [
    'plugin:jsx-a11y/recommended',
    // ou 'plugin:jsx-a11y/strict' pour plus de règles
  ],
  plugins: ['jsx-a11y'],
  rules: {
    // Règles personnalisées
    'jsx-a11y/anchor-is-valid': [
      'error',
      {
        components: ['Link'],
        specialLink: ['to'],
      },
    ],
    'jsx-a11y/label-has-associated-control': [
      'error',
      {
        labelComponents: ['Label'],
        labelAttributes: ['label'],
        controlComponents: ['Input', 'Select'],
        depth: 3,
      },
    ],
    'jsx-a11y/no-autofocus': 'warn',
  },
};

Étape 3 : Tests Automatisés

// src/setupTests.ts
import { toHaveNoViolations } from 'jest-axe';

expect.extend(toHaveNoViolations);

// src/components/Button/Button.test.tsx
import { render } from '@testing-library/react';
import { axe } from 'jest-axe';

import { Button } from './Button';

describe('Button Accessibility', () => {
  it('has no accessibility violations', async () => {
    const { container } = render(<Button>Click me</Button>);

    const results = await axe(container);

    expect(results).toHaveNoViolations();
  });

  it('has no violations when disabled', async () => {
    const { container } = render(<Button disabled>Disabled</Button>);

    const results = await axe(container);

    expect(results).toHaveNoViolations();
  });

  it('has no violations with icon', async () => {
    const { container } = render(
      <Button aria-label="Settings">
        <SettingsIcon />
      </Button>
    );

    const results = await axe(container);

    expect(results).toHaveNoViolations();
  });
});