diff --git a/app/app.css b/app/app.css
index 9bc1f29..531d075 100644
--- a/app/app.css
+++ b/app/app.css
@@ -69,7 +69,7 @@ html {
   --secondary: #1c1f26;
   --secondary-foreground: #ffffff;
   --muted: #1c1f26;
-  --muted-foreground: rgb(255 255 255 / 62%);
+  --muted-foreground: rgb(255 255 255 / 55%);
   --accent: #2ce1c1;
   --accent-foreground: #14171e;
   --destructive: oklch(0.65 0.22 25);
diff --git a/app/components/AutodraftSettings.tsx b/app/components/AutodraftSettings.tsx
index 1587573..dbc64c4 100644
--- a/app/components/AutodraftSettings.tsx
+++ b/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 role="radiogroup" aria-label="Autodraft setting" 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;
@@ -211,6 +229,8 @@ function AutodraftOptions({
             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)} ${
@@ -387,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 */}
@@ -419,7 +452,7 @@ export function AutodraftSettings({
         </Popover>
       </div>
 
-      <div role="radiogroup" aria-label="Autodraft setting" 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;
@@ -429,6 +462,8 @@ export function AutodraftSettings({
               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)} ${
diff --git a/app/components/draft/AuthRecoveryOverlay.tsx b/app/components/draft/AuthRecoveryOverlay.tsx
index 900939b..58b0a24 100644
--- a/app/components/draft/AuthRecoveryOverlay.tsx
+++ b/app/components/draft/AuthRecoveryOverlay.tsx
@@ -1,46 +1,18 @@
-import { useEffect, useRef } from "react";
+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({
-  isAuthDegraded,
-}: 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();
+  useFocusTrap(dialogRef, isAuthDegraded);
 
-    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;
-  }
+  if (!isAuthDegraded) return null;
 
   return (
     <div
@@ -54,6 +26,7 @@ export function AuthRecoveryOverlay({
         <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"
@@ -72,16 +45,11 @@ export function AuthRecoveryOverlay({
           <div>
             <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.
+              Your session has expired. Reload the page to reconnect to the draft.
             </p>
           </div>
 
-          <Button
-            onClick={() => window.location.reload()}
-            className="w-full"
-            variant="default"
-          >
+          <Button onClick={() => window.location.reload()} className="w-full" variant="default">
             Reload Page
           </Button>
         </div>
diff --git a/app/components/draft/AvailableParticipantsSection.tsx b/app/components/draft/AvailableParticipantsSection.tsx
index 0c15a03..f08618c 100644
--- a/app/components/draft/AvailableParticipantsSection.tsx
+++ b/app/components/draft/AvailableParticipantsSection.tsx
@@ -474,10 +474,10 @@ export const AvailableParticipantsSection = memo(function AvailableParticipantsS
         </div>
       </div>
 
-      <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 role="columnheader" aria-label="Overall rank" className="text-center p-3 px-0">OVR</span>
-        <span role="columnheader" aria-label="Sport rank" className="text-center p-3 px-0">SPR</span>
-        <span role="columnheader" className="text-left p-3">Participant</span>
+      <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>
       </div>
 
       <div ref={parentRef} className="flex-1 overflow-y-auto">
diff --git a/app/components/draft/ConnectionOverlay.tsx b/app/components/draft/ConnectionOverlay.tsx
index 1c026e8..e75362e 100644
--- a/app/components/draft/ConnectionOverlay.tsx
+++ b/app/components/draft/ConnectionOverlay.tsx
@@ -1,6 +1,7 @@
-import { useEffect, useRef } from "react";
+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;
@@ -15,39 +16,13 @@ export function ConnectionOverlay({
   connectionError,
   isSyncing,
 }: ConnectionOverlayProps) {
+  const isVisible = !isConnected || isSyncing;
   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();
+  useFocusTrap(dialogRef, isVisible);
 
-    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;
-  }
+  if (!isVisible) return null;
 
   const statusMessage = connectionError
     ? connectionError
@@ -65,12 +40,17 @@ export function ConnectionOverlay({
       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">
+      {/* 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"
@@ -86,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>
@@ -120,22 +100,10 @@ export function ConnectionOverlay({
 
           {/* Loading Dots */}
           {!connectionError && (
-            <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" }}
-               />
+            <div aria-hidden="true" className="flex gap-1.5">
+              <div className="w-2 h-2 bg-primary rounded-full animate-bounce" style={{ animationDelay: "0ms" }} />
+              <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>
diff --git a/app/components/draft/DraftSummaryView.tsx b/app/components/draft/DraftSummaryView.tsx
index eca60ad..20a91f9 100644
--- a/app/components/draft/DraftSummaryView.tsx
+++ b/app/components/draft/DraftSummaryView.tsx
@@ -78,10 +78,10 @@ export const DraftSummaryView = memo(function DraftSummaryView({
         {/* Header row */}
         <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">
+        <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 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">
+        <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) => {
@@ -92,7 +92,6 @@ export const DraftSummaryView = memo(function DraftSummaryView({
           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" : ""}`}
             >
diff --git a/app/components/draft/ParticipantSelectionDialog.tsx b/app/components/draft/ParticipantSelectionDialog.tsx
index f803da3..72fcfeb 100644
--- a/app/components/draft/ParticipantSelectionDialog.tsx
+++ b/app/components/draft/ParticipantSelectionDialog.tsx
@@ -96,7 +96,6 @@ export function ParticipantSelectionDialog({
             <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)}
diff --git a/app/components/league/OvernightPauseSettings.tsx b/app/components/league/OvernightPauseSettings.tsx
index fce07c0..d04fb98 100644
--- a/app/components/league/OvernightPauseSettings.tsx
+++ b/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,11 +41,26 @@ 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 role="radiogroup" aria-label="Pause mode" 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 (
@@ -53,6 +69,8 @@ export function OvernightPauseSettings({
               type="button"
               role="radio"
               aria-checked={selected}
+              tabIndex={selected ? 0 : -1}
+              data-radio-value={value}
               disabled={disabled}
               onClick={() => onModeChange(value)}
               className={cn(
diff --git a/app/components/league/ScoringPresetPicker.tsx b/app/components/league/ScoringPresetPicker.tsx
index 6501258..9952359 100644
--- a/app/components/league/ScoringPresetPicker.tsx
+++ b/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,13 +72,15 @@ export function ScoringPresetPicker({
   return (
     <div className="space-y-4">
       {/* Preset tabs */}
-      <div role="radiogroup" aria-label="Scoring preset" 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(
diff --git a/app/components/league/TimerModeSelector.tsx b/app/components/league/TimerModeSelector.tsx
index 1e31d56..48ef63c 100644
--- a/app/components/league/TimerModeSelector.tsx
+++ b/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,8 +25,21 @@ 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 role="radiogroup" aria-label="Timer mode" 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 (
@@ -34,6 +48,8 @@ export function TimerModeSelector({ value, onChange, disabled }: TimerModeSelect
             type="button"
             role="radio"
             aria-checked={selected}
+            tabIndex={selected ? 0 : -1}
+            data-radio-value={mode.value}
             onClick={() => onChange(mode.value)}
             disabled={disabled}
             className={cn(
diff --git a/app/components/league/WizardStepper.tsx b/app/components/league/WizardStepper.tsx
index f1a88d7..3f04fb3 100644
--- a/app/components/league/WizardStepper.tsx
+++ b/app/components/league/WizardStepper.tsx
@@ -19,7 +19,7 @@ export function WizardStepper({ currentStep, steps, onStepClick }: WizardStepper
           return (
             <Fragment key={label}>
               {i > 0 && (
-                <li aria-hidden="true" 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")} />
               )}
               <li>
                 <button
diff --git a/app/hooks/useFocusTrap.ts b/app/hooks/useFocusTrap.ts
new file mode 100644
index 0000000..ac2ac6c
--- /dev/null
+++ b/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]);
+}