From 11e2fd72f7824ec5d901075d138aeecdec435a8e Mon Sep 17 00:00:00 2001
From: Molecule AI Core-UIUX <core-uiux@agents.moleculesai.app>
Date: Wed, 13 May 2026 13:41:09 +0000
Subject: [PATCH] fix(canvas/PricingTable): fix bare aria-hidden attribute on
 feature checkmarks
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 canvas/src/components/PricingTable.tsx                |  2 +-
 canvas/src/components/__tests__/PricingTable.test.tsx | 11 +++++++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/canvas/src/components/PricingTable.tsx b/canvas/src/components/PricingTable.tsx
index 5f3bc210..1e400a47 100644
--- a/canvas/src/components/PricingTable.tsx
+++ b/canvas/src/components/PricingTable.tsx
@@ -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}
diff --git a/canvas/src/components/__tests__/PricingTable.test.tsx b/canvas/src/components/__tests__/PricingTable.test.tsx
index 535daeb7..1d4c0914 100644
--- a/canvas/src/components/__tests__/PricingTable.test.tsx
+++ b/canvas/src/components/__tests__/PricingTable.test.tsx
@@ -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",