fix: resolve all 48 WCAG 2.2 AA accessibility issues (#439)

* 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

* Fix code review findings from WCAG compliance pass

- Add Arrow key navigation + roving tabindex to all role=radiogroup
  components (AutodraftSettings x2, TimerModeSelector,
  OvernightPauseSettings, ScoringPresetPicker) per ARIA radio pattern
- Extract shared focus-trap logic into useFocusTrap hook; update
  ConnectionOverlay and AuthRecoveryOverlay to use it
- Add tabIndex={-1} to ConnectionOverlay Card so focus can land in
  spinner-only state (no interactive children)
- Replace aria-live on loading dots container with sr-only span so
  status changes are announced by text content, not aria-label
- Remove contradictory aria-hidden+role=columnheader from
  AvailableParticipantsSection visual-only header row
- Remove invalid scope="col" from div[role=columnheader] in
  DraftSummaryView (scope is only valid on <th>)
- Remove redundant aria-label from ParticipantSelectionDialog sport
  select (htmlFor label is sufficient)
- Change WizardStepper connector <li> to role=presentation
- Revert muted-foreground from 62% to 55% (original already passes
  contrast; footer was fixed separately via text-muted-foreground)

https://claude.ai/code/session_01JXajpFxhqLf8aPCncP81k3

* Fix lint error and update tests for WCAG role changes

- Replace el! non-null assertion with optional chaining in useFocusTrap
- Update AutodraftSettings tests to query role="radio" instead of
  role="button" (buttons have an explicit radio role since the WCAG pass)
- Update AvailableParticipantsSection watchlist tests to use
  getByRole/getAllByRole instead of getByTitle/getAllByTitle (watchlist
  buttons now use aria-label instead of title)

https://claude.ai/code/session_01JXajpFxhqLf8aPCncP81k3

---------

Co-authored-by: Claude <noreply@anthropic.com>

app/components/AutodraftSettings.tsx

@@ -200,8 +200,26 @@ function AutodraftOptions({
 
   const isDisabled = isMyTurn;
 
+  function handleGroupKeyDown(e: React.KeyboardEvent<HTMLDivElement>) {
+    if (isDisabled) return;
+    if (!["ArrowDown", "ArrowRight", "ArrowUp", "ArrowLeft"].includes(e.key)) return;
+    e.preventDefault();
+    const idx = OPTION_ORDER.indexOf(localState);
+    const next = e.key === "ArrowDown" || e.key === "ArrowRight"
+      ? (idx + 1) % OPTION_ORDER.length
+      : (idx - 1 + OPTION_ORDER.length) % OPTION_ORDER.length;
+    const nextState = OPTION_ORDER[next];
+    handleStateChange(nextState);
+    e.currentTarget.querySelector<HTMLElement>(`[data-radio-value="${nextState}"]`)?.focus();
+  }
+
   return (
-    <div className="flex flex-col rounded-lg border overflow-hidden">
+    <div
+      role="radiogroup"
+      aria-label="Autodraft setting"
+      onKeyDown={handleGroupKeyDown}
+      className="flex flex-col rounded-lg border overflow-hidden"
+    >
       {OPTION_ORDER.map((state) => {
         const { label } = OPTIONS[state];
         const isActive = localState === state;
@@ -209,6 +227,10 @@ function AutodraftOptions({
           <button
             key={state}
             type="button"
+            role="radio"
+            aria-checked={isActive}
+            tabIndex={isActive ? 0 : -1}
+            data-radio-value={state}
             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 +239,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>
         );
@@ -385,6 +407,19 @@ export function AutodraftSettings({
 
   const isDisabled = isMyTurn;
 
+  function handleGroupKeyDown(e: React.KeyboardEvent<HTMLDivElement>) {
+    if (isDisabled) return;
+    if (!["ArrowDown", "ArrowRight", "ArrowUp", "ArrowLeft"].includes(e.key)) return;
+    e.preventDefault();
+    const idx = OPTION_ORDER.indexOf(localState);
+    const next = e.key === "ArrowDown" || e.key === "ArrowRight"
+      ? (idx + 1) % OPTION_ORDER.length
+      : (idx - 1 + OPTION_ORDER.length) % OPTION_ORDER.length;
+    const nextState = OPTION_ORDER[next];
+    handleStateChange(nextState);
+    e.currentTarget.querySelector<HTMLElement>(`[data-radio-value="${nextState}"]`)?.focus();
+  }
+
   return (
     <div className="border-t pt-4 mt-4">
       {/* Header with info icon inline */}
@@ -417,7 +452,7 @@ export function AutodraftSettings({
         </Popover>
       </div>
 
-      <div className="flex flex-col rounded-lg border overflow-hidden">
+      <div role="radiogroup" aria-label="Autodraft setting" onKeyDown={handleGroupKeyDown} className="flex flex-col rounded-lg border overflow-hidden">
         {OPTION_ORDER.map((state) => {
           const { label } = OPTIONS[state];
           const isActive = localState === state;
@@ -425,6 +460,10 @@ export function AutodraftSettings({
             <button
               key={state}
               type="button"
+              role="radio"
+              aria-checked={isActive}
+              tabIndex={isActive ? 0 : -1}
+              data-radio-value={state}
               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 +472,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/__tests__/AutodraftSettings.test.tsx

@@ -33,10 +33,10 @@ describe('AutodraftSettings Component', () => {
     it('renders all four option buttons', () => {
       render(<AutodraftSettings {...defaultProps} />);
 
-      expect(screen.getByRole('button', { name: 'Off' })).toBeInTheDocument();
+      expect(screen.getByRole('radio', { name: 'Off' })).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: 'Next in Queue' })).toBeInTheDocument();
+      expect(screen.getByRole('radio', { name: 'Next in Queue' })).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: 'All in Queue' })).toBeInTheDocument();
+      expect(screen.getByRole('radio', { name: 'All in Queue' })).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: 'All Picks' })).toBeInTheDocument();
+      expect(screen.getByRole('radio', { name: 'All Picks' })).toBeInTheDocument();
     });
 
     it('does not render a queue-only toggle switch', () => {
@@ -51,24 +51,24 @@ describe('AutodraftSettings Component', () => {
 
     it('marks Off as active (muted border) when isEnabled=false', () => {
       render(<AutodraftSettings {...defaultProps} isEnabled={false} />);
-      expect(screen.getByRole('button', { name: 'Off' }).className).toContain(
+      expect(screen.getByRole('radio', { name: 'Off' }).className).toContain(
         'border-l-muted-foreground'
       );
     });
 
     it('marks Next in Queue as active when isEnabled=true, mode=next_pick', () => {
       render(<AutodraftSettings {...defaultProps} isEnabled={true} mode="next_pick" queueOnly={true} />);
-      expect(screen.getByRole('button', { name: 'Next in Queue' }).className).toContain('bg-electric');
+      expect(screen.getByRole('radio', { name: 'Next in Queue' }).className).toContain('bg-electric');
     });
 
     it('marks All in Queue as active when isEnabled=true, mode=while_on, queueOnly=true', () => {
       render(<AutodraftSettings {...defaultProps} isEnabled={true} mode="while_on" queueOnly={true} />);
-      expect(screen.getByRole('button', { name: 'All in Queue' }).className).toContain('bg-electric');
+      expect(screen.getByRole('radio', { name: 'All in Queue' }).className).toContain('bg-electric');
     });
 
     it('marks All Picks as active when isEnabled=true, mode=while_on, queueOnly=false', () => {
       render(<AutodraftSettings {...defaultProps} isEnabled={true} mode="while_on" queueOnly={false} />);
-      expect(screen.getByRole('button', { name: 'All Picks' }).className).toContain('bg-electric');
+      expect(screen.getByRole('radio', { name: 'All Picks' }).className).toContain('bg-electric');
     });
   });
 
@@ -79,7 +79,7 @@ describe('AutodraftSettings Component', () => {
       const onUpdate = vi.fn();
       render(<AutodraftSettings {...defaultProps} onUpdate={onUpdate} />);
 
-      fireEvent.click(screen.getByRole('button', { name: 'Next in Queue' }));
+      fireEvent.click(screen.getByRole('radio', { name: 'Next in Queue' }));
 
       await waitFor(() => {
         expect(global.fetch).toHaveBeenCalledWith(
@@ -94,7 +94,7 @@ describe('AutodraftSettings Component', () => {
       const onUpdate = vi.fn();
       render(<AutodraftSettings {...defaultProps} onUpdate={onUpdate} />);
 
-      fireEvent.click(screen.getByRole('button', { name: 'All in Queue' }));
+      fireEvent.click(screen.getByRole('radio', { name: 'All in Queue' }));
 
       await waitFor(() => expect(onUpdate).toHaveBeenCalledWith(true, 'while_on', true));
     });
@@ -103,7 +103,7 @@ describe('AutodraftSettings Component', () => {
       const onUpdate = vi.fn();
       render(<AutodraftSettings {...defaultProps} onUpdate={onUpdate} />);
 
-      fireEvent.click(screen.getByRole('button', { name: 'All Picks' }));
+      fireEvent.click(screen.getByRole('radio', { name: 'All Picks' }));
 
       await waitFor(() => expect(onUpdate).toHaveBeenCalledWith(true, 'while_on', false));
     });
@@ -114,7 +114,7 @@ describe('AutodraftSettings Component', () => {
         <AutodraftSettings {...defaultProps} isEnabled={true} mode="next_pick" queueOnly={true} onUpdate={onUpdate} />
       );
 
-      fireEvent.click(screen.getByRole('button', { name: 'Off' }));
+      fireEvent.click(screen.getByRole('radio', { name: 'Off' }));
 
       await waitFor(() => expect(onUpdate).toHaveBeenCalledWith(false, 'next_pick', false));
     });
@@ -122,21 +122,21 @@ describe('AutodraftSettings Component', () => {
     it('disables all buttons when isMyTurn=true', () => {
       render(<AutodraftSettings {...defaultProps} isMyTurn={true} />);
 
-      expect(screen.getByRole('button', { name: 'Off' })).toBeDisabled();
+      expect(screen.getByRole('radio', { name: 'Off' })).toBeDisabled();
-      expect(screen.getByRole('button', { name: 'Next in Queue' })).toBeDisabled();
+      expect(screen.getByRole('radio', { name: 'Next in Queue' })).toBeDisabled();
-      expect(screen.getByRole('button', { name: 'All in Queue' })).toBeDisabled();
+      expect(screen.getByRole('radio', { name: 'All in Queue' })).toBeDisabled();
-      expect(screen.getByRole('button', { name: 'All Picks' })).toBeDisabled();
+      expect(screen.getByRole('radio', { name: 'All Picks' })).toBeDisabled();
     });
 
     it('does not call fetch when a button is clicked during the user\'s turn', () => {
       render(<AutodraftSettings {...defaultProps} isMyTurn={true} />);
-      fireEvent.click(screen.getByRole('button', { name: 'Next in Queue' }));
+      fireEvent.click(screen.getByRole('radio', { name: 'Next in Queue' }));
       expect(global.fetch).not.toHaveBeenCalled();
     });
 
     it('does not re-fire when the already-active option is clicked', async () => {
       render(<AutodraftSettings {...defaultProps} isEnabled={false} />);
-      fireEvent.click(screen.getByRole('button', { name: 'Off' }));
+      fireEvent.click(screen.getByRole('radio', { name: 'Off' }));
       expect(global.fetch).not.toHaveBeenCalled();
     });
   });
@@ -149,10 +149,10 @@ describe('AutodraftSettings Component', () => {
       (global.fetch as any).mockReturnValueOnce(new Promise((r) => { resolve = r; }));
 
       render(<AutodraftSettings {...defaultProps} />);
-      fireEvent.click(screen.getByRole('button', { name: 'Next in Queue' }));
+      fireEvent.click(screen.getByRole('radio', { name: 'Next in Queue' }));
 
       // Buttons stay enabled — optimistic UI does not block interaction
-      expect(screen.getByRole('button', { name: 'Off' })).not.toBeDisabled();
+      expect(screen.getByRole('radio', { name: 'Off' })).not.toBeDisabled();
 
       resolve?.({ ok: true, json: async () => ({ success: true }) });
     });
@@ -160,9 +160,9 @@ describe('AutodraftSettings Component', () => {
     it('fires a fetch for every rapid click, aborting previous in-flight requests', async () => {
       render(<AutodraftSettings {...defaultProps} />);
 
-      fireEvent.click(screen.getByRole('button', { name: 'Next in Queue' }));
+      fireEvent.click(screen.getByRole('radio', { name: 'Next in Queue' }));
-      fireEvent.click(screen.getByRole('button', { name: 'All in Queue' }));
+      fireEvent.click(screen.getByRole('radio', { name: 'All in Queue' }));
-      fireEvent.click(screen.getByRole('button', { name: 'Off' }));
+      fireEvent.click(screen.getByRole('radio', { name: 'Off' }));
 
       await waitFor(() => expect(global.fetch).toHaveBeenCalledTimes(3));
     });
@@ -175,10 +175,10 @@ describe('AutodraftSettings Component', () => {
       (global.fetch as any).mockResolvedValueOnce({ ok: false });
 
       render(<AutodraftSettings {...defaultProps} isEnabled={false} />);
-      fireEvent.click(screen.getByRole('button', { name: 'Next in Queue' }));
+      fireEvent.click(screen.getByRole('radio', { name: 'Next in Queue' }));
 
       await waitFor(() => {
-        expect(screen.getByRole('button', { name: 'Off' }).className).toContain(
+        expect(screen.getByRole('radio', { name: 'Off' }).className).toContain(
           'border-l-muted-foreground'
         );
       });
@@ -188,10 +188,10 @@ describe('AutodraftSettings Component', () => {
       (global.fetch as any).mockRejectedValueOnce(new Error('Network error'));
 
       render(<AutodraftSettings {...defaultProps} isEnabled={false} />);
-      fireEvent.click(screen.getByRole('button', { name: 'Next in Queue' }));
+      fireEvent.click(screen.getByRole('radio', { name: 'Next in Queue' }));
 
       await waitFor(() => {
-        expect(screen.getByRole('button', { name: 'Off' }).className).toContain(
+        expect(screen.getByRole('radio', { name: 'Off' }).className).toContain(
           'border-l-muted-foreground'
         );
       });
@@ -203,7 +203,7 @@ describe('AutodraftSettings Component', () => {
   describe('API payload', () => {
     it('posts correct formData for Next in Queue (next_pick, queueOnly=true)', async () => {
       render(<AutodraftSettings {...defaultProps} />);
-      fireEvent.click(screen.getByRole('button', { name: 'Next in Queue' }));
+      fireEvent.click(screen.getByRole('radio', { name: 'Next in Queue' }));
 
       await waitFor(() => expect(global.fetch).toHaveBeenCalled());
 
@@ -217,7 +217,7 @@ describe('AutodraftSettings Component', () => {
 
     it('posts correct formData for All in Queue (while_on, queueOnly=true)', async () => {
       render(<AutodraftSettings {...defaultProps} />);
-      fireEvent.click(screen.getByRole('button', { name: 'All in Queue' }));
+      fireEvent.click(screen.getByRole('radio', { name: 'All in Queue' }));
 
       await waitFor(() => expect(global.fetch).toHaveBeenCalled());
 
@@ -229,7 +229,7 @@ describe('AutodraftSettings Component', () => {
 
     it('posts correct formData for All Picks (while_on, queueOnly=false)', async () => {
       render(<AutodraftSettings {...defaultProps} />);
-      fireEvent.click(screen.getByRole('button', { name: 'All Picks' }));
+      fireEvent.click(screen.getByRole('radio', { name: 'All Picks' }));
 
       await waitFor(() => expect(global.fetch).toHaveBeenCalled());
 
@@ -241,7 +241,7 @@ describe('AutodraftSettings Component', () => {
 
     it('posts isEnabled=false for Off', async () => {
       render(<AutodraftSettings {...defaultProps} isEnabled={true} mode="next_pick" queueOnly={true} />);
-      fireEvent.click(screen.getByRole('button', { name: 'Off' }));
+      fireEvent.click(screen.getByRole('radio', { name: 'Off' }));
 
       await waitFor(() => expect(global.fetch).toHaveBeenCalled());
 
@@ -251,7 +251,7 @@ describe('AutodraftSettings Component', () => {
 
     it('passes an AbortSignal to fetch', async () => {
       render(<AutodraftSettings {...defaultProps} />);
-      fireEvent.click(screen.getByRole('button', { name: 'Next in Queue' }));
+      fireEvent.click(screen.getByRole('radio', { name: 'Next in Queue' }));
 
       await waitFor(() => expect(global.fetch).toHaveBeenCalled());
 

app/components/__tests__/AvailableParticipantsSection.test.tsx

@@ -403,8 +403,8 @@ describe("AvailableParticipantsSection", () => {
       render(
         <AvailableParticipantsSection {...defaultProps} hasTeam={false} />
       );
-      expect(screen.queryByTitle("Add to watchlist")).not.toBeInTheDocument();
+      expect(screen.queryByRole('button', { name: "Add to watchlist" })).not.toBeInTheDocument();
-      expect(screen.queryByTitle("Remove from watchlist")).not.toBeInTheDocument();
+      expect(screen.queryByRole('button', { name: "Remove from watchlist" })).not.toBeInTheDocument();
     });
 
     it("renders EyeOff icon for unwatched participants when hasTeam is true", () => {
@@ -415,7 +415,7 @@ describe("AvailableParticipantsSection", () => {
           watchedParticipantIds={new Set<string>()}
         />
       );
-      const buttons = screen.getAllByTitle("Add to watchlist");
+      const buttons = screen.getAllByRole('button', { name: "Add to watchlist" });
       expect(buttons.length).toBeGreaterThan(0);
     });
 
@@ -427,7 +427,7 @@ describe("AvailableParticipantsSection", () => {
           watchedParticipantIds={new Set(["1"])}
         />
       );
-      const buttons = screen.getAllByTitle("Remove from watchlist");
+      const buttons = screen.getAllByRole('button', { name: "Remove from watchlist" });
       expect(buttons.length).toBeGreaterThan(0);
     });
 
@@ -441,7 +441,7 @@ describe("AvailableParticipantsSection", () => {
           watchedParticipantIds={new Set<string>()}
         />
       );
-      const buttons = screen.getAllByTitle("Add to watchlist");
+      const buttons = screen.getAllByRole('button', { name: "Add to watchlist" });
       await user.click(buttons[0]);
       expect(onToggleWatchlist).toHaveBeenCalledWith("1");
     });

app/components/draft/AuthRecoveryOverlay.tsx

@@ -1,23 +1,32 @@
+import { useRef } from "react";
 import { Button } from "~/components/ui/button";
 import { Card } from "~/components/ui/card";
+import { useFocusTrap } from "~/hooks/useFocusTrap";
 
 interface AuthRecoveryOverlayProps {
   isAuthDegraded: boolean;
 }
 
-export function AuthRecoveryOverlay({
+export function AuthRecoveryOverlay({ isAuthDegraded }: AuthRecoveryOverlayProps) {
-  isAuthDegraded,
+  const dialogRef = useRef<HTMLDivElement>(null);
-}: AuthRecoveryOverlayProps) {
+
-  if (!isAuthDegraded) {
+  useFocusTrap(dialogRef, isAuthDegraded);
-    return null;
+
-  }
+  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">
             <svg
+              aria-hidden="true"
               className="w-8 h-8 text-destructive"
               fill="none"
               stroke="currentColor"
@@ -34,18 +43,13 @@ 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
+              Your session has expired. Reload the page to reconnect to the draft.
-              draft.
             </p>
           </div>
 
-          <Button
+          <Button onClick={() => window.location.reload()} className="w-full" variant="default">
-            onClick={() => window.location.reload()}
-            className="w-full"
-            variant="default"
-          >
             Reload Page
           </Button>
         </div>

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,7 +474,7 @@ 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 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 className="text-center p-3 px-0">SPR</span>
         <span className="text-left p-3">Participant</span>
@@ -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,5 +1,7 @@
+import { useRef } from "react";
 import { Button } from "~/components/ui/button";
 import { Card } from "~/components/ui/card";
+import { useFocusTrap } from "~/hooks/useFocusTrap";
 
 interface ConnectionOverlayProps {
   isConnected: boolean;
@@ -14,18 +16,41 @@ export function ConnectionOverlay({
   connectionError,
   isSyncing,
 }: ConnectionOverlayProps) {
-  if (isConnected && !isSyncing) {
+  const isVisible = !isConnected || isSyncing;
-    return null;
+  const dialogRef = useRef<HTMLDivElement>(null);
-  }
+  const titleId = "connection-overlay-title";
+
+  useFocusTrap(dialogRef, isVisible);
+
+  if (!isVisible) 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
-      <Card className="w-full max-w-md mx-4 p-8 text-center">
+      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]"
+    >
+      {/* sr-only live region so status changes are announced without relying on aria-label on the dots */}
+      <span className="sr-only" aria-live="polite" aria-atomic="true">{statusMessage}</span>
+
+      {/* tabIndex allows the card to receive focus when there are no interactive children (spinner state) */}
+      <Card tabIndex={-1} className="w-full max-w-md mx-4 p-8 text-center focus:outline-none">
         <div className="flex flex-col items-center gap-6">
           {/* Spinner or Error Icon */}
           {connectionError ? (
             <div className="w-16 h-16 rounded-full bg-destructive/15 flex items-center justify-center">
               <svg
+                aria-hidden="true"
                 className="w-8 h-8 text-destructive"
                 fill="none"
                 stroke="currentColor"
@@ -41,7 +66,7 @@ export function ConnectionOverlay({
               </svg>
             </div>
           ) : (
-            <div className="relative w-16 h-16">
+            <div aria-hidden="true" className="relative w-16 h-16">
               <div className="absolute inset-0 border-4 border-primary/30 rounded-full" />
               <div className="absolute inset-0 border-4 border-primary border-t-transparent rounded-full animate-spin" />
             </div>
@@ -49,7 +74,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 +84,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,19 +100,10 @@ export function ConnectionOverlay({
 
           {/* Loading Dots */}
           {!connectionError && (
-            <div className="flex gap-1.5">
+            <div aria-hidden="true" className="flex gap-1.5">
-              <div
+              <div className="w-2 h-2 bg-primary rounded-full animate-bounce" style={{ animationDelay: "0ms" }} />
-                className="w-2 h-2 bg-primary rounded-full animate-bounce"
+              <div className="w-2 h-2 bg-primary rounded-full animate-bounce" style={{ animationDelay: "150ms" }} />
-                style={{ animationDelay: "0ms" }}
+              <div className="w-2 h-2 bg-primary rounded-full animate-bounce" style={{ animationDelay: "300ms" }} />
-               />
-              <div
-                className="w-2 h-2 bg-primary rounded-full animate-bounce"
-                style={{ animationDelay: "150ms" }}
-               />
-              <div
-                className="w-2 h-2 bg-primary rounded-full animate-bounce"
-                style={{ animationDelay: "300ms" }}
-               />
             </div>
           )}
         </div>

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" 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" 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,7 @@ export const DraftSummaryView = memo(function DraftSummaryView({
           const flexesExhausted = flexPicksAvailable > 0 && used >= flexPicksAvailable;
           return (
             <div
+              role="columnheader"
               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 +116,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 +147,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 +161,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,18 @@ 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"
               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

@@ -1,3 +1,4 @@
+import React from "react";
 import { Ban, Globe, Moon, Sun, Users } from "lucide-react";
 import { GradientIcon } from "~/components/ui/GradientIcon";
 import { Input } from "~/components/ui/input";
@@ -40,17 +41,36 @@ export function OvernightPauseSettings({
 }: OvernightPauseSettingsProps) {
   if (!show) return null;
 
+  const PAUSE_VALUES = PAUSE_MODES.map((m) => m.value);
+
+  function handleGroupKeyDown(e: React.KeyboardEvent<HTMLDivElement>) {
+    if (disabled) return;
+    if (!["ArrowDown", "ArrowRight", "ArrowUp", "ArrowLeft"].includes(e.key)) return;
+    e.preventDefault();
+    const idx = PAUSE_VALUES.indexOf(mode);
+    const next = e.key === "ArrowDown" || e.key === "ArrowRight"
+      ? (idx + 1) % PAUSE_VALUES.length
+      : (idx - 1 + PAUSE_VALUES.length) % PAUSE_VALUES.length;
+    const nextValue = PAUSE_VALUES[next];
+    onModeChange(nextValue);
+    e.currentTarget.querySelector<HTMLElement>(`[data-radio-value="${nextValue}"]`)?.focus();
+  }
+
   return (
     <div className="space-y-4">
       <Label>Overnight Pause</Label>
 
-      <div className="grid grid-cols-3 gap-2">
+      <div role="radiogroup" aria-label="Pause mode" onKeyDown={handleGroupKeyDown} 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}
+              tabIndex={selected ? 0 : -1}
+              data-radio-value={value}
               disabled={disabled}
               onClick={() => onModeChange(value)}
               className={cn(
@@ -76,10 +96,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 +109,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

@@ -1,3 +1,4 @@
+import React from "react";
 import { cn } from "~/lib/utils";
 import { DEFAULT_SCORING_RULES, type ScoringRules } from "~/lib/scoring-types";
 
@@ -39,6 +40,21 @@ export function ScoringPresetPicker({
   disabled,
 }: ScoringPresetPickerProps) {
   const maxPoints = Math.max(...Object.values(rules));
+  const PRESET_VALUES = ["brackt", "omnifantasy", "custom"] as const;
+
+  function handleGroupKeyDown(e: React.KeyboardEvent<HTMLDivElement>) {
+    if (disabled) return;
+    if (!["ArrowDown", "ArrowRight", "ArrowUp", "ArrowLeft"].includes(e.key)) return;
+    e.preventDefault();
+    const idx = PRESET_VALUES.indexOf(preset);
+    const next = e.key === "ArrowDown" || e.key === "ArrowRight"
+      ? (idx + 1) % PRESET_VALUES.length
+      : (idx - 1 + PRESET_VALUES.length) % PRESET_VALUES.length;
+    const nextValue = PRESET_VALUES[next];
+    if (nextValue !== "custom") applyPreset(nextValue);
+    else onPresetChange("custom");
+    e.currentTarget.querySelector<HTMLElement>(`[data-radio-value="${nextValue}"]`)?.focus();
+  }
 
   function applyPreset(p: "brackt" | "omnifantasy") {
     onPresetChange(p);
@@ -56,11 +72,15 @@ 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" onKeyDown={handleGroupKeyDown} 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}
+            tabIndex={preset === p ? 0 : -1}
+            data-radio-value={p}
             disabled={disabled}
             onClick={() => p !== "custom" ? applyPreset(p) : onPresetChange("custom")}
             className={cn(
@@ -90,7 +110,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

@@ -1,3 +1,4 @@
+import React from "react";
 import { ChessPawn, Hourglass } from "lucide-react";
 import { GradientIcon } from "~/components/ui/GradientIcon";
 import { cn } from "~/lib/utils";
@@ -24,14 +25,31 @@ const MODES = [
 ];
 
 export function TimerModeSelector({ value, onChange, disabled }: TimerModeSelectorProps) {
+  function handleGroupKeyDown(e: React.KeyboardEvent<HTMLDivElement>) {
+    if (disabled) return;
+    if (!["ArrowDown", "ArrowRight", "ArrowUp", "ArrowLeft"].includes(e.key)) return;
+    e.preventDefault();
+    const idx = MODES.findIndex((m) => m.value === value);
+    const next = e.key === "ArrowDown" || e.key === "ArrowRight"
+      ? (idx + 1) % MODES.length
+      : (idx - 1 + MODES.length) % MODES.length;
+    const nextValue = MODES[next].value;
+    onChange(nextValue);
+    e.currentTarget.querySelector<HTMLElement>(`[data-radio-value="${nextValue}"]`)?.focus();
+  }
+
   return (
-    <div className="grid grid-cols-2 gap-3">
+    <div role="radiogroup" aria-label="Timer mode" onKeyDown={handleGroupKeyDown} 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}
+            tabIndex={selected ? 0 : -1}
+            data-radio-value={mode.value}
             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,26 +19,30 @@ 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 role="presentation" aria-hidden="true" className={cn("flex-1 h-0.5 transition-colors", done ? "bg-primary" : "bg-border")} />
               )}
-              <button
+              <li>
-                type="button"
+                <button
-                onClick={() => done && onStepClick(n)}
+                  type="button"
-                className={cn(
+                  onClick={() => done && onStepClick(n)}
-                  "shrink-0 w-9 h-9 rounded-full border-2 flex items-center justify-center text-sm font-semibold bg-background transition-colors",
+                  aria-label={`Step ${n}: ${label}${done ? " (completed)" : active ? " (current)" : ""}`}
-                  done && "bg-primary border-primary text-primary-foreground",
+                  aria-current={active ? "step" : undefined}
-                  active && !done && "border-primary text-primary",
+                  className={cn(
-                  !done && !active && "border-border text-muted-foreground",
+                    "shrink-0 w-9 h-9 rounded-full border-2 flex items-center justify-center text-sm font-semibold bg-background transition-colors",
-                  done ? "cursor-pointer" : "cursor-default"
+                    done && "bg-primary border-primary text-primary-foreground",
-                )}
+                    active && !done && "border-primary text-primary",
-              >
+                    !done && !active && "border-border text-muted-foreground",
-                {done ? <Check className="h-4 w-4" /> : n}
+                    done ? "cursor-pointer" : "cursor-default"
-              </button>
+                  )}
+                >
+                  {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/hooks/useFocusTrap.ts

@@ -0,0 +1,31 @@
+import { useEffect, type RefObject } from "react";
+
+const FOCUSABLE_SELECTOR =
+  'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+export function useFocusTrap(ref: RefObject<HTMLElement | null>, active: boolean) {
+  useEffect(() => {
+    if (!active) return;
+    const el = ref.current;
+    if (!el) return;
+
+    const first = el.querySelector<HTMLElement>(FOCUSABLE_SELECTOR) ?? el;
+    first.focus();
+
+    function onKeyDown(e: KeyboardEvent) {
+      if (e.key !== "Tab") return;
+      const focusables = Array.from(el?.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR) ?? []);
+      if (focusables.length === 0) return;
+      const firstEl = focusables[0];
+      const lastEl = focusables[focusables.length - 1];
+      if (e.shiftKey) {
+        if (document.activeElement === firstEl) { e.preventDefault(); lastEl.focus(); }
+      } else {
+        if (document.activeElement === lastEl) { e.preventDefault(); firstEl.focus(); }
+      }
+    }
+
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [ref, active]);
+}

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>