feat: add Lighthouse CI accessibility enforcement to frontend workflow#1013
Merged
famvilianity-eng merged 1 commit intoJul 1, 2026
Merged
Conversation
## Summary
Closes the gap where frontend accessibility regressions could be merged
undetected by adding an automated Lighthouse CI check that gates every PR
and push to main/master.
## Problem
There was no automated mechanism to enforce a minimum accessibility score
on the Checkmate-Escrow frontend. Any change that degraded WCAG compliance
(missing ARIA labels, insufficient colour contrast, unlabelled form
controls, etc.) would slip through CI without notice, accumulating
technical debt and potentially breaking assistive-technology users.
## What was done
### 1. frontend/lighthouserc.js (new file)
Created a Lighthouse CI configuration file at the root of the `frontend/`
directory. Key settings:
- `collect.staticDistDir`: points to `./dist` so that lhci serves the
Vite production build locally — no live URL or test server required.
- `collect.numberOfRuns: 3`: runs three Lighthouse passes and takes the
median score, reducing noise from single-run variance.
- `assert.assertions['categories:accessibility']`: set to
`['error', { minScore: 0.9 }]`, which causes `lhci autorun` to exit
with a non-zero status (failing the CI step) whenever the accessibility
score drops below 90/100.
- `upload.target: 'temporary-public-storage'`: uploads the full report to
Google's temporary storage so reviewers can inspect detailed findings
via a shareable URL without needing a dedicated LHCI server.
### 2. .github/workflows/frontend-accessibility.yml (new file)
Added a dedicated GitHub Actions workflow that runs the Lighthouse CI audit
on every push and pull request that touches files under `frontend/` or
the workflow file itself (path-filtered to avoid burning CI minutes on
unrelated changes).
Workflow steps:
1. actions/checkout@v4 — checks out the repository.
2. actions/setup-node@v4 (Node 20) — sets up Node with npm cache keyed on
`frontend/package-lock.json` for fast dependency restoration.
3. `npm ci` — installs exact locked dependencies (no surprises).
4. `npm run build` — produces the `./dist` static build that Lighthouse
will audit (uses `tsc -b && vite build` per the existing package.json
script).
5. `npm install -g @lhci/cli@0.14.x` — installs the Lighthouse CI CLI at
a pinned minor version to avoid unexpected breaking changes.
6. `lhci autorun --config=./lighthouserc.js` — runs the audit; the step
(and therefore the whole job) fails if the 90-point threshold is not
met, blocking the PR from merging.
7. actions/upload-artifact@v4 — uploads the `.lighthouseci/` directory as
a 30-day artifact named `lighthouse-accessibility-report` so the full
HTML report is always available for review, even when the check passes.
## How it enforces the threshold
Lighthouse CI uses an assertion model: `minScore: 0.9` maps to the
normalised 0–1 score Lighthouse returns for each audited category. If the
median score across the three runs is below 0.90, `lhci autorun` exits
with code 1, the GitHub Actions step is marked failed, and the PR status
check turns red — preventing merge under standard branch protection rules.
## Files changed
- `frontend/lighthouserc.js` — new Lighthouse CI config
- `.github/workflows/frontend-accessibility.yml` — new CI workflow
|
@Joyyyb 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
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.
Summary
Closes the gap where frontend accessibility regressions could be merged undetected by adding an automated Lighthouse CI check that gates every PR and push to main/master.
Problem
There was no automated mechanism to enforce a minimum accessibility score on the Checkmate-Escrow frontend. Any change that degraded WCAG compliance (missing ARIA labels, insufficient colour contrast, unlabelled form controls, etc.) would slip through CI without notice, accumulating technical debt and potentially breaking assistive-technology users.
What was done
1. frontend/lighthouserc.js (new file)
Created a Lighthouse CI configuration file at the root of the
frontend/directory. Key settings:collect.staticDistDir: points to./distso that lhci serves the Vite production build locally — no live URL or test server required.collect.numberOfRuns: 3: runs three Lighthouse passes and takes the median score, reducing noise from single-run variance.assert.assertions['categories:accessibility']: set to['error', { minScore: 0.9 }], which causeslhci autorunto exit with a non-zero status (failing the CI step) whenever the accessibility score drops below 90/100.upload.target: 'temporary-public-storage': uploads the full report to Google's temporary storage so reviewers can inspect detailed findings via a shareable URL without needing a dedicated LHCI server.2. .github/workflows/frontend-accessibility.yml (new file)
Added a dedicated GitHub Actions workflow that runs the Lighthouse CI audit on every push and pull request that touches files under
frontend/or the workflow file itself (path-filtered to avoid burning CI minutes on unrelated changes).Workflow steps:
frontend/package-lock.jsonfor fast dependency restoration.npm ci— installs exact locked dependencies (no surprises).npm run build— produces the./diststatic build that Lighthouse will audit (usestsc -b && vite buildper the existing package.json script).npm install -g @lhci/cli@0.14.x— installs the Lighthouse CI CLI at a pinned minor version to avoid unexpected breaking changes.lhci autorun --config=./lighthouserc.js— runs the audit; the step (and therefore the whole job) fails if the 90-point threshold is not met, blocking the PR from merging..lighthouseci/directory as a 30-day artifact namedlighthouse-accessibility-reportso the full HTML report is always available for review, even when the check passes.How it enforces the threshold
Lighthouse CI uses an assertion model:
minScore: 0.9maps to the normalised 0–1 score Lighthouse returns for each audited category. If the median score across the three runs is below 0.90,lhci autorunexits with code 1, the GitHub Actions step is marked failed, and the PR status check turns red — preventing merge under standard branch protection rules.Files changed
frontend/lighthouserc.js— new Lighthouse CI config.github/workflows/frontend-accessibility.yml— new CI workflowSummary
Provide a short description of the change and the problem it fixes.
Related Issue
Link the issue number or task this PR addresses.
What changed
Verification
cargo test -p escrowcargo test -p oraclecargo fmtcargo clippyChecklist
Notes
Add any additional details, risks, or follow-up tasks here.
Closes #907