Web: Add an automated accessibility check to CI for the dashboard

[mallison031]

Repo context. accensa-app is the off-chain half of Accensa — the merchant back-office for x402 sellers on Stellar. Three workspace packages matter: apps/web (Next.js dashboard and the indexer at src/app/api/sync), packages/sdk (@accensa/sdk), and apps/demo-merchant. The Soroban contracts live in accensa-contracts.

🟡 Partially blocked. The Playwright harness is the natural host for this. It can be built standalone, but coordinate if both are being worked in the same Wave.

Problem

This audit found four separate accessibility defects on the dashboard — rows that cannot be reached by keyboard, a modal that is not announced as a dialog and does not trap focus, tables without column scope, and a verify result that is never announced. All four are the kind that automated tooling catches immediately, and all four have been in main unnoticed.

There is no accessibility check in CI. The ci.yml workflow does not run one, and nothing in apps/web depends on an accessibility tool.

The pattern is the point: these defects were not hard to find once someone looked in a browser. Without a gate, the next four will accumulate the same way.

What to build

Add a check that fails the build on regressions.

1. Wire an automated pass — @axe-core/playwright if the Playwright harness has landed, otherwise a standalone runner against a local build.
2. Cover the real routes: /dashboard, /dashboard/routes, /verify, /login, and the dashboard with its payment modal open. The modal is where several known defects live, so a check that never opens it is close to worthless.
3. Set an honest baseline. If existing violations would fail the build immediately, record them explicitly as a documented allowlist with a linked issue each — never a blanket severity threshold that hides the whole category.
4. Make failures readable. The output should name the element and the rule, so a contributor can act on it without rerunning locally.

Out of scope: fixing the existing violations. Each is tracked separately; this issue makes sure new ones cannot land silently.

Acceptance criteria

• An automated accessibility check runs in CI and can fail the build.
• All five states listed above are covered, including the open modal.
• Pre-existing violations are enumerated in an allowlist, each linked to an issue.
• A newly introduced violation fails the build — demonstrated in the PR.
• Failure output names the offending element and rule.
• pnpm lint passes in apps/web.
• pnpm test passes, including new tests covering this change.
• pnpm build succeeds for apps/web.
• PR description includes Closes #<this issue>.

Contact & Support

• Telegram
• Discord
• SUPPORT.md — contribution help, Wave process, and the full list of channels

[araoyeidris16-ctrl]

@araoyeidris16-ctrl has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

I will like to work on this field because I have the experience and I have seen the issue,it's something I can maintain

ℹ️ Repo Maintainers: To accept this application, review their application or assign @araoyeidris16-ctrl to this issue.

[Hakimziyech18]

@Hakimziyech18 has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

Goodday Sir/Ma, please can you assign me this issue to resolve as quickly as I can, thank you.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Hakimziyech18 to this issue.

[0dillon]

@0dillon has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

Please assign

ℹ️ Repo Maintainers: To accept this application, review their application or assign @0dillon to this issue.

[oraimoitel]

@oraimoitel has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

Hi maintainer i will be glad to be assigned to work on this issue please

ℹ️ Repo Maintainers: To accept this application, review their application or assign @oraimoitel to this issue.

[drips-wave]

Congratulations, @oraimoitel! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on August 31, 2026.

🧑‍💻 @oraimoitel: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊

[drips-wave]

This issue has been completed by @oraimoitel as part of the Stellar Wave Program's 8th Wave 🥳

😎 @oraimoitel: You earned 200 Points for completing this issue! After the current Wave ends, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here. You can also Leave a review to share your experience working on this issue.

🧑‍💻 Repo maintainers: How'd the contributor do? Leave a review to share your experience working with them.