Skip to content
This repository was archived by the owner on May 25, 2026. It is now read-only.

fix(a11y): touch targets, dark color-scheme, focus rings - #76

Merged
ivorycrayon merged 1 commit into
mainfrom
ui-audit-2026-05-24
May 24, 2026
Merged

fix(a11y): touch targets, dark color-scheme, focus rings#76
ivorycrayon merged 1 commit into
mainfrom
ui-audit-2026-05-24

Conversation

@ivorycrayon

@ivorycrayon ivorycrayon commented May 24, 2026

Copy link
Copy Markdown
Contributor

What

Five files, +22/-7. Tailwind class adjustments and a Next 15 viewport export. No behaviour change.

  • PlaylistRow.tsx: picker shuffle button min-h-[44px] (was 32px on mobile), px-2px-3. Desktop sm: tier untouched.
  • layout.tsx: footer links inline-block py-1.5 for ~2x hit area; logged-out callout py-0.5 + decoration-2 underline-offset-2.
  • globals.css: html { color-scheme: dark } so scrollbars and autofill chrome pick up dark UA styling.
  • Next 15 viewport export: themeColor: "#09090b" so mobile browser chrome blends on first paint.
  • Explicit focus-visible:outline-2 outline-offset-2 outline-brand on all primary CTAs and footer links.

Why

2026-05-24 mobile audit found three clusters: touch targets below 44px (Apple HIG / Material minimum), native chrome rendering in light mode despite dark canvas, and unstyled browser focus rings. All three are structural gaps — not visual polish.

@ivorycrayon
ivorycrayon force-pushed the ui-audit-2026-05-24 branch from 35eefe1 to bb74c30 Compare May 24, 2026 23:06
@ivorycrayon ivorycrayon changed the title fix(a11y): 44px touch targets, dark color-scheme, focus-visible rings fix(a11y): touch targets, dark color-scheme, focus rings May 24, 2026
@ivorycrayon
ivorycrayon merged commit d6a5555 into main May 24, 2026
1 check passed
@ivorycrayon
ivorycrayon deleted the ui-audit-2026-05-24 branch May 24, 2026 23:10
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant