[codex] Fix audited accessibility issues on website and calculator

[MaxGhenis]

Summary

• only render the mobile navigation drawer while it is open so hidden controls drop out of the tab order
• replace the research filter wrapper/button pattern with a single labeled checkbox control
• darken the audited website CTA, filter badge, and calculator/report status treatments that were below AA contrast
• repair the calculator launch page heading hierarchy so feature cards no longer skip levels

Why

The accessibility audit found keyboard-focus leakage, unnamed checkbox semantics, contrast failures, and heading-level skips on the audited website and calculator surfaces.

Impact

Keyboard users no longer tab into hidden menu controls, filter checkboxes are announced with labels, and the audited CTA/status treatments use stronger contrast.

Validation

• bun run design-system:build
• bun run --filter=@policyengine/website typecheck
• bun run --filter=@policyengine/website lint
• bun run --filter=policyengine-app-v2 typecheck

Refs #951
Refs #952
Refs #953
Refs #954
Builds on #947

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
policyengine-app-v2	Ready	Preview, Comment	Apr 13, 2026 10:22am
policyengine-calculator	Ready	Preview, Comment	Apr 13, 2026 10:22am
policyengine-website	Ready	Preview, Comment	Apr 13, 2026 10:22am

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
policyengine-calculator-next	Skipped		Apr 13, 2026 10:22am

[policyengine]

This PR successfully addresses all four accessibility issues from the audit:

1. Mobile navigation keyboard trap fix (Header.tsx)
The mobile menu now only renders when open, preventing keyboard users from tabbing into hidden controls. The conditional rendering with {mobileOpen && <MobileMenu ... />} is the right approach. ARIA attributes are correctly set on the toggle button.

2. Research filter checkbox semantics (ResearchClient.tsx)
Excellent fix replacing the wrapper div pattern with proper label/checkbox structure. The checkboxes now have accessible labels via aria-labelledby, and the entire row is a clickable label element - exactly what screen readers need.

3. Contrast improvements
All the color changes move elements to stronger contrast ratios:

• Filter badges: primary[500] → primary[600]
• Action button (secondary variant): primary[500] → primary[600]
• Various status text: gray[400] → gray[500] or gray[600]
• Ready status icon: primary[500] → primary[600]

These changes meet AA contrast requirements while maintaining the visual hierarchy.

4. Heading hierarchy fix (CalculatorLaunchPage.tsx)
The feature cards now use h2 (order={2}) and the section headings use h3 (order={3}), fixing the heading level skip. This creates the proper document outline without visual changes.

The implementation is clean, focused, and follows accessibility best practices. No bugs or edge cases spotted.