4bbcac1949
* 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>
215 lines
7.3 KiB
TypeScript
215 lines
7.3 KiB
TypeScript
import {
|
|
isRouteErrorResponse,
|
|
Links,
|
|
Meta,
|
|
Outlet,
|
|
Scripts,
|
|
ScrollRestoration,
|
|
useLocation,
|
|
redirect,
|
|
} from "react-router";
|
|
|
|
import type { Route } from "./+types/root";
|
|
import "./app.css";
|
|
import { auth } from "~/lib/auth.server";
|
|
import { Navbar } from "~/components/navbar";
|
|
import { NavigationProgress } from "~/components/NavigationProgress";
|
|
import { Toaster } from "~/components/ui/sonner";
|
|
import { BracktGradients } from "~/components/ui/BracktGradients";
|
|
import { Footer } from "~/components/marketing/Footer";
|
|
import { findUserById } from "~/models/user";
|
|
import { AlertCircle, FileQuestion, Lock, ShieldOff, ServerCrash } from "lucide-react";
|
|
import logoUrl from "../public/logo.svg?url";
|
|
|
|
// Paths that should never trigger the onboarding redirect.
|
|
// Trailing-slash entries are matched as prefixes; others require exact match or sub-path.
|
|
const ONBOARDING_EXEMPT = ["/onboarding", "/api/", "/admin", "/login", "/register", "/check-email", "/forgot-password", "/reset-password"];
|
|
|
|
export function isOnboardingExempt(pathname: string): boolean {
|
|
return ONBOARDING_EXEMPT.some((p) =>
|
|
p.endsWith("/")
|
|
? pathname.startsWith(p)
|
|
: pathname === p || pathname.startsWith(p + "/")
|
|
);
|
|
}
|
|
|
|
export async function loader({ request }: Route.LoaderArgs) {
|
|
const session = await auth.api.getSession({ headers: request.headers });
|
|
const currentUser = session ? await findUserById(session.user.id) : null;
|
|
const isAdmin = currentUser?.isAdmin ?? false;
|
|
|
|
if (currentUser && !currentUser.username) {
|
|
const { pathname } = new URL(request.url);
|
|
if (!isOnboardingExempt(pathname)) {
|
|
const redirectTo = pathname === "/" ? "" : `?redirectTo=${encodeURIComponent(pathname)}`;
|
|
return redirect(`/onboarding${redirectTo}`);
|
|
}
|
|
}
|
|
|
|
return { isAdmin, currentUser };
|
|
}
|
|
|
|
export const links: Route.LinksFunction = () => [
|
|
{ rel: "icon", href: "/favicon.ico?v=20260402", sizes: "48x48" },
|
|
{ rel: "icon", href: "/favicon.svg?v=20260402", type: "image/svg+xml" },
|
|
{ rel: "icon", href: "/favicon-96x96.png?v=20260402", type: "image/png", sizes: "96x96" },
|
|
{ rel: "apple-touch-icon", href: "/apple-touch-icon.png?v=20260402" },
|
|
{ rel: "manifest", href: "/site.webmanifest?v=20260402" },
|
|
{ rel: "preconnect", href: "https://fonts.googleapis.com" },
|
|
{
|
|
rel: "preconnect",
|
|
href: "https://fonts.gstatic.com",
|
|
crossOrigin: "anonymous",
|
|
},
|
|
{
|
|
rel: "stylesheet",
|
|
href: "https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap",
|
|
},
|
|
];
|
|
|
|
export function Layout({ children }: { children: React.ReactNode }) {
|
|
return (
|
|
<html lang="en" className="dark">
|
|
<head>
|
|
<meta charSet="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<Meta />
|
|
<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 />
|
|
<Scripts />
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|
|
|
|
export default function App({ loaderData }: Route.ComponentProps) {
|
|
const location = useLocation();
|
|
const isDraftRoute = location.pathname.includes('/draft');
|
|
|
|
return (
|
|
<>
|
|
<NavigationProgress />
|
|
{!isDraftRoute && (
|
|
<Navbar
|
|
isAdmin={loaderData?.isAdmin ?? false}
|
|
currentUser={loaderData?.currentUser ?? null}
|
|
/>
|
|
)}
|
|
{isDraftRoute ? (
|
|
<Outlet />
|
|
) : (
|
|
<>
|
|
<main id="main-content">
|
|
<Outlet />
|
|
</main>
|
|
<Footer />
|
|
</>
|
|
)}
|
|
<Toaster />
|
|
</>
|
|
);
|
|
}
|
|
|
|
export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
|
|
let status = 500;
|
|
let title = "Something Went Wrong";
|
|
let message = "An unexpected error occurred. Please try again later.";
|
|
let stack: string | undefined;
|
|
let showSignInHint = false;
|
|
if (isRouteErrorResponse(error)) {
|
|
status = error.status;
|
|
switch (error.status) {
|
|
case 401:
|
|
title = "Sign In Required";
|
|
message = "You need to be signed in to access this page.";
|
|
showSignInHint = true;
|
|
break;
|
|
case 403:
|
|
title = "Access Denied";
|
|
message = "You don't have permission to view this page.";
|
|
break;
|
|
case 404:
|
|
title = "Page Not Found";
|
|
message = "The page you're looking for doesn't exist or has been moved.";
|
|
break;
|
|
default:
|
|
title = `Error ${error.status}`;
|
|
message =
|
|
typeof error.data === "string" && error.data
|
|
? error.data
|
|
: error.statusText || "Something went wrong.";
|
|
}
|
|
} else if (error instanceof Error) {
|
|
title = "Unexpected Error";
|
|
message = import.meta.env.DEV ? error.message : "An unexpected error occurred. Please try again later.";
|
|
stack = import.meta.env.DEV ? error.stack : undefined;
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-background text-foreground flex flex-col">
|
|
<header className="border-b border-border/40 bg-background/95 backdrop-blur">
|
|
<div className="flex h-16 items-center px-4 md:px-6 lg:px-8">
|
|
<a href="/">
|
|
<img src={logoUrl} alt="Brackt" className="h-6" />
|
|
</a>
|
|
</div>
|
|
</header>
|
|
|
|
<main className="flex-1 flex items-center justify-center p-6">
|
|
<div className="max-w-md w-full text-center space-y-6">
|
|
<div className="text-8xl font-bold text-muted-foreground/40 select-none">
|
|
{status}
|
|
</div>
|
|
|
|
<div className="flex justify-center">
|
|
{statusIcon(status)}
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
|
|
<p className="text-muted-foreground">{message}</p>
|
|
</div>
|
|
|
|
<div className="flex justify-center pt-2">
|
|
<a
|
|
href="/"
|
|
className="inline-flex items-center justify-center rounded-md text-sm font-medium bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 py-2 transition-colors"
|
|
>
|
|
{showSignInHint ? "Go to Home Page to Sign In" : "Go Home"}
|
|
</a>
|
|
</div>
|
|
|
|
{stack && (
|
|
<details className="text-left mt-8 border border-border rounded-md overflow-hidden">
|
|
<summary className="cursor-pointer text-sm text-muted-foreground px-4 py-3 hover:bg-muted/50">
|
|
Stack trace (development only)
|
|
</summary>
|
|
<pre className="p-4 overflow-x-auto text-xs text-muted-foreground border-t border-border">
|
|
<code>{stack}</code>
|
|
</pre>
|
|
</details>
|
|
)}
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function statusIcon(status: number) {
|
|
const cls = "h-14 w-14 text-muted-foreground";
|
|
if (status === 401) return <Lock className={cls} />;
|
|
if (status === 403) return <ShieldOff className={cls} />;
|
|
if (status === 404) return <FileQuestion className={cls} />;
|
|
if (status >= 500) return <ServerCrash className={cls} />;
|
|
return <AlertCircle className={cls} />;
|
|
}
|