pieced/pieced-portal
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

keyboard radiogroup, modal focus trap, nav session hydration

Browse Source
This commit is contained in:
admin
2026-05-29 22:46:03 +02:00
parent bff3aad1ca
commit 93842bec8e
4 changed files with 144 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/[locale]/layout.tsx
View File

@@ -3,6 +3,7 @@ import { NextIntlClientProvider } from "next-intl";
import { getMessages, getTranslations } from "next-intl/server";
import { routing } from "@/i18n/routing";
import { notFound } from "next/navigation";
import { auth } from "@/lib/auth";
import { NavShell } from "@/components/layout/nav-shell";
export function generateStaticParams() {
@@ -44,12 +45,13 @@ export default async function LocaleLayout({
}
const messages = await getMessages();
const session = await auth();
return (
<html lang={locale} className="dark">
<body className="min-h-screen bg-surface-0 text-text-primary antialiased">
<NextIntlClientProvider messages={messages}>
<NavShell>{children}</NavShell>
<NavShell session={session}>{children}</NavShell>
</NextIntlClientProvider>
</body>
</html>

77
src/app/[locale]/register/page.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { useState } from "react";
import { useState, useRef, forwardRef } from "react";
import { useTranslations } from "next-intl";
import { useRouter, Link } from "@/i18n/navigation";
import { Card } from "@/components/ui/card";
@@ -50,6 +50,30 @@ export default function RegisterPage() {
const [state, setState] = useState<FormState>("idle");
const [error, setError] = useState("");
// Radiogroup keyboard support. `role="radio"` requires roving
// tabindex (one tab stop) + arrow-key navigation between options —
// native buttons don't move focus on arrows. The selected card is
// the tab stop; when nothing is selected yet the first card is
// focusable so keyboard users can enter the group.
const TYPES: AccountType[] = ["personal", "company"];
const cardRefs = useRef<(HTMLButtonElement | null)[]>([]);
const rovingTabIndex = (type: AccountType, index: number) =>
accountType === type || (accountType === null && index === 0) ? 0 : -1;
const handleCardKeyDown = (e: React.KeyboardEvent, index: number) => {
let next: number | null = null;
if (e.key === "ArrowRight" || e.key === "ArrowDown") {
next = (index + 1) % TYPES.length;
} else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
next = (index - 1 + TYPES.length) % TYPES.length;
}
if (next === null) return;
e.preventDefault();
setAccountType(TYPES[next]);
cardRefs.current[next]?.focus();
};
const isPersonal = accountType === "personal";
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -146,8 +170,13 @@ export default function RegisterPage() {
className="grid grid-cols-2 gap-3 mb-6 animate-in animate-in-delay-1"
>
<AccountTypeCard
ref={(el) => {
cardRefs.current[0] = el;
}}
selected={accountType === "personal"}
onClick={() => setAccountType("personal")}
tabIndex={rovingTabIndex("personal", 0)}
onKeyDown={(e) => handleCardKeyDown(e, 0)}
label={t("personalCardTitle")}
description={t("personalCardDescription")}
icon={
@@ -168,8 +197,13 @@ export default function RegisterPage() {
}
/>
<AccountTypeCard
ref={(el) => {
cardRefs.current[1] = el;
}}
selected={accountType === "company"}
onClick={() => setAccountType("company")}
tabIndex={rovingTabIndex("company", 1)}
onKeyDown={(e) => handleCardKeyDown(e, 1)}
label={t("companyCardTitle")}
description={t("companyCardDescription")}
icon={
@@ -305,41 +339,42 @@ export default function RegisterPage() {
* and text colours intensify when selected to give a clear "this one
* is on" signal beyond just the border colour.
*/
function AccountTypeCard({
selected,
onClick,
label,
description,
icon,
}: {
selected: boolean;
onClick: () => void;
label: string;
description: string;
icon: React.ReactNode;
}) {
const AccountTypeCard = forwardRef<
HTMLButtonElement,
{
selected: boolean;
onClick: () => void;
label: string;
description: string;
icon: React.ReactNode;
tabIndex: number;
onKeyDown: (e: React.KeyboardEvent) => void;
}
>(function AccountTypeCard(
{ selected, onClick, label, description, icon, tabIndex, onKeyDown },
ref
) {
return (
<button
ref={ref}
type="button"
role="radio"
aria-checked={selected}
tabIndex={tabIndex}
onClick={onClick}
onKeyDown={onKeyDown}
className={`text-left rounded-xl border p-4 transition-colors cursor-pointer focus:outline-none focus:ring-2 focus:ring-accent/40 ${
selected
? "border-accent bg-accent/10"
: "border-border bg-surface-2 hover:border-accent/40 hover:bg-surface-3/30"
}`}
>
<div
className={`mb-2 ${
selected ? "text-accent" : "text-text-muted"
}`}
>
<div className={`mb-2 ${selected ? "text-accent" : "text-text-muted"}`}>
{icon}
</div>
<div
className={`text-sm font-semibold mb-0.5 ${
selected ? "text-text-primary" : "text-text-primary"
selected ? "text-text-primary" : "text-text-secondary"
}`}
>
{label}
@@ -347,4 +382,4 @@ function AccountTypeCard({
<div className="text-xs text-text-muted leading-snug">{description}</div>
</button>
);
}
});

15
src/components/layout/nav-shell.tsx
View File

@@ -6,6 +6,7 @@ import { signOut, useSession } from "next-auth/react";
import { usePathname } from "@/i18n/navigation";
import { Link } from "@/i18n/navigation";
import { SessionProvider } from "next-auth/react";
import type { Session } from "next-auth";
import { LanguageSwitcher } from "@/components/ui/language-switcher";
function NavBar() {
@@ -211,9 +212,19 @@ function NavLink({
);
}
export function NavShell({ children }: { children: React.ReactNode }) {
export function NavShell({
children,
session,
}: {
children: React.ReactNode;
// Server-resolved session passed down from the locale layout. Seeding
// SessionProvider with it means useSession() is populated on the first
// client render, so the nav links render immediately instead of
// popping in after the client-side session fetch (CLS / flash).
session: Session | null;
}) {
return (
<SessionProvider>
<SessionProvider session={session}>
<NavBar />
<main className="mx-auto max-w-6xl px-5 py-8">{children}</main>
</SessionProvider>

96
src/components/ui/modal.tsx
View File

@@ -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>,