Add react-axe for run-time accessibility auditing

Description

This change integrates react-axe into our React app so that during local development, every rendered component is automatically audited for common accessibility (a11y) issues. Instead of running separate CLI checks or waiting for a manual audit, violations (e.g., missing alt text, insufficient color contrast, or improper ARIA attributes) will be logged directly to the browser console the moment components mount or update.

What's been added

A conditional block in our entry-point (usually index.js or App.jsx) that only runs when:

• process.env.NODE_ENV !== 'production'
• typeof window !== 'undefined' (i.e., client-side)

Inside that block:

/* eslint-disable-next-line global-require */
const ReactAxe = require('react-axe');
ReactAxe(React, ReactDOM, 1000);

• We throttle audits to at most one check per second (1000ms)
• Any a11y violations detected by axe-core will appear in the browser console, with pointers to the exact DOM node or component source line

Why this matters

Immediate feedback: Instead of discovering accessibility bugs during a late-stage QA pass or CI job, developers see them instantly while coding.

Stronger developer habits: By surfacing missing aria-* attributes, unlabeled form controls, and other WCAG-related issues as warnings, engineers learn to build with semantic, accessible markup from day one.

Zero impact on production: We only bundle react-axe in non-production builds. Once NODE_ENV === 'production', the entire block is excluded, so end users don't incur any runtime overhead.

How to verify

1. With your React dev server running (npm run start or equivalent), open the browser console

2. Navigate through the app and intentionally introduce an a11y issue (e.g., remove an <img alt="…"> or render a <button> without a label)

3. Observe that violations appear in the console immediately, including:

   • A description of the rule
   • A link to the WCAG guideline
   • A snippet of the problematic DOM

Future Notes

If we upgrade to React 18+ and switch to the new createRoot API, we may consider adopting @axe-core/react instead, since it provides explicit support for concurrent rendering. For now, [email protected] works as expected in our dev environment.

Demo