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 from
May 24, 2026
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,14 @@
--color-foreground: #e3e3e3;
}

html {
/* Opt the page into dark-mode UA styling so native form controls,
scrollbars, autofill highlights, and the iOS Safari status-bar tint
pick up dark theming. bg-zinc-950 on <html> only paints the canvas
— UA chrome reads color-scheme. */
color-scheme: dark;
}

body {
/* No background here — the page canvas colour is bg-zinc-950 on
<html> (layout.tsx) and the fixed Background component paints over
Expand Down
13 changes: 10 additions & 3 deletions src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type { Metadata } from "next";
import type { Metadata, Viewport } from "next";
import { Geist } from "next/font/google";
import "./globals.css";
import Background from "@/components/Background";
Expand All @@ -10,6 +10,13 @@ const geistSans = Geist({
subsets: ["latin"],
});

// Next 15 moved themeColor out of metadata into a dedicated viewport export.
// Matches bg-zinc-950 (#09090b) so mobile browser chrome (iOS Safari address
// bar, Android Chrome notification bar) blends into the page background.
export const viewport: Viewport = {
themeColor: "#09090b",
};

// Public URL is hardcoded because the app is reverse-proxied at a fixed
// path (swagcounty.com/shuffleify) and basePath alone doesn't give the
// OpenGraph crawler an absolute URL. If shuffleify ever moves to its own
Expand Down Expand Up @@ -67,7 +74,7 @@ export default function RootLayout({
href="https://github.com/LLMATIONS/shuffleify"
target="_blank"
rel="noreferrer noopener"
className="text-zinc-400 underline transition-colors hover:text-zinc-200"
className="inline-block py-1.5 text-zinc-400 underline transition-colors hover:text-zinc-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
>
GitHub
</a>
Expand All @@ -76,7 +83,7 @@ export default function RootLayout({
Bug reports, kind words, weird ideas →{" "}
<a
href="mailto:nerds@swagcounty.com"
className="font-semibold text-zinc-300 underline transition-colors hover:text-foreground"
className="inline-block py-1.5 font-semibold text-zinc-300 underline transition-colors hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
>
nerds@swagcounty.com
</a>
Expand Down
4 changes: 2 additions & 2 deletions src/app/logged-out/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export default function LoggedOut() {
href="https://www.spotify.com/account/apps/"
target="_blank"
rel="noreferrer noopener"
className="underline transition-colors hover:text-brand-hover"
className="inline-block py-0.5 underline decoration-2 underline-offset-2 transition-colors hover:text-brand-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
>
authorized apps list
</a>{" "}
Expand All @@ -46,7 +46,7 @@ export default function LoggedOut() {
body={
<ScratchCta
href={LOGIN_HREF}
className="rounded-full bg-brand px-8 py-3 text-base font-semibold text-black transition-colors hover:bg-brand-hover"
className="rounded-full bg-brand px-8 py-3 text-base font-semibold text-black transition-colors hover:bg-brand-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
>
Log in again
</ScratchCta>
Expand Down
2 changes: 1 addition & 1 deletion src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
"error-rate-limit": "rate-limit",
"error-generic": "generic",
};
const kind = errorMap[demo];

Check warning on line 41 in src/app/page.tsx

View workflow job for this annotation

GitHub Actions / test 

Variable Assigned to Object Injection Sink
if (kind !== undefined) {
return <Picker forcedError={kind} />;
}
Expand Down Expand Up @@ -70,7 +70,7 @@
<>
<ScratchCta
href={LOGIN_HREF}
className="rounded-full bg-brand px-8 py-3 text-base font-semibold text-black transition-colors hover:bg-brand-hover"
className="rounded-full bg-brand px-8 py-3 text-base font-semibold text-black transition-colors hover:bg-brand-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
>
Log in with Spotify
</ScratchCta>
Expand Down
2 changes: 1 addition & 1 deletion src/components/picker/PlaylistRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ export function PlaylistRow({
type="button"
onClick={onShuffle}
disabled={locked}
className={`${CTA_CLASS} shrink-0 px-2 py-2 text-xs disabled:cursor-not-allowed disabled:opacity-50 sm:min-w-[9.5rem] sm:px-4 sm:text-sm`}
className={`${CTA_CLASS} shrink-0 min-h-[44px] px-3 py-2 text-xs disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand sm:min-w-[9.5rem] sm:px-4 sm:text-sm`}
>
{isShuffling ? "Shuffling…" : "Shuffle for real"}
</button>
Expand Down
Loading