maternal-app/maternal-web/components/providers/AxeProvider.tsx

'use client';

import React, { useEffect } from 'react';

/**
 * AxeProvider - Development-time accessibility testing
 *
 * Integrates axe-core to automatically test for accessibility violations
 * during development. Violations are logged to the browser console.
 *
 * Only runs in development mode to avoid performance impact in production.
 */
export function AxeProvider({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    if (process.env.NODE_ENV === 'development') {
      import('@axe-core/react').then((axe) => {
        const React = require('react');
        const ReactDOM = require('react-dom');

        axe.default(React, ReactDOM, 1000, {
          // Configuration options
          rules: [
            {
              id: 'color-contrast',
              enabled: true,
            },
            {
              id: 'label',
              enabled: true,
            },
            {
              id: 'button-name',
              enabled: true,
            },
            {
              id: 'link-name',
              enabled: true,
            },
          ],
        });

        console.log('🔍 Axe accessibility testing enabled in development mode');
      }).catch((error) => {
        console.warn('Failed to load @axe-core/react:', error);
      });
    }
  }, []);

  return <>{children}</>;
}