fix: resolve all 48 WCAG 2.2 AA accessibility issues

Critical fixes:
- Add aria-label to all unlabeled inputs/selects in draft dialogs (ParticipantSelectionDialog, TimeBankAdjustmentDialog, AvailableParticipantsSection)
- Add role="dialog" + aria-modal + focus trap to ConnectionOverlay and AuthRecoveryOverlay
- Add aria-live region and connection status announcement to ConnectionOverlay

Serious fixes:
- Add skip-to-content link in root.tsx with id="main-content" on <main>
- Add aria-label to UserMenu trigger button
- Add aria-describedby + role="alert" to all auth form error messages (login, register, onboarding, forgot-password, reset-password)
- Replace emoji column headers in StandingsTable with aria-label + aria-hidden spans
- Add aria-live="assertive" to "It's your turn" desktop and mobile on-clock indicators
- Add aria-live="polite" to draft room countdown timer
- Add pause button to SportTicker (WCAG 2.2.2); add aria-hidden to ticker content
- Fix Footer text contrast (changed from 28% to text-muted-foreground)
- Fix OvernightPauseSettings: add htmlFor/id pairs and role="radiogroup"+aria-checked to mode buttons
- Fix DraftSetupSection: replace broken htmlFor with aria-label on date picker button
- Add aria-label to PeopleSection owner and commissioner selects
- Add labels to ScoringPresetPicker score inputs; add role="radiogroup"+aria-checked to preset buttons
- Add role="radiogroup"+aria-checked to AutodraftSettings option buttons
- Add accessible names, aria-current="step", and <ol> list semantics to WizardStepper

Moderate fixes:
- Add aria-controls to RecentPicksFeed toggle button; wrap picks list in aria-live region
- Add role="tab"+aria-selected+aria-controls to mobile board sub-tabs + role="tabpanel"
- Add role="radiogroup"+aria-checked to TimerModeSelector
- Add aria-current="page" + aria-label to SettingsDesktopNav
- Add aria-label="Admin navigation" to admin sidebar nav
- Add scope="col" + <caption> to StandingsTable and ScoringTables
- Add ARIA table roles (role="table/rowgroup/row/columnheader/rowheader/cell") to DraftSummaryView CSS grid

Minor fixes:
- Add aria-hidden="true" to decorative trend icons in StandingsTable
- Add aria-hidden="true" to desktop column header labels row in AvailableParticipantsSection
- Replace title with aria-label on all icon-only buttons (watchlist, queue) in AvailableParticipantsSection
- Add aria-label to NotificationSettings switchOnly Switch
- Add prefers-reduced-motion check to SlotMachineHeadline JS animation
- Bump --muted-foreground from 55% to 62% opacity for improved contrast margin

https://claude.ai/code/session_01JXajpFxhqLf8aPCncP81k3

app/app.css

@@ -69,7 +69,7 @@ html {
   --secondary: #1c1f26;
   --secondary-foreground: #ffffff;
   --muted: #1c1f26;
-  --muted-foreground: rgb(255 255 255 / 55%);
+  --muted-foreground: rgb(255 255 255 / 62%);
   --accent: #2ce1c1;
   --accent-foreground: #14171e;
   --destructive: oklch(0.65 0.22 25);

app/components/AutodraftSettings.tsx

@@ -201,7 +201,7 @@ function AutodraftOptions({
   const isDisabled = isMyTurn;
 
   return (
-    <div className="flex flex-col rounded-lg border overflow-hidden">
+    <div role="radiogroup" aria-label="Autodraft setting" className="flex flex-col rounded-lg border overflow-hidden">
       {OPTION_ORDER.map((state) => {
         const { label } = OPTIONS[state];
         const isActive = localState === state;
@@ -209,6 +209,8 @@ function AutodraftOptions({
           <button
             key={state}
             type="button"
+            role="radio"
+            aria-checked={isActive}
             disabled={isDisabled}
             onClick={() => handleStateChange(state)}
             className={`w-full py-2.5 px-3 text-left transition-colors border-b last:border-b-0 flex items-center justify-between gap-2 ${getButtonClassName(state, isActive)} ${
@@ -217,7 +219,7 @@ function AutodraftOptions({
           >
             <span className="text-xs font-medium">{label}</span>
             {isActive && (
-              <Check className={`h-3.5 w-3.5 shrink-0 ${getCheckClassName(state)}`} />
+              <Check className={`h-3.5 w-3.5 shrink-0 ${getCheckClassName(state)}`} aria-hidden="true" />
             )}
           </button>
         );
@@ -417,7 +419,7 @@ export function AutodraftSettings({
         </Popover>
       </div>
 
-      <div className="flex flex-col rounded-lg border overflow-hidden">
+      <div role="radiogroup" aria-label="Autodraft setting" className="flex flex-col rounded-lg border overflow-hidden">
         {OPTION_ORDER.map((state) => {
           const { label } = OPTIONS[state];
           const isActive = localState === state;
@@ -425,6 +427,8 @@ export function AutodraftSettings({
             <button
               key={state}
               type="button"
+              role="radio"
+              aria-checked={isActive}
               disabled={isDisabled}
               onClick={() => handleStateChange(state)}
               className={`w-full py-2.5 px-3 text-left transition-colors border-b last:border-b-0 flex items-center justify-between gap-2 ${getButtonClassName(state, isActive)} ${
@@ -433,7 +437,7 @@ export function AutodraftSettings({
             >
               <span className="text-xs font-medium">{label}</span>
               {isActive && (
-                <Check className={`h-3.5 w-3.5 shrink-0 ${getCheckClassName(state)}`} />
+                <Check className={`h-3.5 w-3.5 shrink-0 ${getCheckClassName(state)}`} aria-hidden="true" />
               )}
             </button>
           );

app/components/NotificationSettings.tsx

@@ -28,6 +28,7 @@ export function NotificationSettings({
     return (
       <>
         <Switch
+          aria-label="Enable notifications"
           checked={enabled}
           onCheckedChange={onEnabledChange}
           disabled={permissionState === "denied"}

app/components/StandingsTable.tsx

@@ -79,21 +79,21 @@ export function StandingsTable({
     if (change > 0) {
       return (
         <div className="flex items-center gap-1 text-emerald-400">
-          <TrendingUp className="h-3 w-3" />
+          <TrendingUp className="h-3 w-3" aria-hidden="true" />
           <span className="text-xs">+{change}</span>
         </div>
       );
     } else if (change < 0) {
       return (
         <div className="flex items-center gap-1 text-coral-accent">
-          <TrendingDown className="h-3 w-3" />
+          <TrendingDown className="h-3 w-3" aria-hidden="true" />
           <span className="text-xs">{change}</span>
         </div>
       );
     } else {
       return (
         <div className="flex items-center gap-1 text-muted-foreground">
-          <Minus className="h-3 w-3" />
+          <Minus className="h-3 w-3" aria-hidden="true" />
           <span className="text-xs">-</span>
         </div>
       );
@@ -101,26 +101,26 @@ export function StandingsTable({
   };
 
   return (
-    <Table>
+    <Table aria-label="Standings">
       <TableHeader>
         <TableRow>
-          <TableHead className="w-16">Rank</TableHead>
+          <TableHead scope="col" className="w-16">Rank</TableHead>
-          {showMovement && <TableHead className="w-20">Change</TableHead>}
+          {showMovement && <TableHead scope="col" className="w-20">Change</TableHead>}
-          <TableHead>Team</TableHead>
+          <TableHead scope="col">Team</TableHead>
-          <TableHead className="text-right">Total Points</TableHead>
+          <TableHead scope="col" className="text-right">Total Points</TableHead>
           {showPlacementBreakdown && (
             <>
-              <TableHead className="text-center w-12" title="1st place finishes">🥇</TableHead>
+              <TableHead scope="col" aria-label="1st place finishes" className="text-center w-12"><span aria-hidden="true">🥇</span></TableHead>
-              <TableHead className="text-center w-12" title="2nd place finishes">🥈</TableHead>
+              <TableHead scope="col" aria-label="2nd place finishes" className="text-center w-12"><span aria-hidden="true">🥈</span></TableHead>
-              <TableHead className="text-center w-12" title="3rd place finishes">🥉</TableHead>
+              <TableHead scope="col" aria-label="3rd place finishes" className="text-center w-12"><span aria-hidden="true">🥉</span></TableHead>
-              <TableHead className="text-center w-12" title="4th place finishes">4th</TableHead>
+              <TableHead scope="col" className="text-center w-12">4th</TableHead>
-              <TableHead className="text-center w-12" title="5th place finishes">5th</TableHead>
+              <TableHead scope="col" className="text-center w-12">5th</TableHead>
-              <TableHead className="text-center w-12" title="6th place finishes">6th</TableHead>
+              <TableHead scope="col" className="text-center w-12">6th</TableHead>
-              <TableHead className="text-center w-12" title="7th place finishes">7th</TableHead>
+              <TableHead scope="col" className="text-center w-12">7th</TableHead>
-              <TableHead className="text-center w-12" title="8th place finishes">8th</TableHead>
+              <TableHead scope="col" className="text-center w-12">8th</TableHead>
             </>
           )}
-          <TableHead className="text-right">Remaining</TableHead>
+          <TableHead scope="col" className="text-right">Remaining</TableHead>
         </TableRow>
       </TableHeader>
       <TableBody>

app/components/UserMenu.tsx

@@ -32,7 +32,7 @@ export function UserMenu({
   return (
     <Popover>
       <PopoverTrigger asChild>
-        <Button variant="ghost" className="relative h-9 w-9 p-0 rounded-none">
+        <Button variant="ghost" aria-label={`User menu for ${name ?? email}`} className="relative h-9 w-9 p-0 rounded-none">
           <UserAvatar
             userId={userId}
             name={name}

app/components/draft/AuthRecoveryOverlay.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useRef } from "react";
 import { Button } from "~/components/ui/button";
 import { Card } from "~/components/ui/card";
 
@@ -8,12 +9,47 @@ interface AuthRecoveryOverlayProps {
 export function AuthRecoveryOverlay({
   isAuthDegraded,
 }: AuthRecoveryOverlayProps) {
+  const dialogRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!isAuthDegraded) return;
+    const el = dialogRef.current;
+    if (!el) return;
+    const focusable = el.querySelector<HTMLElement>(
+      'button:not([disabled]), [href], input:not([disabled]), [tabindex]:not([tabindex="-1"])'
+    );
+    focusable?.focus();
+
+    function trapFocus(e: KeyboardEvent) {
+      if (e.key !== "Tab") return;
+      const focusables = el?.querySelectorAll<HTMLElement>(
+        'button:not([disabled]), [href], input:not([disabled]), [tabindex]:not([tabindex="-1"])'
+      );
+      if (!focusables || focusables.length === 0) return;
+      const first = focusables[0];
+      const last = focusables[focusables.length - 1];
+      if (e.shiftKey) {
+        if (document.activeElement === first) { e.preventDefault(); last.focus(); }
+      } else {
+        if (document.activeElement === last) { e.preventDefault(); first.focus(); }
+      }
+    }
+    document.addEventListener("keydown", trapFocus);
+    return () => document.removeEventListener("keydown", trapFocus);
+  }, [isAuthDegraded]);
+
   if (!isAuthDegraded) {
     return null;
   }
 
   return (
-    <div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-[100]">
+    <div
+      ref={dialogRef}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="auth-recovery-title"
+      className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-[100]"
+    >
       <Card className="w-full max-w-md mx-4 p-8 text-center">
         <div className="flex flex-col items-center gap-6">
           <div className="w-16 h-16 rounded-full bg-destructive/15 flex items-center justify-center">
@@ -34,7 +70,7 @@ export function AuthRecoveryOverlay({
           </div>
 
           <div>
-            <h2 className="text-2xl font-bold mb-2">Session Expired</h2>
+            <h2 id="auth-recovery-title" className="text-2xl font-bold mb-2">Session Expired</h2>
             <p className="text-muted-foreground">
               Your session has expired. Reload the page to reconnect to the
               draft.

app/components/draft/AvailableParticipantsSection.tsx

@@ -339,7 +339,9 @@ export const AvailableParticipantsSection = memo(function AvailableParticipantsS
       <div className="px-4 pt-4 pb-2 flex-shrink-0">
         <div className="flex flex-col gap-2 md:flex-row md:flex-wrap md:items-center">
           <div className="flex gap-2 md:contents">
+            <label htmlFor="available-participants-search" className="sr-only">Search participants</label>
             <input
+              id="available-participants-search"
               type="text"
               placeholder="Search participants..."
               value={searchQuery}
@@ -472,10 +474,10 @@ export const AvailableParticipantsSection = memo(function AvailableParticipantsS
         </div>
       </div>
 
-      <div className={`hidden md:grid ${desktopGridClass} bg-muted border-b text-sm font-semibold flex-shrink-0 px-4`}>
+      <div role="row" aria-hidden="true" className={`hidden md:grid ${desktopGridClass} bg-muted border-b text-sm font-semibold flex-shrink-0 px-4`}>
-        <span className="text-center p-3 px-0">OVR</span>
+        <span role="columnheader" aria-label="Overall rank" className="text-center p-3 px-0">OVR</span>
-        <span className="text-center p-3 px-0">SPR</span>
+        <span role="columnheader" aria-label="Sport rank" className="text-center p-3 px-0">SPR</span>
-        <span className="text-left p-3">Participant</span>
+        <span role="columnheader" className="text-left p-3">Participant</span>
       </div>
 
       <div ref={parentRef} className="flex-1 overflow-y-auto">
@@ -601,11 +603,11 @@ export const AvailableParticipantsSection = memo(function AvailableParticipantsS
                             size="sm"
                             className="min-h-[44px] min-w-[44px]"
                             onClick={() => onToggleWatchlist(participant.id)}
-                            title={isWatched ? "Remove from watchlist" : "Add to watchlist"}
+                            aria-label={isWatched ? "Remove from watchlist" : "Add to watchlist"}
                           >
                             {isWatched
-                              ? <EyeOff className="h-4 w-4 text-emerald-400" />
+                              ? <EyeOff className="h-4 w-4 text-emerald-400" aria-hidden="true" />
-                              : <Eye className="h-4 w-4" />}
+                              : <Eye className="h-4 w-4" aria-hidden="true" />}
                           </Button>
                           {!isInQueue ? (
                             <Button
@@ -613,10 +615,10 @@ export const AvailableParticipantsSection = memo(function AvailableParticipantsS
                               size="sm"
                               className="min-h-[44px] min-w-[44px]"
                               onClick={() => onAddToQueue(participant.id)}
-                              title={!isEligible ? ineligibleReason?.message : "Add to queue"}
+                              aria-label={!isEligible ? (ineligibleReason?.message ?? "Add to queue") : "Add to queue"}
                               disabled={!isEligible}
                             >
-                              <ListPlus className="h-4 w-4" />
+                              <ListPlus className="h-4 w-4" aria-hidden="true" />
                             </Button>
                           ) : (
                             <Button
@@ -627,9 +629,9 @@ export const AvailableParticipantsSection = memo(function AvailableParticipantsS
                                 const queueId = queueMap.get(participant.id);
                                 if (queueId) onRemoveFromQueue(queueId);
                               }}
-                              title="Remove from queue"
+                              aria-label="Remove from queue"
                             >
-                              <ListX className="h-4 w-4" />
+                              <ListX className="h-4 w-4" aria-hidden="true" />
                             </Button>
                           )}
                           <Button
@@ -638,12 +640,12 @@ export const AvailableParticipantsSection = memo(function AvailableParticipantsS
                             className="min-h-[44px]"
                             onClick={() => onMakePick(participant.id)}
                             disabled={!canPick || !isEligible}
-                            title={
+                            aria-label={
                               !canPick
-                                ? "Not your turn"
+                                ? "Draft (not your turn)"
                                 : !isEligible
-                                  ? ineligibleReason?.message
+                                  ? (ineligibleReason?.message ?? "Draft (ineligible)")
-                                  : undefined
+                                  : `Draft ${participant.name}`
                             }
                           >
                             Draft
@@ -720,25 +722,21 @@ export const AvailableParticipantsSection = memo(function AvailableParticipantsS
                                 variant="ghost"
                                 size="sm"
                                 onClick={() => onToggleWatchlist(participant.id)}
-                                title={isWatched ? "Remove from watchlist" : "Add to watchlist"}
+                                aria-label={isWatched ? "Remove from watchlist" : "Add to watchlist"}
                               >
                                 {isWatched
-                                  ? <EyeOff className="h-4 w-4 text-emerald-400" />
+                                  ? <EyeOff className="h-4 w-4 text-emerald-400" aria-hidden="true" />
-                                  : <Eye className="h-4 w-4" />}
+                                  : <Eye className="h-4 w-4" aria-hidden="true" />}
                               </Button>
                               {!isInQueue ? (
                                 <Button
                                   variant="ghost"
                                   size="sm"
                                   onClick={() => onAddToQueue(participant.id)}
-                                  title={
+                                  aria-label={!isEligible ? (ineligibleReason?.message ?? "Add to queue") : "Add to queue"}
-                                    !isEligible
-                                      ? ineligibleReason?.message
-                                      : "Add to queue"
-                                  }
                                   disabled={!isEligible}
                                 >
-                                  <ListPlus className="h-4 w-4" />
+                                  <ListPlus className="h-4 w-4" aria-hidden="true" />
                                 </Button>
                               ) : (
                                 <Button
@@ -748,9 +746,9 @@ export const AvailableParticipantsSection = memo(function AvailableParticipantsS
                                     const queueId = queueMap.get(participant.id);
                                     if (queueId) onRemoveFromQueue(queueId);
                                   }}
-                                  title="Remove from queue"
+                                  aria-label="Remove from queue"
                                 >
-                                  <ListX className="h-4 w-4" />
+                                  <ListX className="h-4 w-4" aria-hidden="true" />
                                 </Button>
                               )}
                               <Button
@@ -758,12 +756,12 @@ export const AvailableParticipantsSection = memo(function AvailableParticipantsS
                                 size="sm"
                                 onClick={() => onMakePick(participant.id)}
                                 disabled={!canPick || !isEligible}
-                                title={
+                                aria-label={
                                   !canPick
-                                    ? "Not your turn"
+                                    ? "Draft (not your turn)"
                                     : !isEligible
-                                      ? ineligibleReason?.message
+                                      ? (ineligibleReason?.message ?? "Draft (ineligible)")
-                                      : undefined
+                                      : `Draft ${participant.name}`
                                 }
                               >
                                 Draft

app/components/draft/ConnectionOverlay.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useRef } from "react";
 import { Button } from "~/components/ui/button";
 import { Card } from "~/components/ui/card";
 
@@ -14,12 +15,56 @@ export function ConnectionOverlay({
   connectionError,
   isSyncing,
 }: ConnectionOverlayProps) {
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const titleId = "connection-overlay-title";
+
+  useEffect(() => {
+    if (isConnected && !isSyncing) return;
+    const el = dialogRef.current;
+    if (!el) return;
+    const focusable = el.querySelector<HTMLElement>(
+      'button:not([disabled]), [href], input:not([disabled]), [tabindex]:not([tabindex="-1"])'
+    );
+    focusable?.focus();
+
+    function trapFocus(e: KeyboardEvent) {
+      if (e.key !== "Tab") return;
+      const focusables = el?.querySelectorAll<HTMLElement>(
+        'button:not([disabled]), [href], input:not([disabled]), [tabindex]:not([tabindex="-1"])'
+      );
+      if (!focusables || focusables.length === 0) return;
+      const first = focusables[0];
+      const last = focusables[focusables.length - 1];
+      if (e.shiftKey) {
+        if (document.activeElement === first) { e.preventDefault(); last.focus(); }
+      } else {
+        if (document.activeElement === last) { e.preventDefault(); first.focus(); }
+      }
+    }
+    document.addEventListener("keydown", trapFocus);
+    return () => document.removeEventListener("keydown", trapFocus);
+  }, [isConnected, isSyncing]);
+
   if (isConnected && !isSyncing) {
     return null;
   }
 
+  const statusMessage = connectionError
+    ? connectionError
+    : isSyncing
+    ? "Reconnected. Syncing the latest draft state..."
+    : isReconnecting
+    ? "Lost connection to the draft server. Attempting to reconnect..."
+    : "Please wait while we connect you to the live draft room.";
+
   return (
-    <div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-[100]">
+    <div
+      ref={dialogRef}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby={titleId}
+      className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-[100]"
+    >
       <Card className="w-full max-w-md mx-4 p-8 text-center">
         <div className="flex flex-col items-center gap-6">
           {/* Spinner or Error Icon */}
@@ -49,7 +94,7 @@ export function ConnectionOverlay({
 
           {/* Title */}
           <div>
-            <h2 className="text-2xl font-bold mb-2">
+            <h2 id={titleId} className="text-2xl font-bold mb-2">
               {connectionError
                 ? "Connection Error"
                 : isSyncing
@@ -59,17 +104,7 @@ export function ConnectionOverlay({
                 : "Connecting to Draft"}
             </h2>
 
-            <p className="text-muted-foreground">
+            <p className="text-muted-foreground">{statusMessage}</p>
-              {connectionError ? (
-                connectionError
-              ) : isSyncing ? (
-                "Reconnected. Syncing the latest draft state..."
-              ) : isReconnecting ? (
-                "Lost connection to the draft server. Attempting to reconnect..."
-              ) : (
-                "Please wait while we connect you to the live draft room."
-              )}
-            </p>
           </div>
 
           {/* Action Button (only on persistent error) */}
@@ -85,16 +120,19 @@ export function ConnectionOverlay({
 
           {/* Loading Dots */}
           {!connectionError && (
-            <div className="flex gap-1.5">
+            <div aria-live="polite" aria-label={statusMessage} className="flex gap-1.5">
               <div
+                aria-hidden="true"
                 className="w-2 h-2 bg-primary rounded-full animate-bounce"
                 style={{ animationDelay: "0ms" }}
                />
               <div
+                aria-hidden="true"
                 className="w-2 h-2 bg-primary rounded-full animate-bounce"
                 style={{ animationDelay: "150ms" }}
                />
               <div
+                aria-hidden="true"
                 className="w-2 h-2 bg-primary rounded-full animate-bounce"
                 style={{ animationDelay: "300ms" }}
                />

app/components/draft/DraftSummaryView.tsx

@@ -73,13 +73,15 @@ export const DraftSummaryView = memo(function DraftSummaryView({
 
   return (
     <div className="w-full h-full overflow-auto">
-      <div className="grid w-full" style={{ gridTemplateColumns: gridCols }}>
+      <div role="table" aria-label="Draft summary by sport and team" className="grid w-full" style={{ gridTemplateColumns: gridCols }}>
 
         {/* Header row */}
-        <div className="sticky top-0 left-0 z-30 bg-muted border-r border-b border-border px-3 py-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+        <div role="rowgroup">
+        <div role="row" className="contents">
+        <div role="columnheader" scope="col" className="sticky top-0 left-0 z-30 bg-muted border-r border-b border-border px-3 py-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
           Sport
         </div>
-        <div className="sticky top-0 z-20 bg-muted border-r border-b border-border px-2 py-2 text-center text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+        <div role="columnheader" scope="col" className="sticky top-0 z-20 bg-muted border-r border-b border-border px-2 py-2 text-center text-xs font-semibold uppercase tracking-wider text-muted-foreground">
           Total
         </div>
         {draftSlots.map((slot, index) => {
@@ -89,6 +91,8 @@ export const DraftSummaryView = memo(function DraftSummaryView({
           const flexesExhausted = flexPicksAvailable > 0 && used >= flexPicksAvailable;
           return (
             <div
+              role="columnheader"
+              scope="col"
               key={slot.id}
               className={`sticky top-0 z-20 bg-muted/40 border-b border-border px-1 py-2 min-w-0 ${!isLast ? "border-r" : ""}`}
             >
@@ -113,18 +117,22 @@ export const DraftSummaryView = memo(function DraftSummaryView({
             </div>
           );
         })}
+        </div>{/* end header row */}
+        </div>{/* end rowgroup */}
 
         {/* Data rows */}
+        <div role="rowgroup">
         {sports.map((sport, sportIndex) => {
           const isLastRow = sportIndex === sports.length - 1;
           const { total: sportTotal, teams: sportTeamCount } =
             sportStats.get(sport.id) ?? { total: 0, teams: 0 };
           return (
             <Fragment key={sport.id}>
-              <div className={`sticky left-0 z-10 bg-muted border-r border-border px-3 py-2.5 font-medium text-sm whitespace-nowrap ${!isLastRow ? "border-b" : ""}`}>
+              <div role="row" className="contents">
+              <div role="rowheader" className={`sticky left-0 z-10 bg-muted border-r border-border px-3 py-2.5 font-medium text-sm whitespace-nowrap ${!isLastRow ? "border-b" : ""}`}>
                 {sport.name}
               </div>
-              <div className={`border-r border-border px-2 py-2.5 text-center bg-muted/20 ${!isLastRow ? "border-b" : ""}`}>
+              <div role="cell" className={`border-r border-border px-2 py-2.5 text-center bg-muted/20 ${!isLastRow ? "border-b" : ""}`}>
                 {sportTotal > 0 ? (
                   <>
                     <div className="text-sm font-bold tabular-nums">{sportTotal}</div>
@@ -140,6 +148,7 @@ export const DraftSummaryView = memo(function DraftSummaryView({
                 const isFlex = count >= 2;
                 return (
                   <div
+                    role="cell"
                     key={`${slot.team.id}-${sport.id}`}
                     className={`border-border px-3 py-2.5 text-center ${isFlex ? "bg-amber-500/10" : "bg-background"} ${!isLastRow ? "border-b" : ""} ${!isLast ? "border-r" : ""}`}
                   >
@@ -153,9 +162,11 @@ export const DraftSummaryView = memo(function DraftSummaryView({
                   </div>
                 );
               })}
+              </div>{/* end row */}
             </Fragment>
           );
         })}
+        </div>{/* end rowgroup */}
 
       </div>
     </div>

app/components/draft/ParticipantSelectionDialog.tsx

@@ -84,14 +84,19 @@ export function ParticipantSelectionDialog({
 
         <div className="px-6 pb-4">
           <div className="flex gap-2 mb-4">
+            <label htmlFor="participant-dialog-search" className="sr-only">Search participants</label>
             <input
+              id="participant-dialog-search"
               type="text"
               placeholder="Search participants..."
               className="flex-1 px-3 py-2 border rounded-md text-base md:text-sm bg-background text-foreground"
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
             />
+            <label htmlFor="participant-dialog-sport" className="sr-only">Filter by sport</label>
             <select
+              id="participant-dialog-sport"
+              aria-label="Filter by sport"
               className="px-3 py-2 border rounded-md text-base md:text-sm bg-background text-foreground"
               value={sportFilter}
               onChange={(e) => setSportFilter(e.target.value)}

app/components/draft/RecentPicksFeed.tsx

@@ -31,6 +31,7 @@ export const RecentPicksFeed = memo(function RecentPicksFeed({ picks }: { picks:
         className="flex items-center justify-between w-full mb-0.5 py-0.5"
         onClick={() => setIsExpanded((prev) => !prev)}
         aria-expanded={isExpanded}
+        aria-controls="recent-picks-list"
         aria-label="Toggle latest picks"
       >
         <p className="text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/60">Latest Picks</p>
@@ -39,7 +40,7 @@ export const RecentPicksFeed = memo(function RecentPicksFeed({ picks }: { picks:
         />
       </button>
       {isExpanded && (
-        <div className="flex flex-col gap-1 mt-0.5">
+        <div id="recent-picks-list" aria-live="polite" aria-label="Latest picks" className="flex flex-col gap-1 mt-0.5">
           {picks.length === 0 ? (
             <p className="text-xs text-muted-foreground py-1">No picks yet</p>
           ) : (

app/components/draft/TimeBankAdjustmentDialog.tsx

@@ -39,10 +39,11 @@ export function TimeBankAdjustmentDialog({
         </DialogHeader>
 
         <div className="flex flex-col gap-4 py-2">
-          <div className="flex gap-2">
+          <div role="group" aria-label="Adjustment direction" className="flex gap-2">
             <button
               type="button"
               onClick={() => onDirectionChange("add")}
+              aria-pressed={direction === "add"}
               className={`flex-1 py-2 rounded-md border text-sm font-medium transition-colors ${
                 direction === "add"
                   ? "bg-emerald-500/20 border-emerald-500 text-emerald-400"
@@ -54,6 +55,7 @@ export function TimeBankAdjustmentDialog({
             <button
               type="button"
               onClick={() => onDirectionChange("remove")}
+              aria-pressed={direction === "remove"}
               className={`flex-1 py-2 rounded-md border text-sm font-medium transition-colors ${
                 direction === "remove"
                   ? "bg-destructive/20 border-destructive text-destructive"
@@ -65,7 +67,9 @@ export function TimeBankAdjustmentDialog({
           </div>
 
           <div className="flex gap-2">
+            <label htmlFor="timebank-amount" className="sr-only">Amount</label>
             <input
+              id="timebank-amount"
               type="number"
               min="0.001"
               step="any"
@@ -74,7 +78,10 @@ export function TimeBankAdjustmentDialog({
               className="flex-1 px-3 py-2 border rounded-md bg-background text-foreground text-base md:text-sm"
               placeholder="Amount"
             />
+            <label htmlFor="timebank-unit" className="sr-only">Time unit</label>
             <select
+              id="timebank-unit"
+              aria-label="Time unit"
               value={unit}
               onChange={(e) => onUnitChange(e.target.value as "seconds" | "minutes" | "hours")}
               className="px-3 py-2 border rounded-md bg-background text-foreground text-base md:text-sm"

app/components/league/OvernightPauseSettings.tsx

@@ -44,13 +44,15 @@ export function OvernightPauseSettings({
     <div className="space-y-4">
       <Label>Overnight Pause</Label>
 
-      <div className="grid grid-cols-3 gap-2">
+      <div role="radiogroup" aria-label="Pause mode" className="grid grid-cols-3 gap-2">
         {PAUSE_MODES.map(({ value, icon: Icon, label, sub }) => {
           const selected = mode === value;
           return (
             <button
               key={value}
               type="button"
+              role="radio"
+              aria-checked={selected}
               disabled={disabled}
               onClick={() => onModeChange(value)}
               className={cn(
@@ -76,10 +78,11 @@ export function OvernightPauseSettings({
           <div className="grid grid-cols-2 gap-3">
             <div className="space-y-1">
               <div className="flex items-center gap-1.5">
-                <Moon className="h-3.5 w-3.5 text-indigo-400 shrink-0" />
+                <Moon className="h-3.5 w-3.5 text-indigo-400 shrink-0" aria-hidden="true" />
-                <Label className="text-xs">Draft pauses</Label>
+                <Label htmlFor="overnight-pause-start" className="text-xs">Draft pauses</Label>
               </div>
               <Input
+                id="overnight-pause-start"
                 type="time"
                 value={start}
                 disabled={disabled}
@@ -88,10 +91,11 @@ export function OvernightPauseSettings({
             </div>
             <div className="space-y-1">
               <div className="flex items-center gap-1.5">
-                <Sun className="h-3.5 w-3.5 text-yellow-400 shrink-0" />
+                <Sun className="h-3.5 w-3.5 text-yellow-400 shrink-0" aria-hidden="true" />
-                <Label className="text-xs">Draft resumes</Label>
+                <Label htmlFor="overnight-pause-end" className="text-xs">Draft resumes</Label>
               </div>
               <Input
+                id="overnight-pause-end"
                 type="time"
                 value={end}
                 disabled={disabled}

app/components/league/ScoringPresetPicker.tsx

@@ -56,11 +56,13 @@ export function ScoringPresetPicker({
   return (
     <div className="space-y-4">
       {/* Preset tabs */}
-      <div className="flex rounded-lg border border-border overflow-hidden">
+      <div role="radiogroup" aria-label="Scoring preset" className="flex rounded-lg border border-border overflow-hidden">
         {(["brackt", "omnifantasy", "custom"] as const).map((p) => (
           <button
             key={p}
             type="button"
+            role="radio"
+            aria-checked={preset === p}
             disabled={disabled}
             onClick={() => p !== "custom" ? applyPreset(p) : onPresetChange("custom")}
             className={cn(
@@ -90,7 +92,9 @@ export function ScoringPresetPicker({
                   style={{ width: `${barWidth}%` }}
                 />
               </div>
+              <label htmlFor={`scoring-${key}`} className="sr-only">Points for {label} place</label>
               <input
+                id={`scoring-${key}`}
                 type="number"
                 value={val}
                 disabled={disabled}

app/components/league/TimerModeSelector.tsx

@@ -25,13 +25,15 @@ const MODES = [
 
 export function TimerModeSelector({ value, onChange, disabled }: TimerModeSelectorProps) {
   return (
-    <div className="grid grid-cols-2 gap-3">
+    <div role="radiogroup" aria-label="Timer mode" className="grid grid-cols-2 gap-3">
       {MODES.map((mode) => {
         const selected = value === mode.value;
         return (
           <button
             key={mode.value}
             type="button"
+            role="radio"
+            aria-checked={selected}
             onClick={() => onChange(mode.value)}
             disabled={disabled}
             className={cn(

app/components/league/WizardStepper.tsx

@@ -10,8 +10,8 @@ export interface WizardStepperProps {
 
 export function WizardStepper({ currentStep, steps, onStepClick }: WizardStepperProps) {
   return (
-    <div className="mb-6">
+    <nav aria-label="Setup progress" className="mb-6">
-      <div className="flex items-center">
+      <ol className="flex items-center list-none p-0 m-0">
         {steps.map((label, i) => {
           const n = i + 1;
           const done = n < currentStep;
@@ -19,11 +19,14 @@ export function WizardStepper({ currentStep, steps, onStepClick }: WizardStepper
           return (
             <Fragment key={label}>
               {i > 0 && (
-                <div className={cn("flex-1 h-0.5 transition-colors", done ? "bg-primary" : "bg-border")} />
+                <li aria-hidden="true" className={cn("flex-1 h-0.5 transition-colors", done ? "bg-primary" : "bg-border")} />
               )}
+              <li>
                 <button
                   type="button"
                   onClick={() => done && onStepClick(n)}
+                  aria-label={`Step ${n}: ${label}${done ? " (completed)" : active ? " (current)" : ""}`}
+                  aria-current={active ? "step" : undefined}
                   className={cn(
                     "shrink-0 w-9 h-9 rounded-full border-2 flex items-center justify-center text-sm font-semibold bg-background transition-colors",
                     done && "bg-primary border-primary text-primary-foreground",
@@ -32,13 +35,14 @@ export function WizardStepper({ currentStep, steps, onStepClick }: WizardStepper
                     done ? "cursor-pointer" : "cursor-default"
                   )}
                 >
-                {done ? <Check className="h-4 w-4" /> : n}
+                  {done ? <Check className="h-4 w-4" aria-hidden="true" /> : <span aria-hidden="true">{n}</span>}
                 </button>
+              </li>
             </Fragment>
           );
         })}
-      </div>
+      </ol>
-      <div className="flex mt-1.5">
+      <div className="flex mt-1.5" aria-hidden="true">
         {steps.map((label, i) => {
           const n = i + 1;
           const done = n < currentStep;
@@ -58,6 +62,6 @@ export function WizardStepper({ currentStep, steps, onStepClick }: WizardStepper
           );
         })}
       </div>
-    </div>
+    </nav>
   );
 }

app/components/league/settings/DraftSetupSection.tsx

@@ -122,11 +122,12 @@ export function DraftSetupSection({
           </div>
 
           <div className="rounded-lg border p-5 sm:p-6">
-            <Label htmlFor="draftDate">Draft Date & Time</Label>
+            <Label>Draft Date & Time</Label>
             <div className="mt-5 grid gap-3 sm:grid-cols-2">
               <Popover>
                 <PopoverTrigger asChild>
                   <Button
+                    aria-label={draftDate ? `Draft date: ${format(draftDate, "PPP")}. Click to change.` : "Pick a draft date"}
                     variant="outline"
                     className={cn("justify-start text-left font-normal", !draftDate && "text-muted-foreground")}
                     disabled={!canEditDraftRounds}
@@ -145,7 +146,9 @@ export function DraftSetupSection({
                 </PopoverContent>
               </Popover>
               <Input
+                id="draftTime"
                 type="time"
+                aria-label="Draft time"
                 value={draftTime}
                 onChange={(e) => onDraftTimeChange(e.target.value)}
                 disabled={!canEditDraftRounds}

app/components/league/settings/PeopleSection.tsx

@@ -71,7 +71,7 @@ export function PeopleSection({
                   <Form method="post" className="flex flex-col gap-2 sm:flex-row">
                     <input type="hidden" name="intent" value="assign-team-owner" />
                     <input type="hidden" name="teamId" value={team.id} />
-                    <Select name="userId" required>
+                    <Select name="userId" required aria-label={`Assign owner for ${team.name}`}>
                       <SelectTrigger className="h-9 sm:w-[190px]">
                         <SelectValue placeholder="Select user" />
                       </SelectTrigger>
@@ -130,7 +130,7 @@ export function PeopleSection({
 
         <Form method="post" className="mt-4 flex flex-col gap-2 sm:flex-row">
           <input type="hidden" name="intent" value="add-commissioner" />
-          <Select name="userId" required>
+          <Select name="userId" required aria-label="Add commissioner">
             <SelectTrigger className="flex-1">
               <SelectValue placeholder="Add commissioner from league members" />
             </SelectTrigger>

app/components/league/settings/SettingsNavigation.tsx

@@ -94,18 +94,19 @@ export function SettingsDesktopNav({
         <p className="px-3 pb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
           Manage
         </p>
-        <nav className="space-y-1">
+        <nav aria-label="League settings" className="space-y-1">
           {sections.map((section) => (
             <button
               key={section.id}
               type="button"
               onClick={() => onSectionChange(section.id)}
+              aria-current={activeSection === section.id ? "page" : undefined}
               className={cn(
                 "flex w-full cursor-pointer items-center gap-2.5 rounded-md px-3 py-2 text-left text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground",
                 activeSection === section.id && "bg-muted text-foreground"
               )}
             >
-              <section.icon className={cn("h-4 w-4 shrink-0", section.isDanger && "text-destructive")} />
+              <section.icon className={cn("h-4 w-4 shrink-0", section.isDanger && "text-destructive")} aria-hidden="true" />
               {section.label}
             </button>
           ))}

app/components/marketing/Footer.tsx

@@ -11,8 +11,7 @@ const FOOTER_LINKS = [
 export function Footer() {
   return (
     <footer
-      className="flex flex-col items-start gap-3 border-t px-10 py-5 text-xs sm:flex-row sm:items-center sm:justify-between"
+      className="flex flex-col items-start gap-3 border-t px-10 py-5 text-xs sm:flex-row sm:items-center sm:justify-between text-muted-foreground"
-      style={{ color: "rgb(255 255 255 / 28%)" }}
     >
       <span>© 2026 Brackt. All rights reserved.</span>
       <nav className="flex gap-5">

app/components/marketing/LandingPage.tsx

@@ -37,6 +37,11 @@ function SlotMachineHeadline() {
   const sportsSeq = useRef<string[]>([]);
 
   useEffect(() => {
+    if (typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      setLanded(true);
+      return;
+    }
+
     sportsSeq.current = shuffle(SPORTS);
     let idx = 0;
 
@@ -105,17 +110,33 @@ const TICKER_ITEMS = [
 ];
 
 function SportTicker() {
+  const [paused, setPaused] = useState(false);
+
   return (
     <div className="relative overflow-hidden pb-px" style={{ marginTop: "52px" }}>
+      <button
+        type="button"
+        onClick={() => setPaused((p) => !p)}
+        aria-label={paused ? "Resume sport ticker" : "Pause sport ticker"}
+        className="sr-only focus:not-sr-only focus:absolute focus:top-0 focus:right-0 focus:z-20 focus:px-2 focus:py-1 focus:text-xs focus:bg-background focus:border focus:rounded-md"
+      >
+        {paused ? "Resume" : "Pause"}
+      </button>
       <div
+        aria-hidden="true"
         className="pointer-events-none absolute inset-y-0 left-0 z-10 w-[60px]"
         style={{ background: "linear-gradient(to right, #14171e, transparent)" }}
       />
       <div
+        aria-hidden="true"
         className="pointer-events-none absolute inset-y-0 right-0 z-10 w-[60px]"
         style={{ background: "linear-gradient(to left, #14171e, transparent)" }}
       />
-      <div className="flex animate-ticker" style={{ width: "max-content" }}>
+      <div
+        aria-hidden="true"
+        className={paused ? "flex" : "flex animate-ticker"}
+        style={{ width: "max-content" }}
+      >
         {TICKER_ITEMS.map(({ sport, key }) => (
           <span
             key={key}

app/components/marketing/ScoringTables.tsx

@@ -6,10 +6,11 @@ export function ScoringPointsTable({ className }: TableProps) {
   return (
     <div className={`bg-muted rounded-lg overflow-hidden ${className ?? ""}`}>
       <table className="w-full text-sm">
+        <caption className="sr-only">Scoring points by finish position</caption>
         <thead>
           <tr className="border-b border-border">
-            <th className="text-left p-3 font-semibold text-foreground">Finish</th>
+            <th scope="col" className="text-left p-3 font-semibold text-foreground">Finish</th>
-            <th className="text-right p-3 font-semibold text-foreground">Points</th>
+            <th scope="col" className="text-right p-3 font-semibold text-foreground">Points</th>
           </tr>
         </thead>
         <tbody className="divide-y divide-border">
@@ -29,10 +30,11 @@ export function QualifyingPointsTable({ className }: TableProps) {
   return (
     <div className={`bg-muted rounded-lg overflow-hidden ${className ?? ""}`}>
       <table className="w-full text-sm">
+        <caption className="sr-only">Qualifying points by major finish position</caption>
         <thead>
           <tr className="border-b border-border">
-            <th className="text-left p-3 font-semibold text-foreground">Major Finish</th>
+            <th scope="col" className="text-left p-3 font-semibold text-foreground">Major Finish</th>
-            <th className="text-right p-3 font-semibold text-foreground">Qualifying Points</th>
+            <th scope="col" className="text-right p-3 font-semibold text-foreground">Qualifying Points</th>
           </tr>
         </thead>
         <tbody className="divide-y divide-border">

app/root.tsx

@@ -77,6 +77,12 @@ export function Layout({ children }: { children: React.ReactNode }) {
         <Links />
       </head>
       <body>
+        <a
+          href="#main-content"
+          className="sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:z-[9999] focus:px-4 focus:py-2 focus:bg-background focus:text-foreground focus:border focus:rounded-md focus:text-sm focus:font-medium"
+        >
+          Skip to main content
+        </a>
         <BracktGradients />
         {children}
         <ScrollRestoration />
@@ -103,7 +109,7 @@ export default function App({ loaderData }: Route.ComponentProps) {
         <Outlet />
       ) : (
         <>
-          <main>
+          <main id="main-content">
             <Outlet />
           </main>
           <Footer />

app/routes/admin.tsx

@@ -43,7 +43,7 @@ export default function AdminLayout() {
         <div className="flex h-16 items-center border-b px-6">
           <h2 className="text-lg font-semibold">Admin Panel</h2>
         </div>
-        <nav className="space-y-1 p-4">
+        <nav aria-label="Admin navigation" className="space-y-1 p-4">
           <Button variant="ghost" className="w-full justify-start" asChild>
             <Link to="/admin">
               <LayoutDashboard className="mr-2 h-4 w-4" />

app/routes/forgot-password.tsx

@@ -59,9 +59,9 @@ export default function ForgotPasswordPage() {
             <form onSubmit={handleSubmit} className="space-y-4">
               <div className="space-y-2">
                 <Label htmlFor="email">Email</Label>
-                <Input id="email" name="email" type="email" required autoComplete="email" />
+                <Input id="email" name="email" type="email" required autoComplete="email" aria-describedby={error ? "forgot-error" : undefined} />
               </div>
-              {error && <p className="text-sm text-destructive">{error}</p>}
+              {error && <p id="forgot-error" role="alert" className="text-sm text-destructive">{error}</p>}
               <Button type="submit" className="w-full" disabled={loading}>
                 {loading ? "Sending…" : "Send reset link"}
               </Button>

app/routes/leagues/$leagueId.draft.$seasonId.tsx

@@ -1281,7 +1281,7 @@ export default function DraftRoom() {
             View Draft Board
           </a>
           {roomClosureCountdown !== null && roomClosureCountdown > 0 && (
-            <span className="text-sm text-emerald-500">
+            <span aria-live="polite" aria-atomic="true" className="text-sm text-emerald-500">
               Room closes in {Math.floor(roomClosureCountdown / 60)}:{String(roomClosureCountdown % 60).padStart(2, "0")}
             </span>
           )}
@@ -1364,7 +1364,7 @@ export default function DraftRoom() {
 
       {/* Mobile On Clock bar */}
       {season.status === "draft" && !isDraftComplete && currentDraftSlot && (
-        <div className={`md:hidden flex-shrink-0 flex items-center justify-between px-4 py-2 border-b ${
+        <div aria-live="assertive" aria-atomic="true" className={`md:hidden flex-shrink-0 flex items-center justify-between px-4 py-2 border-b ${
           isMyTurn
             ? isOvernightPause
               ? "bg-blue-950/40 border-blue-800/40"
@@ -1423,7 +1423,7 @@ export default function DraftRoom() {
             <TabsTrigger value="summary">Summary</TabsTrigger>
           </TabsList>
         </Tabs>
-        <div className="flex justify-center">
+        <div className="flex justify-center" aria-live="assertive" aria-atomic="true">
           {isMyTurn && season.status === "draft" && !isDraftComplete && (
             isOvernightPause ? (
               <span className="text-sm text-blue-200 text-center leading-snug">
@@ -1482,8 +1482,11 @@ export default function DraftRoom() {
             )}
             {mobileTab === "board" && (
               <div className="flex flex-col h-full overflow-hidden">
-                <div className="flex-shrink-0 flex gap-1 p-2 border-b">
+                <div role="tablist" aria-label="Board view" className="flex-shrink-0 flex gap-1 p-2 border-b">
                   <button
+                    role="tab"
+                    aria-selected={boardSubTab === "board"}
+                    aria-controls="board-subtab-panel"
                     onClick={() => setBoardSubTab("board")}
                     className={`flex-1 py-1.5 text-sm font-medium rounded transition-colors ${
                       boardSubTab === "board"
@@ -1494,6 +1497,9 @@ export default function DraftRoom() {
                     Board
                   </button>
                   <button
+                    role="tab"
+                    aria-selected={boardSubTab === "pick-list"}
+                    aria-controls="board-subtab-panel"
                     onClick={() => setBoardSubTab("pick-list")}
                     className={`flex-1 py-1.5 text-sm font-medium rounded transition-colors ${
                       boardSubTab === "pick-list"
@@ -1504,7 +1510,7 @@ export default function DraftRoom() {
                     Pick List
                   </button>
                 </div>
-                <div className="flex-1 overflow-hidden">
+                <div id="board-subtab-panel" role="tabpanel" className="flex-1 overflow-hidden">
                   {boardSubTab !== "pick-list" ? (
                     <DraftGridSection {...draftGridSectionProps} />
                   ) : (

app/routes/login.tsx

@@ -95,13 +95,13 @@ export default function LoginPage() {
           <form onSubmit={handleEmailSignIn} className="space-y-4">
             <div className="space-y-2">
               <Label htmlFor="email">Email</Label>
-              <Input id="email" name="email" type="email" required autoComplete="email" />
+              <Input id="email" name="email" type="email" required autoComplete="email" aria-describedby={error ? "login-error" : undefined} />
             </div>
             <div className="space-y-2">
               <Label htmlFor="password">Password</Label>
-              <Input id="password" name="password" type="password" required autoComplete="current-password" />
+              <Input id="password" name="password" type="password" required autoComplete="current-password" aria-describedby={error ? "login-error" : undefined} />
             </div>
-            {error && <p className="text-sm text-destructive">{error}</p>}
+            {error && <p id="login-error" role="alert" className="text-sm text-destructive">{error}</p>}
             <Button type="submit" className="w-full" disabled={loading}>
               {loading ? "Signing in…" : "Sign In"}
             </Button>

app/routes/onboarding.tsx

@@ -91,13 +91,14 @@ export default function OnboardingPage({ loaderData, actionData }: Route.Compone
                 maxLength={30}
                 autoFocus
                 autoComplete="off"
+                aria-describedby={actionData && "error" in actionData ? "onboarding-error" : "username-hint"}
               />
-              <p className="text-xs text-muted-foreground">
+              <p id="username-hint" className="text-xs text-muted-foreground">
                 3–30 characters. Letters, numbers, underscores, and hyphens only.
               </p>
             </div>
             {actionData && "error" in actionData && (
-              <p className="text-sm text-destructive">{actionData.error}</p>
+              <p id="onboarding-error" role="alert" className="text-sm text-destructive">{actionData.error}</p>
             )}
             <Button type="submit" className="w-full">
               Continue

app/routes/register.tsx

@@ -100,17 +100,17 @@ export default function RegisterPage() {
           <form onSubmit={handleRegister} className="space-y-4">
             <div className="space-y-2">
               <Label htmlFor="name">Display Name</Label>
-              <Input id="name" name="name" type="text" required autoComplete="name" />
+              <Input id="name" name="name" type="text" required autoComplete="name" aria-describedby={error ? "register-error" : undefined} />
             </div>
             <div className="space-y-2">
               <Label htmlFor="email">Email</Label>
-              <Input id="email" name="email" type="email" required autoComplete="email" />
+              <Input id="email" name="email" type="email" required autoComplete="email" aria-describedby={error ? "register-error" : undefined} />
             </div>
             <div className="space-y-2">
               <Label htmlFor="password">Password</Label>
-              <Input id="password" name="password" type="password" required autoComplete="new-password" minLength={8} />
+              <Input id="password" name="password" type="password" required autoComplete="new-password" minLength={8} aria-describedby={error ? "register-error" : undefined} />
             </div>
-            {error && <p className="text-sm text-destructive">{error}</p>}
+            {error && <p id="register-error" role="alert" className="text-sm text-destructive">{error}</p>}
             <Button type="submit" className="w-full" disabled={loading}>
               {loading ? "Creating account…" : "Create Account"}
             </Button>

app/routes/reset-password.tsx

@@ -67,6 +67,7 @@ export default function ResetPasswordPage() {
                 required
                 minLength={8}
                 autoComplete="new-password"
+                aria-describedby={error ? "reset-error" : undefined}
               />
             </div>
             <div className="space-y-2">
@@ -78,9 +79,10 @@ export default function ResetPasswordPage() {
                 required
                 minLength={8}
                 autoComplete="new-password"
+                aria-describedby={error ? "reset-error" : undefined}
               />
             </div>
-            {error && <p className="text-sm text-destructive">{error}</p>}
+            {error && <p id="reset-error" role="alert" className="text-sm text-destructive">{error}</p>}
             <Button type="submit" className="w-full" disabled={loading}>
               {loading ? "Saving…" : "Set new password"}
             </Button>