Skip to content

fix: accessibility, reduced motion, and anti-pattern cleanup#5

Open
Jing-yilin wants to merge 1 commit intomainfrom
polish/accessibility-and-cleanup
Open

fix: accessibility, reduced motion, and anti-pattern cleanup#5
Jing-yilin wants to merge 1 commit intomainfrom
polish/accessibility-and-cleanup

Conversation

@Jing-yilin
Copy link
Copy Markdown
Contributor

Summary

Polish pass addressing findings from a technical audit (score: 8/20 → estimated 14-15/20 after this PR).

P0 (Blocking) — Fixed

  • Global :focus-visible indicator — keyboard users can now see focus on every interactive element
  • Removed outline-none from all inputs; they now rely on the global focus-visible ring

P1 (Major) — Fixed

  • prefers-reduced-motion support — all CSS animations wrapped in @media (prefers-reduced-motion: no-preference)
  • GlowMesh reduced-motion fallback — renders a static radial gradient instead of the canvas animation (uses useSyncExternalStore to avoid lint issues)
  • ARIA labels/roles — added to all loading spinners (role="status"), decorative SVGs (aria-hidden), icon-only buttons (aria-label), error containers (role="alert"), and timer display (role="timer")
  • Semantic landmarks<nav aria-label="Main navigation"> in header, <nav aria-label="Footer links"> in footer

P2 (Minor) — Fixed

  • Removed banned gradient text CSS — deleted .text-gradient and .text-gradient-blue classes (violated absolute ban on background-clip: text + gradient)
  • Stripped backdrop-blur-sm from 13/14 surfaces — kept only on onboarding modal overlay where it serves a functional purpose
  • Replaced animate-bounce with animate-pulse on skeleton loading dots
  • Restyled SkillPreview — was using light-mode CSS vars + rounded-xl; now matches dark/sharp aesthetic

P3 (Polish) — Fixed

  • Focus trap on onboarding modal (role="dialog", aria-modal="true", Tab cycling)
  • Semantic footer — homepage footer links wrapped in <nav> with aria-label
  • Fixed unescaped entityYou'reYou&apos;re in onboarding modal

Verification

  • 99/99 tests pass
  • 0 TypeScript errors
  • Lint count: 38 → 37 (fixed unescaped entity; all remaining errors are pre-existing)

Files changed (15)

globals.css, glow-mesh.tsx, site-header.tsx, onboarding-modal.tsx, config-panel.tsx, provider-config.tsx, launch-progress.tsx, session-control.tsx, sandbox-skeleton.tsx, skill-preview.tsx, skill-tree.tsx, page.tsx (home), [...skillPath]/page.tsx, dashboard/page.tsx, settings/page.tsx

- Add global :focus-visible indicator (P0: keyboard users can now see focus)
- Remove outline-none from all inputs (rely on global focus-visible)
- Wrap all CSS animations in prefers-reduced-motion: no-preference
- GlowMesh renders static gradient fallback for reduced-motion users
- Add ARIA labels/roles to spinners, decorative SVGs, icon buttons
- Add focus trap + role=dialog to onboarding modal
- Add semantic <nav> and <footer> landmarks
- Remove banned gradient text CSS classes (.text-gradient, .text-gradient-blue)
- Remove backdrop-blur-sm from 13/14 surfaces (kept only on modal overlay)
- Replace animate-bounce with animate-pulse on skeleton dots
- Restyle SkillPreview to match dark/sharp aesthetic (was using light-mode vars)
- Fix unescaped entity in onboarding modal

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
@vercel
Copy link
Copy Markdown

vercel Bot commented Apr 20, 2026

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

Project Deployment Actions Updated (UTC)
tryskills.sh Ready Ready Preview, Comment Apr 20, 2026 10:48am

Request Review

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.

1 participant