maternal-app/maternal-web/__tests__/accessibility/wcag.test.tsx

import { render } from '@testing-library/react';
import { axe, toHaveNoViolations } from 'jest-axe';

expect.extend(toHaveNoViolations);

// Mock components for testing
const AccessibleButton = () => (
  <button aria-label="Submit form">Submit</button>
);

const InaccessibleButton = () => (
  <button>Submit</button>
);

const AccessibleForm = () => (
  <form>
    <label htmlFor="email">Email</label>
    <input id="email" type="email" />
    <button type="submit" aria-label="Submit form">Submit</button>
  </form>
);

describe('WCAG Accessibility Compliance', () => {
  it('should not have accessibility violations for buttons with aria-label', async () => {
    const { container } = render(<AccessibleButton />);
    const results = await axe(container);

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

  it('should have proper form labels', async () => {
    const { container } = render(<AccessibleForm />);
    const results = await axe(container);

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

  it('should have proper color contrast', async () => {
    const { container } = render(
      <div style={{ backgroundColor: '#000', color: '#fff' }}>
        High contrast text
      </div>
    );

    const results = await axe(container);
    expect(results).toHaveNoViolations();
  });

  it('should have accessible heading hierarchy', async () => {
    const { container } = render(
      <div>
        <h1>Main Title</h1>
        <h2>Subtitle</h2>
        <h3>Section Title</h3>
      </div>
    );

    const results = await axe(container);
    expect(results).toHaveNoViolations();
  });

  it('should have accessible links', async () => {
    const { container } = render(
      <a href="/about" aria-label="Learn more about us">
        Learn more
      </a>
    );

    const results = await axe(container);
    expect(results).toHaveNoViolations();
  });

  it('should have accessible images', async () => {
    const { container } = render(
      <img src="/test.jpg" alt="Descriptive text for image" />
    );

    const results = await axe(container);
    expect(results).toHaveNoViolations();
  });

  it('should support keyboard navigation', async () => {
    const { container } = render(
      <div>
        <button tabIndex={0}>First</button>
        <button tabIndex={0}>Second</button>
        <button tabIndex={0}>Third</button>
      </div>
    );

    const results = await axe(container);
    expect(results).toHaveNoViolations();
  });

  it('should have proper ARIA roles', async () => {
    const { container } = render(
      <nav role="navigation" aria-label="Main navigation">
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/about">About</a></li>
        </ul>
      </nav>
    );

    const results = await axe(container);
    expect(results).toHaveNoViolations();
  });

  it('should have accessible modal dialogs', async () => {
    const { container } = render(
      <div
        role="dialog"
        aria-labelledby="dialog-title"
        aria-modal="true"
      >
        <h2 id="dialog-title">Modal Title</h2>
        <p>Modal content</p>
        <button aria-label="Close modal">Close</button>
      </div>
    );

    const results = await axe(container);
    expect(results).toHaveNoViolations();
  });

  it('should have accessible loading states', async () => {
    const { container } = render(
      <div role="status" aria-live="polite" aria-busy="true">
        Loading...
      </div>
    );

    const results = await axe(container);
    expect(results).toHaveNoViolations();
  });
});