keyboard radiogroup, modal focus trap, nav session hydration

src/components/ui/modal.tsx

@@ -16,6 +16,9 @@ interface Props {
   ariaLabel?: string;
 }
 
+const FOCUSABLE =
+  'a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex="-1"])';
+
 /**
  * Portal-based modal.
  *
@@ -25,45 +28,86 @@ interface Props {
  * ancestor's containing block, not the viewport, when ANY ancestor
  * has a `transform`, `perspective`, or `filter` applied. Our
  * `animate-in` utility sets `transform: translateY(0)` on a lot of
- * dashboard/tenant-detail containers (because of the fade-up
- * animation, which uses `animation-fill-mode: both` to keep the
- * transform on after the animation finishes). That broke modals
- * rendered as in-place children — they centred to the panel they
- * lived in, not to the page.
+ * dashboard/tenant-detail containers, which broke modals rendered as
+ * in-place children — they centred to the panel they lived in, not to
+ * the page. Rendering at `document.body` via `createPortal` escapes
+ * every containing-block ancestor and gives us true viewport coords.
  *
- * Rendering at `document.body` via `createPortal` escapes every
- * containing-block ancestor and gives us true viewport coordinates.
- *
- * UX details
- * ----------
- * - Backdrop click triggers `onClose`. (Bubbling check: only fires
- *   when the click target IS the backdrop, not the panel inside.)
- * - Escape key triggers `onClose`. Standard modal expectation.
- * - `body` overflow is locked while open so background content
- *   doesn't scroll behind the modal.
- * - Renders nothing on first paint server-side, then mounts on
- *   client. `useEffect` gating ensures `document.body` is available;
- *   without it Next.js SSR would throw on `document` reference.
+ * UX / a11y details
+ * -----------------
+ * - Backdrop click triggers `onClose` (only when the click target IS
+ *   the backdrop, not the panel inside).
+ * - Escape triggers `onClose`.
+ * - `body` overflow is locked while open so background content doesn't
+ *   scroll behind the modal.
+ * - Focus is moved into the panel on open, trapped within it while open
+ *   (Tab / Shift+Tab cycle), and restored to the previously focused
+ *   element on close — so keyboard and screen-reader users can't tab
+ *   out to the inert page behind the dialog.
  */
 export function Modal({ open, onClose, children, ariaLabel }: Props) {
   const closeRef = useRef(onClose);
   closeRef.current = onClose;
+  const panelRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     if (!open) return;
 
-    // Lock background scroll. Restore on unmount/close.
+    // Remember what had focus so we can restore it on close.
+    const previouslyFocused = document.activeElement as HTMLElement | null;
+
+    // Lock background scroll.
     const previousOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
 
+    // Move focus into the dialog — first focusable element, else the
+    // panel itself (it carries tabIndex={-1}).
+    const panel = panelRef.current;
+    const focusables = panel
+      ? Array.from(panel.querySelectorAll<HTMLElement>(FOCUSABLE))
+      : [];
+    (focusables[0] ?? panel)?.focus();
+
     const onKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") closeRef.current();
+      if (e.key === "Escape") {
+        closeRef.current();
+        return;
+      }
+      if (e.key !== "Tab" || !panel) return;
+
+      // Re-query each time — modal content can change between tabs.
+      const items = Array.from(
+        panel.querySelectorAll<HTMLElement>(FOCUSABLE)
+      ).filter((el) => el.offsetParent !== null || el === document.activeElement);
+      if (items.length === 0) {
+        e.preventDefault();
+        panel.focus();
+        return;
+      }
+      const first = items[0];
+      const last = items[items.length - 1];
+      const active = document.activeElement;
+
+      if (e.shiftKey) {
+        if (active === first || active === panel) {
+          e.preventDefault();
+          last.focus();
+        }
+      } else if (active === last) {
+        e.preventDefault();
+        first.focus();
+      }
     };
+
     window.addEventListener("keydown", onKey);
 
     return () => {
       document.body.style.overflow = previousOverflow;
       window.removeEventListener("keydown", onKey);
+      // Restore focus to the trigger (if it's still in the document).
+      if (previouslyFocused && document.contains(previouslyFocused)) {
+        previouslyFocused.focus();
+      }
     };
   }, [open]);
 
@@ -72,15 +116,19 @@ export function Modal({ open, onClose, children, ariaLabel }: Props) {
 
   return createPortal(
     <div
-      role="dialog"
-      aria-modal="true"
-      aria-label={ariaLabel}
       className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm"
       onClick={(e) => {
         if (e.target === e.currentTarget) onClose();
       }}
     >
-      <div className="bg-surface-1 border border-border rounded-xl p-6 max-w-md w-full max-h-[90vh] overflow-y-auto">
+      <div
+        ref={panelRef}
+        role="dialog"
+        aria-modal="true"
+        aria-label={ariaLabel}
+        tabIndex={-1}
+        className="bg-surface-1 border border-border rounded-xl p-6 max-w-md w-full max-h-[90vh] overflow-y-auto focus:outline-none"
+      >
         {children}
       </div>
     </div>,