fix(canvas/PricingTable): fix bare aria-hidden attribute on feature checkmarks
Some checks failed
Block internal-flavored paths / Block forbidden paths (pull_request) Successful in 16s
CI / Detect changes (pull_request) Successful in 41s
E2E API Smoke Test / detect-changes (pull_request) Successful in 41s
Harness Replays / detect-changes (pull_request) Successful in 19s
E2E Staging Canvas (Playwright) / detect-changes (pull_request) Successful in 38s
Handlers Postgres Integration / detect-changes (pull_request) Successful in 43s
Secret scan / Scan diff for credential-shaped strings (pull_request) Successful in 21s
qa-review / approved (pull_request) Failing after 18s
gate-check-v3 / gate-check (pull_request) Successful in 34s
security-review / approved (pull_request) Failing after 15s
Runtime PR-Built Compatibility / detect-changes (pull_request) Successful in 52s
sop-checklist / all-items-acked (pull_request) [info tier:low] acked: 0/7 — missing: comprehensive-testing, local-postgres-e2e, staging-smoke, +4 — body-unfilled: comprehensive-testing, l
sop-checklist-gate / gate (pull_request) Successful in 17s
sop-tier-check / tier-check (pull_request) Successful in 17s
lint-required-no-paths / lint-required-no-paths (pull_request) Successful in 1m17s
CI / Platform (Go) (pull_request) Successful in 9s
CI / Shellcheck (E2E scripts) (pull_request) Successful in 7s
CI / Python Lint & Test (pull_request) Successful in 10s
E2E API Smoke Test / E2E API Smoke Test (pull_request) Successful in 6s
Harness Replays / Harness Replays (pull_request) Successful in 6s
Handlers Postgres Integration / Handlers Postgres Integration (pull_request) Successful in 6s
Runtime PR-Built Compatibility / PR-built wheel + import smoke (pull_request) Successful in 6s
CI / Canvas (Next.js) (pull_request) Successful in 11m12s
CI / Canvas Deploy Reminder (pull_request) Has been skipped
CI / all-required (pull_request) Successful in 2s
audit-force-merge / audit (pull_request) Has been skipped
E2E Staging Canvas (Playwright) / Canvas tabs E2E (pull_request) Successful in 12m58s

Bare `aria-hidden` (without ="true") is unreliable across browsers —
some treat it as falsy and expose the element to assistive tech.
Fix: always use explicit `aria-hidden="true"` on decorative ✓ glyphs
in the feature list.

Add test: verifies all aria-hidden elements are the decorative checkmarks.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Molecule AI · core-uiux 2026-05-13 13:41:09 +00:00
parent f08ddedafd
commit 11e2fd72f7
2 changed files with 12 additions and 1 deletions

View File

@ -117,7 +117,7 @@ function PlanCard({
<ul className="mt-6 flex-1 space-y-2 text-sm text-ink-mid">
{plan.features.map((f) => (
<li key={f} className="flex items-start">
<span className="mr-2 text-accent" aria-hidden>
<span className="mr-2 text-accent" aria-hidden="true">
</span>
{f}

View File

@ -145,6 +145,17 @@ describe("PricingTable", () => {
expect(mockedStartCheckout).not.toHaveBeenCalled();
});
it("marks feature checkmarks as aria-hidden (decorative, not exposed to screen readers)", () => {
render(<PricingTable />);
const checks = document.body.querySelectorAll('[aria-hidden="true"]');
// Every feature list has a ✓ glyph; all should be aria-hidden.
expect(checks.length).toBeGreaterThan(0);
// The checkmark spans use text-accent (decorative SVG-like glyphs).
checks.forEach((el) => {
expect(el.textContent?.trim()).toBe("✓");
});
});
it("disables the button while a checkout call is in flight", async () => {
mockedFetchSession.mockResolvedValue({
user_id: "u1",