brackt/app/routes/admin.tsx
Claude b47b3d2eb5
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
2026-05-17 16:11:44 +00:00

105 lines
3.2 KiB
TypeScript

import { Link, Outlet, redirect } from "react-router";
import { auth } from "~/lib/auth.server";
import type { Route } from "./+types/admin";
import { isUserAdmin } from "~/models/user";
import { Button } from "~/components/ui/button";
import {
LayoutDashboard,
Trophy,
Calendar,
FolderKanban,
RefreshCw,
Award,
Activity,
Users,
} from "lucide-react";
export function meta(): Route.MetaDescriptors {
return [{ title: "Admin - Brackt" }];
}
export async function loader(args: Route.LoaderArgs) {
const session = await auth.api.getSession({ headers: args.request.headers });
const userId = session?.user.id ?? null;
if (!userId) {
throw redirect("/");
}
const isAdmin = await isUserAdmin(userId);
if (!isAdmin) {
throw redirect("/");
}
return { isAdmin };
}
export default function AdminLayout() {
return (
<div className="flex min-h-screen">
{/* Sidebar */}
<aside className="w-64 border-r bg-muted/40">
<div className="flex h-16 items-center border-b px-6">
<h2 className="text-lg font-semibold">Admin Panel</h2>
</div>
<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" />
Dashboard
</Link>
</Button>
<Button variant="ghost" className="w-full justify-start" asChild>
<Link to="/admin/sports">
<Trophy className="mr-2 h-4 w-4" />
Sports
</Link>
</Button>
<Button variant="ghost" className="w-full justify-start" asChild>
<Link to="/admin/sports-seasons">
<Calendar className="mr-2 h-4 w-4" />
Sports Seasons
</Link>
</Button>
<Button variant="ghost" className="w-full justify-start" asChild>
<Link to="/admin/simulators">
<Activity className="mr-2 h-4 w-4" />
Simulators
</Link>
</Button>
<Button variant="ghost" className="w-full justify-start" asChild>
<Link to="/admin/tournaments">
<Award className="mr-2 h-4 w-4" />
Tournaments
</Link>
</Button>
<Button variant="ghost" className="w-full justify-start" asChild>
<Link to="/admin/templates">
<FolderKanban className="mr-2 h-4 w-4" />
Season Templates
</Link>
</Button>
<Button variant="ghost" className="w-full justify-start" asChild>
<Link to="/admin/users">
<Users className="mr-2 h-4 w-4" />
Users
</Link>
</Button>
<div className="border-t my-2" />
<Button variant="ghost" className="w-full justify-start" asChild>
<Link to="/admin/data-sync">
<RefreshCw className="mr-2 h-4 w-4" />
Data Sync
</Link>
</Button>
</nav>
</aside>
{/* Main Content */}
<main className="flex-1">
<Outlet />
</main>
</div>
);
}