Skip to content

feat: add Lighthouse CI accessibility enforcement to frontend workflow#1013

Merged
famvilianity-eng merged 1 commit into
StellarCheckMate:mainfrom
Joyyyb:feat/lighthouse-ci-accessibility
Jul 1, 2026
Merged

feat: add Lighthouse CI accessibility enforcement to frontend workflow#1013
famvilianity-eng merged 1 commit into
StellarCheckMate:mainfrom
Joyyyb:feat/lighthouse-ci-accessibility

Conversation

@Joyyyb

@Joyyyb Joyyyb commented Jun 30, 2026

Copy link
Copy Markdown
Contributor

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

Summary

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

  • Contracts:
  • Tests:
  • Docs:
  • Events / API / storage:

Verification

  • What did you run to verify this change?
    • cargo test -p escrow
    • cargo test -p oracle
    • cargo fmt
    • cargo clippy

Checklist

  • I added or updated tests covering this change.
  • I updated documentation or confirmed no docs update is needed.
  • I confirmed any event/API/storage changes are documented and backward-compatible.
  • I manually verified the contract or CLI behavior where applicable.
  • I linked this PR to the related issue.
  • I included notes on any TTL or storage assumptions affecting contract state.

Notes

Add any additional details, risks, or follow-up tasks here.

Closes #907

## 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
@drips-wave

drips-wave Bot commented Jun 30, 2026

Copy link
Copy Markdown

@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! 🚀

Learn more about application limits

@famvilianity-eng famvilianity-eng merged commit 9398aa3 into StellarCheckMate:main Jul 1, 2026
3 of 6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add Lighthouse CI accessibility score check to frontend CI

2 participants