feat: add dev-only @axe-core/react accessibility checker- #1 - #1453
Merged
Conversation
Restore the deleted @axe-core/react integration as a dev-only check that logs axe violations to the DevTools console during local development, catching issues before CI's accessibility.yml runs. A client component in the root layout initializes the harness only when NODE_ENV is development; the guarded dynamic import is tree-shaken out of the production bundle (verified against a Next/Turbopack production build, no axe-core content in any chunk). 🤖 Generated with Codebuff Co-Authored-By: Codebuff <noreply@codebuff.com>
feat: add dev-only @axe-core/react accessibility checker
|
@petermuazu Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits. You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #1328
Closes #1329
Closes #1330
Closes #1331
Summary
Restores the deleted
@axe-core/reactintegration as a dev-only accessibility check that logs violations to the DevTools console during local development — catching issues before they ever reach CI'saccessibility.yml(jest-axe / Lighthouse / axe-core / pa11y jobs).The harness is attached to the React root via a client component rendered in the root layout, and is fully tree-shaken out of the production bundle — verified against a real Next.js/Turbopack production build, not just disabled at runtime.
Why
@axe-core/react(plus the ~1MBaxe-coreengine it carries) must never ship to production users. The integration relies on build-time constant folding ofprocess.env.NODE_ENVso the guarded dynamic import is eliminated entirely from production output.What changed
frontend/src/lib/reportAccessibility.tsNODE_ENV === 'development'(plus atypeof windowSSR guard and a one-shotinitializedflag), then lazyimport()s@axe-core/reactand callsaxe.default(React, ReactDOM, 1000, config).frontend/src/components/AxeAccessibility.tsx'use client'component (rendersnull) that callsreportAccessibility(React)on mount.frontend/src/app/layout.tsx<AxeAccessibility />inside the root<body>so it shares the app's React/ReactDOM instances with axe.frontend/src/lib/__tests__/reportAccessibility.test.tsEdge case: production tree-shaking (requirement)
The requirement states the integration must be fully tree-shaken from the production bundle, not merely disabled at runtime.
process.env.NODE_ENV === 'development'is statically replaced by Next.js at build time. In production the branch becomesfalse, and the guarded dynamicimport('@axe-core/react')/import('react-dom')are dead-code-eliminated..next/static/chunks/*.js:@axe-core/reactreference: 0 matchescolor-contrast,landmark-one-main,html-has-lang,axe.run): 0 matchesreportAccessibilitybody plus anull-rendering component) — well within existingbundlewatchbudgets.Testing
npx jest reportAccessibility) — all pass:NODE_ENVisproduction.@axe-core/reactindevelopmentwith the expected args(React, ReactDOM, 1000, config).Out of scope / pre-existing issue
frontend/src/app/admin/content/page.tsxhas broken relative imports (../../../../resolves abovesrc/) plus pre-existing type errors, so a fullnpm run buildcurrently fails on that route — unrelated to this change. The touched files typecheck and compile cleanly in isolation. A follow-up to fix that admin route is recommended since it also blocks CI's build-based a11y audit jobs.