Charla Cómo aplicar los criterios de accesibilidad en proyecto React

Este proyecto es una demostración de implementación de accesibilidad web en una aplicación React con TypeScript, utilizando herramientas de testing automatizado para garantizar el cumplimiento de las pautas WCAG 2.0 A/AA.

Tecnologías Principales

• React 19.1.0 con TypeScript
• Vite como bundler y servidor de desarrollo
• Jest para testing unitario con jest-axe
• Cypress para testing E2E con cypress-axe
• Tailwind CSS para estilos
• axe-core como motor de análisis de accesibilidad

Instalación y Configuración

1. Instalación de Dependencias

pnpm install

2. Configuración de Jest-Axe para Testing Unitario

Instalación:

pnpm install --save-dev jest-axe @types/jest-axe

Configuración en jest.config.ts:

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  transform: {
    '^.+\\.(ts|tsx)$': 'ts-jest',
  },
  moduleNameMapper: {
    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
  },
  setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
};

Definiciones TypeScript (src/jest-axe.d.ts):

import 'jest-axe';

declare module 'jest-axe' {
  export const axe: any;
  export const toHaveNoViolations: any;
}

declare global {
  namespace jest {
    interface Matchers<R> {
      toHaveNoViolations(): R;
    }
  }
}

3. Configuración de Cypress-Axe para Testing E2E

Instalación:

pnpm install --save-dev cypress cypress-axe @types/cypress

Configuración en cypress/support/e2e.ts

import './commands';
import 'cypress-plugin-tab';
import 'cypress-axe';

Comando personalizado (cypress/support/commands.ts):

import 'cypress-axe';

// Extender la interfaz Chainable para incluir el comando personalizado
declare global {
  namespace Cypress {
    interface Chainable {
      testA11y(context: any, options?: any, violationCallback?: (violations: any[]) => void, skipFailures?: boolean): Chainable<Element>;
    }
  }
}

// Definir un comando personalizado para inyectar axe-core y luego realizar la comprobación
Cypress.Commands.add('testA11y', (context: any, options?: any, violationCallback?: (violations: any[]) => void, skipFailures?: boolean) => {
  cy.injectAxe(); // Inyectar axe-core
  cy.checkA11y(context, options, violationCallback, skipFailures); // Usar el comando original de cypress-axe
});

4. Scripts de testing

• Testing unitario:

  pnpm test
  

• Testing E2E (requiere aplicación corriendo)

  pnpm cypress open
  

Arquitectura

src/
├── components/          # Componentes React
├── tests/               # Tests unitarios
├── jest-axe.d.ts        # Definiciones TypeScript para jest-axe
└── setupTests.ts        # Configuración de testing

cypress/
├── e2e/                 # Tests end-to-end
└── support/             # Comandos y configuración de Cypress