Comprehensive Web Interface Guidelines audit: accessibility, motion, and typography

- Add global MotionConfig reducedMotion="user" in root layout
- Add color-scheme: dark, theme-color meta, skip-to-main-content link
- Add aria-hidden={true} to ~60+ decorative icons across 33 files
- Add aria-label to all icon-only buttons (logout, star rating, play, delete, etc.)
- Replace transition-all with specific properties (11 files)
- Add motion-safe: prefix for CSS hover transforms and animate-pulse
- Add prefers-reduced-motion: reduce override in globals.css
- Add useReducedMotion guard to status-dot pulsing animation
- Fix focus-visible styles on auth form inputs (focus → focus-visible, stronger ring)
- Add text-balance to all headings (13 files)
- Replace "..." with "…" (U+2026) in all loading/placeholder text
- Add autocomplete, spellCheck, role="alert" to auth form
- Add aria-label to Switch controls and filmography select
- Fix heading hierarchy (h3 → h2 where h2 was skipped)
- Add break-words to title overview, overscroll-contain to drawer
- Add confirmation dialog for destructive library removal
- Add group-focus-within:opacity-100 for keyboard-accessible backup actions
- Add role="radio" + aria-checked to star rating buttons
- Add aria-label to carousel region, role="img" to TMDB logo SVG
- Add text-foreground to native select for dark mode consistency

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app/(pages)/dashboard/_components/continue-watching-card.tsx

@@ -44,18 +44,21 @@ export function ContinueWatchingCard({
             alt={item.nextEpisode?.name ?? item.title.title}
             width={500}
             height={281}
-            className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
+            className="h-full w-full object-cover motion-safe:transition-transform motion-safe:duration-300 motion-safe:group-hover:scale-105"
           />
         ) : (
           <div className="flex h-full items-center justify-center bg-gradient-to-br from-card via-secondary to-muted">
-            <IconPlayerPlay className="size-8 text-muted-foreground/30" />
+            <IconPlayerPlay
+              aria-hidden={true}
+              className="size-8 text-muted-foreground/30"
+            />
           </div>
         )}
         <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />
         {item.nextEpisode && (
           <div className="absolute bottom-2.5 left-3 right-3">
             <p className="flex items-center gap-1.5 text-[10px] font-medium uppercase tracking-wider text-primary">
-              <span className="inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-primary" />
+              <span className="inline-block h-1.5 w-1.5 motion-safe:animate-pulse rounded-full bg-primary" />
               Up next
             </p>
             <p className="mt-0.5 truncate text-sm font-medium text-white">
@@ -76,13 +79,13 @@ export function ContinueWatchingCard({
           </p>
         </div>
         <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary transition-colors group-hover:bg-primary group-hover:text-primary-foreground">
-          <IconPlayerPlay className="size-3.5" />
+          <IconPlayerPlay aria-hidden={true} className="size-3.5" />
         </div>
       </div>
       {progress > 0 && (
         <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-muted">
           <div
-            className="h-full bg-primary transition-all"
+            className="h-full bg-primary transition-[width]"
             style={{ width: `${progress}%` }}
           />
         </div>

app/(pages)/dashboard/_components/feed-section.tsx

@@ -14,8 +14,10 @@ export function FeedSection({
   return (
     <section className="space-y-4">
       <div className="flex items-center gap-2">
-        {icon}
-        <h2 className="font-display text-xl tracking-tight">{title}</h2>
+        <span aria-hidden={true}>{icon}</span>
+        <h2 className="font-display text-xl tracking-tight text-balance">
+          {title}
+        </h2>
       </div>
       {children}
     </section>

app/(pages)/dashboard/_components/stats-display.tsx

@@ -67,7 +67,7 @@ function StatCard({
         <div
           className={`flex h-6 w-6 items-center justify-center rounded-md ${bgColor}`}
         >
-          <Icon className={`size-[13px] ${color}`} />
+          <Icon aria-hidden={true} className={`size-[13px] ${color}`} />
         </div>
         <span className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
           {label}
@@ -75,7 +75,7 @@ function StatCard({
       </div>
       <p
         suppressHydrationWarning
-        className={`relative z-10 mt-2 font-display text-2xl tabular-nums tracking-tight ${color} transition-opacity duration-300`}
+        className={`relative z-10 mt-2 font-display text-2xl tabular-nums tracking-tight ${color} motion-safe:transition-opacity motion-safe:duration-300`}
       >
         {value}
       </p>
@@ -98,7 +98,7 @@ function PeriodSelector({
       <DropdownMenu>
         <DropdownMenuTrigger className="inline-flex cursor-pointer items-center gap-0.5 border-b border-dotted border-muted-foreground/50 uppercase text-foreground/80 transition-colors hover:text-foreground">
           {periodLabels[period]}
-          <IconChevronDown className="size-2.5" />
+          <IconChevronDown aria-hidden={true} className="size-2.5" />
         </DropdownMenuTrigger>
         <DropdownMenuContent align="start">
           <DropdownMenuRadioGroup

app/(pages)/dashboard/_components/stats-section.tsx

@@ -18,7 +18,7 @@ export async function StatsSection({ userId }: { userId: string }) {
       {isEmpty && (
         <div className="flex flex-col items-center gap-4 rounded-xl border border-dashed border-border/50 py-16 text-center">
           <div className="rounded-full bg-primary/10 p-4">
-            <IconDeviceTv className="size-8 text-primary" />
+            <IconDeviceTv aria-hidden={true} className="size-8 text-primary" />
           </div>
           <div className="space-y-1">
             <p className="font-medium">Your library is empty</p>
@@ -28,7 +28,7 @@ export async function StatsSection({ userId }: { userId: string }) {
           </div>
           <Link
             href="/explore"
-            className="inline-flex h-9 items-center rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground transition-all hover:shadow-md hover:shadow-primary/20"
+            className="inline-flex h-9 items-center rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground transition-shadow hover:shadow-md hover:shadow-primary/20"
           >
             Start exploring
           </Link>

app/(pages)/dashboard/_components/welcome-header.tsx

@@ -1,7 +1,7 @@
 export function WelcomeHeader({ name }: { name?: string | null }) {
   return (
     <div>
-      <h1 className="font-display text-3xl tracking-tight">
+      <h1 className="font-display text-3xl tracking-tight text-balance">
         Welcome back{name ? `, ${name}` : ""}
       </h1>
       <p className="mt-1 text-sm text-muted-foreground">