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
This commit is contained in:
Claude
parent
d468385d90
commit
b47b3d2eb5
30 changed files with 289 additions and 133 deletions
|
|
@ -69,7 +69,7 @@ html {
|
|||
--secondary: #1c1f26;
|
||||
--secondary-foreground: #ffffff;
|
||||
--muted: #1c1f26;
|
||||
--muted-foreground: rgb(255 255 255 / 55%);
|
||||
--muted-foreground: rgb(255 255 255 / 62%);
|
||||
--accent: #2ce1c1;
|
||||
--accent-foreground: #14171e;
|
||||
--destructive: oklch(0.65 0.22 25);
|
||||
|
|
|
|||
|
|
@ -201,7 +201,7 @@ function AutodraftOptions({
|
|||
const isDisabled = isMyTurn;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col rounded-lg border overflow-hidden">
|
||||
<div role="radiogroup" aria-label="Autodraft setting" className="flex flex-col rounded-lg border overflow-hidden">
|
||||
{OPTION_ORDER.map((state) => {
|
||||
const { label } = OPTIONS[state];
|
||||
const isActive = localState === state;
|
||||
|
|
@ -209,6 +209,8 @@ function AutodraftOptions({
|
|||
<button
|
||||
key={state}
|
||||
type="button"
|
||||
role="radio"
|
||||
aria-checked={isActive}
|
||||
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)} ${
|
||||
|
|
@ -217,7 +219,7 @@ function AutodraftOptions({
|
|||
>
|
||||
<span className="text-xs font-medium">{label}</span>
|
||||
{isActive && (
|
||||
<Check className={`h-3.5 w-3.5 shrink-0 ${getCheckClassName(state)}`} />
|
||||
<Check className={`h-3.5 w-3.5 shrink-0 ${getCheckClassName(state)}`} aria-hidden="true" />
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
|
|
@ -417,7 +419,7 @@ export function AutodraftSettings({
|
|||
</Popover>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col rounded-lg border overflow-hidden">
|
||||
<div role="radiogroup" aria-label="Autodraft setting" className="flex flex-col rounded-lg border overflow-hidden">
|
||||
{OPTION_ORDER.map((state) => {
|
||||
const { label } = OPTIONS[state];
|
||||
const isActive = localState === state;
|
||||
|
|
@ -425,6 +427,8 @@ export function AutodraftSettings({
|
|||
<button
|
||||
key={state}
|
||||
type="button"
|
||||
role="radio"
|
||||
aria-checked={isActive}
|
||||
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)} ${
|
||||
|
|
@ -433,7 +437,7 @@ export function AutodraftSettings({
|
|||
>
|
||||
<span className="text-xs font-medium">{label}</span>
|
||||
{isActive && (
|
||||
<Check className={`h-3.5 w-3.5 shrink-0 ${getCheckClassName(state)}`} />
|
||||
<Check className={`h-3.5 w-3.5 shrink-0 ${getCheckClassName(state)}`} aria-hidden="true" />
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@ export function NotificationSettings({
|
|||
return (
|
||||
<>
|
||||
<Switch
|
||||
aria-label="Enable notifications"
|
||||
checked={enabled}
|
||||
onCheckedChange={onEnabledChange}
|
||||
disabled={permissionState === "denied"}
|
||||
|
|
|
|||
|
|
@ -79,21 +79,21 @@ export function StandingsTable({
|
|||
if (change > 0) {
|
||||
return (
|
||||
<div className="flex items-center gap-1 text-emerald-400">
|
||||
<TrendingUp className="h-3 w-3" />
|
||||
<TrendingUp className="h-3 w-3" aria-hidden="true" />
|
||||
<span className="text-xs">+{change}</span>
|
||||
</div>
|
||||
);
|
||||
} else if (change < 0) {
|
||||
return (
|
||||
<div className="flex items-center gap-1 text-coral-accent">
|
||||
<TrendingDown className="h-3 w-3" />
|
||||
<TrendingDown className="h-3 w-3" aria-hidden="true" />
|
||||
<span className="text-xs">{change}</span>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div className="flex items-center gap-1 text-muted-foreground">
|
||||
<Minus className="h-3 w-3" />
|
||||
<Minus className="h-3 w-3" aria-hidden="true" />
|
||||
<span className="text-xs">-</span>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -101,26 +101,26 @@ export function StandingsTable({
|
|||
};
|
||||
|
||||
return (
|
||||
<Table>
|
||||
<Table aria-label="Standings">
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="w-16">Rank</TableHead>
|
||||
{showMovement && <TableHead className="w-20">Change</TableHead>}
|
||||
<TableHead>Team</TableHead>
|
||||
<TableHead className="text-right">Total Points</TableHead>
|
||||
<TableHead scope="col" className="w-16">Rank</TableHead>
|
||||
{showMovement && <TableHead scope="col" className="w-20">Change</TableHead>}
|
||||
<TableHead scope="col">Team</TableHead>
|
||||
<TableHead scope="col" className="text-right">Total Points</TableHead>
|
||||
{showPlacementBreakdown && (
|
||||
<>
|
||||
<TableHead className="text-center w-12" title="1st place finishes">🥇</TableHead>
|
||||
<TableHead className="text-center w-12" title="2nd place finishes">🥈</TableHead>
|
||||
<TableHead className="text-center w-12" title="3rd place finishes">🥉</TableHead>
|
||||
<TableHead className="text-center w-12" title="4th place finishes">4th</TableHead>
|
||||
<TableHead className="text-center w-12" title="5th place finishes">5th</TableHead>
|
||||
<TableHead className="text-center w-12" title="6th place finishes">6th</TableHead>
|
||||
<TableHead className="text-center w-12" title="7th place finishes">7th</TableHead>
|
||||
<TableHead className="text-center w-12" title="8th place finishes">8th</TableHead>
|
||||
<TableHead scope="col" aria-label="1st place finishes" className="text-center w-12"><span aria-hidden="true">🥇</span></TableHead>
|
||||
<TableHead scope="col" aria-label="2nd place finishes" className="text-center w-12"><span aria-hidden="true">🥈</span></TableHead>
|
||||
<TableHead scope="col" aria-label="3rd place finishes" className="text-center w-12"><span aria-hidden="true">🥉</span></TableHead>
|
||||
<TableHead scope="col" className="text-center w-12">4th</TableHead>
|
||||
<TableHead scope="col" className="text-center w-12">5th</TableHead>
|
||||
<TableHead scope="col" className="text-center w-12">6th</TableHead>
|
||||
<TableHead scope="col" className="text-center w-12">7th</TableHead>
|
||||
<TableHead scope="col" className="text-center w-12">8th</TableHead>
|
||||
</>
|
||||
)}
|
||||
<TableHead className="text-right">Remaining</TableHead>
|
||||
<TableHead scope="col" className="text-right">Remaining</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ export function UserMenu({
|
|||
return (
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button variant="ghost" className="relative h-9 w-9 p-0 rounded-none">
|
||||
<Button variant="ghost" aria-label={`User menu for ${name ?? email}`} className="relative h-9 w-9 p-0 rounded-none">
|
||||
<UserAvatar
|
||||
userId={userId}
|
||||
name={name}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import { useEffect, useRef } from "react";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import { Card } from "~/components/ui/card";
|
||||
|
||||
|
|
@ -8,12 +9,47 @@ interface 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();
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-[100]">
|
||||
<div
|
||||
ref={dialogRef}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="auth-recovery-title"
|
||||
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">
|
||||
<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">
|
||||
|
|
@ -34,7 +70,7 @@ export function AuthRecoveryOverlay({
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold mb-2">Session Expired</h2>
|
||||
<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.
|
||||
|
|
|
|||
|
|
@ -339,7 +339,9 @@ export const AvailableParticipantsSection = memo(function AvailableParticipantsS
|
|||
<div className="px-4 pt-4 pb-2 flex-shrink-0">
|
||||
<div className="flex flex-col gap-2 md:flex-row md:flex-wrap md:items-center">
|
||||
<div className="flex gap-2 md:contents">
|
||||
<label htmlFor="available-participants-search" className="sr-only">Search participants</label>
|
||||
<input
|
||||
id="available-participants-search"
|
||||
type="text"
|
||||
placeholder="Search participants..."
|
||||
value={searchQuery}
|
||||
|
|
@ -472,10 +474,10 @@ export const AvailableParticipantsSection = memo(function AvailableParticipantsS
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div 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 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>
|
||||
|
||||
<div ref={parentRef} className="flex-1 overflow-y-auto">
|
||||
|
|
@ -601,11 +603,11 @@ export const AvailableParticipantsSection = memo(function AvailableParticipantsS
|
|||
size="sm"
|
||||
className="min-h-[44px] min-w-[44px]"
|
||||
onClick={() => onToggleWatchlist(participant.id)}
|
||||
title={isWatched ? "Remove from watchlist" : "Add to watchlist"}
|
||||
aria-label={isWatched ? "Remove from watchlist" : "Add to watchlist"}
|
||||
>
|
||||
{isWatched
|
||||
? <EyeOff className="h-4 w-4 text-emerald-400" />
|
||||
: <Eye className="h-4 w-4" />}
|
||||
? <EyeOff className="h-4 w-4 text-emerald-400" aria-hidden="true" />
|
||||
: <Eye className="h-4 w-4" aria-hidden="true" />}
|
||||
</Button>
|
||||
{!isInQueue ? (
|
||||
<Button
|
||||
|
|
@ -613,10 +615,10 @@ export const AvailableParticipantsSection = memo(function AvailableParticipantsS
|
|||
size="sm"
|
||||
className="min-h-[44px] min-w-[44px]"
|
||||
onClick={() => onAddToQueue(participant.id)}
|
||||
title={!isEligible ? ineligibleReason?.message : "Add to queue"}
|
||||
aria-label={!isEligible ? (ineligibleReason?.message ?? "Add to queue") : "Add to queue"}
|
||||
disabled={!isEligible}
|
||||
>
|
||||
<ListPlus className="h-4 w-4" />
|
||||
<ListPlus className="h-4 w-4" aria-hidden="true" />
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
|
|
@ -627,9 +629,9 @@ export const AvailableParticipantsSection = memo(function AvailableParticipantsS
|
|||
const queueId = queueMap.get(participant.id);
|
||||
if (queueId) onRemoveFromQueue(queueId);
|
||||
}}
|
||||
title="Remove from queue"
|
||||
aria-label="Remove from queue"
|
||||
>
|
||||
<ListX className="h-4 w-4" />
|
||||
<ListX className="h-4 w-4" aria-hidden="true" />
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
|
|
@ -638,12 +640,12 @@ export const AvailableParticipantsSection = memo(function AvailableParticipantsS
|
|||
className="min-h-[44px]"
|
||||
onClick={() => onMakePick(participant.id)}
|
||||
disabled={!canPick || !isEligible}
|
||||
title={
|
||||
aria-label={
|
||||
!canPick
|
||||
? "Not your turn"
|
||||
? "Draft (not your turn)"
|
||||
: !isEligible
|
||||
? ineligibleReason?.message
|
||||
: undefined
|
||||
? (ineligibleReason?.message ?? "Draft (ineligible)")
|
||||
: `Draft ${participant.name}`
|
||||
}
|
||||
>
|
||||
Draft
|
||||
|
|
@ -720,25 +722,21 @@ export const AvailableParticipantsSection = memo(function AvailableParticipantsS
|
|||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => onToggleWatchlist(participant.id)}
|
||||
title={isWatched ? "Remove from watchlist" : "Add to watchlist"}
|
||||
aria-label={isWatched ? "Remove from watchlist" : "Add to watchlist"}
|
||||
>
|
||||
{isWatched
|
||||
? <EyeOff className="h-4 w-4 text-emerald-400" />
|
||||
: <Eye className="h-4 w-4" />}
|
||||
? <EyeOff className="h-4 w-4 text-emerald-400" aria-hidden="true" />
|
||||
: <Eye className="h-4 w-4" aria-hidden="true" />}
|
||||
</Button>
|
||||
{!isInQueue ? (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => onAddToQueue(participant.id)}
|
||||
title={
|
||||
!isEligible
|
||||
? ineligibleReason?.message
|
||||
: "Add to queue"
|
||||
}
|
||||
aria-label={!isEligible ? (ineligibleReason?.message ?? "Add to queue") : "Add to queue"}
|
||||
disabled={!isEligible}
|
||||
>
|
||||
<ListPlus className="h-4 w-4" />
|
||||
<ListPlus className="h-4 w-4" aria-hidden="true" />
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
|
|
@ -748,9 +746,9 @@ export const AvailableParticipantsSection = memo(function AvailableParticipantsS
|
|||
const queueId = queueMap.get(participant.id);
|
||||
if (queueId) onRemoveFromQueue(queueId);
|
||||
}}
|
||||
title="Remove from queue"
|
||||
aria-label="Remove from queue"
|
||||
>
|
||||
<ListX className="h-4 w-4" />
|
||||
<ListX className="h-4 w-4" aria-hidden="true" />
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
|
|
@ -758,12 +756,12 @@ export const AvailableParticipantsSection = memo(function AvailableParticipantsS
|
|||
size="sm"
|
||||
onClick={() => onMakePick(participant.id)}
|
||||
disabled={!canPick || !isEligible}
|
||||
title={
|
||||
aria-label={
|
||||
!canPick
|
||||
? "Not your turn"
|
||||
? "Draft (not your turn)"
|
||||
: !isEligible
|
||||
? ineligibleReason?.message
|
||||
: undefined
|
||||
? (ineligibleReason?.message ?? "Draft (ineligible)")
|
||||
: `Draft ${participant.name}`
|
||||
}
|
||||
>
|
||||
Draft
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import { useEffect, useRef } from "react";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import { Card } from "~/components/ui/card";
|
||||
|
||||
|
|
@ -14,12 +15,56 @@ export function ConnectionOverlay({
|
|||
connectionError,
|
||||
isSyncing,
|
||||
}: ConnectionOverlayProps) {
|
||||
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();
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
const statusMessage = connectionError
|
||||
? connectionError
|
||||
: isSyncing
|
||||
? "Reconnected. Syncing the latest draft state..."
|
||||
: isReconnecting
|
||||
? "Lost connection to the draft server. Attempting to reconnect..."
|
||||
: "Please wait while we connect you to the live draft room.";
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-[100]">
|
||||
<div
|
||||
ref={dialogRef}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
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">
|
||||
<div className="flex flex-col items-center gap-6">
|
||||
{/* Spinner or Error Icon */}
|
||||
|
|
@ -49,7 +94,7 @@ export function ConnectionOverlay({
|
|||
|
||||
{/* Title */}
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold mb-2">
|
||||
<h2 id={titleId} className="text-2xl font-bold mb-2">
|
||||
{connectionError
|
||||
? "Connection Error"
|
||||
: isSyncing
|
||||
|
|
@ -59,17 +104,7 @@ export function ConnectionOverlay({
|
|||
: "Connecting to Draft"}
|
||||
</h2>
|
||||
|
||||
<p className="text-muted-foreground">
|
||||
{connectionError ? (
|
||||
connectionError
|
||||
) : isSyncing ? (
|
||||
"Reconnected. Syncing the latest draft state..."
|
||||
) : isReconnecting ? (
|
||||
"Lost connection to the draft server. Attempting to reconnect..."
|
||||
) : (
|
||||
"Please wait while we connect you to the live draft room."
|
||||
)}
|
||||
</p>
|
||||
<p className="text-muted-foreground">{statusMessage}</p>
|
||||
</div>
|
||||
|
||||
{/* Action Button (only on persistent error) */}
|
||||
|
|
@ -85,16 +120,19 @@ export function ConnectionOverlay({
|
|||
|
||||
{/* Loading Dots */}
|
||||
{!connectionError && (
|
||||
<div className="flex gap-1.5">
|
||||
<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" }}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -73,13 +73,15 @@ export const DraftSummaryView = memo(function DraftSummaryView({
|
|||
|
||||
return (
|
||||
<div className="w-full h-full overflow-auto">
|
||||
<div className="grid w-full" style={{ gridTemplateColumns: gridCols }}>
|
||||
<div role="table" aria-label="Draft summary by sport and team" className="grid w-full" style={{ gridTemplateColumns: gridCols }}>
|
||||
|
||||
{/* Header row */}
|
||||
<div 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="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">
|
||||
Sport
|
||||
</div>
|
||||
<div 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" 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">
|
||||
Total
|
||||
</div>
|
||||
{draftSlots.map((slot, index) => {
|
||||
|
|
@ -89,6 +91,8 @@ export const DraftSummaryView = memo(function DraftSummaryView({
|
|||
const flexesExhausted = flexPicksAvailable > 0 && used >= flexPicksAvailable;
|
||||
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" : ""}`}
|
||||
>
|
||||
|
|
@ -113,18 +117,22 @@ export const DraftSummaryView = memo(function DraftSummaryView({
|
|||
</div>
|
||||
);
|
||||
})}
|
||||
</div>{/* end header row */}
|
||||
</div>{/* end rowgroup */}
|
||||
|
||||
{/* Data rows */}
|
||||
<div role="rowgroup">
|
||||
{sports.map((sport, sportIndex) => {
|
||||
const isLastRow = sportIndex === sports.length - 1;
|
||||
const { total: sportTotal, teams: sportTeamCount } =
|
||||
sportStats.get(sport.id) ?? { total: 0, teams: 0 };
|
||||
return (
|
||||
<Fragment key={sport.id}>
|
||||
<div className={`sticky left-0 z-10 bg-muted border-r border-border px-3 py-2.5 font-medium text-sm whitespace-nowrap ${!isLastRow ? "border-b" : ""}`}>
|
||||
<div role="row" className="contents">
|
||||
<div role="rowheader" className={`sticky left-0 z-10 bg-muted border-r border-border px-3 py-2.5 font-medium text-sm whitespace-nowrap ${!isLastRow ? "border-b" : ""}`}>
|
||||
{sport.name}
|
||||
</div>
|
||||
<div className={`border-r border-border px-2 py-2.5 text-center bg-muted/20 ${!isLastRow ? "border-b" : ""}`}>
|
||||
<div role="cell" className={`border-r border-border px-2 py-2.5 text-center bg-muted/20 ${!isLastRow ? "border-b" : ""}`}>
|
||||
{sportTotal > 0 ? (
|
||||
<>
|
||||
<div className="text-sm font-bold tabular-nums">{sportTotal}</div>
|
||||
|
|
@ -140,6 +148,7 @@ export const DraftSummaryView = memo(function DraftSummaryView({
|
|||
const isFlex = count >= 2;
|
||||
return (
|
||||
<div
|
||||
role="cell"
|
||||
key={`${slot.team.id}-${sport.id}`}
|
||||
className={`border-border px-3 py-2.5 text-center ${isFlex ? "bg-amber-500/10" : "bg-background"} ${!isLastRow ? "border-b" : ""} ${!isLast ? "border-r" : ""}`}
|
||||
>
|
||||
|
|
@ -153,9 +162,11 @@ export const DraftSummaryView = memo(function DraftSummaryView({
|
|||
</div>
|
||||
);
|
||||
})}
|
||||
</div>{/* end row */}
|
||||
</Fragment>
|
||||
);
|
||||
})}
|
||||
</div>{/* end rowgroup */}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -84,14 +84,19 @@ export function ParticipantSelectionDialog({
|
|||
|
||||
<div className="px-6 pb-4">
|
||||
<div className="flex gap-2 mb-4">
|
||||
<label htmlFor="participant-dialog-search" className="sr-only">Search participants</label>
|
||||
<input
|
||||
id="participant-dialog-search"
|
||||
type="text"
|
||||
placeholder="Search participants..."
|
||||
className="flex-1 px-3 py-2 border rounded-md text-base md:text-sm bg-background text-foreground"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
/>
|
||||
<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)}
|
||||
|
|
|
|||
|
|
@ -31,6 +31,7 @@ export const RecentPicksFeed = memo(function RecentPicksFeed({ picks }: { picks:
|
|||
className="flex items-center justify-between w-full mb-0.5 py-0.5"
|
||||
onClick={() => setIsExpanded((prev) => !prev)}
|
||||
aria-expanded={isExpanded}
|
||||
aria-controls="recent-picks-list"
|
||||
aria-label="Toggle latest picks"
|
||||
>
|
||||
<p className="text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/60">Latest Picks</p>
|
||||
|
|
@ -39,7 +40,7 @@ export const RecentPicksFeed = memo(function RecentPicksFeed({ picks }: { picks:
|
|||
/>
|
||||
</button>
|
||||
{isExpanded && (
|
||||
<div className="flex flex-col gap-1 mt-0.5">
|
||||
<div id="recent-picks-list" aria-live="polite" aria-label="Latest picks" className="flex flex-col gap-1 mt-0.5">
|
||||
{picks.length === 0 ? (
|
||||
<p className="text-xs text-muted-foreground py-1">No picks yet</p>
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -39,10 +39,11 @@ export function TimeBankAdjustmentDialog({
|
|||
</DialogHeader>
|
||||
|
||||
<div className="flex flex-col gap-4 py-2">
|
||||
<div className="flex gap-2">
|
||||
<div role="group" aria-label="Adjustment direction" className="flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onDirectionChange("add")}
|
||||
aria-pressed={direction === "add"}
|
||||
className={`flex-1 py-2 rounded-md border text-sm font-medium transition-colors ${
|
||||
direction === "add"
|
||||
? "bg-emerald-500/20 border-emerald-500 text-emerald-400"
|
||||
|
|
@ -54,6 +55,7 @@ export function TimeBankAdjustmentDialog({
|
|||
<button
|
||||
type="button"
|
||||
onClick={() => onDirectionChange("remove")}
|
||||
aria-pressed={direction === "remove"}
|
||||
className={`flex-1 py-2 rounded-md border text-sm font-medium transition-colors ${
|
||||
direction === "remove"
|
||||
? "bg-destructive/20 border-destructive text-destructive"
|
||||
|
|
@ -65,7 +67,9 @@ export function TimeBankAdjustmentDialog({
|
|||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<label htmlFor="timebank-amount" className="sr-only">Amount</label>
|
||||
<input
|
||||
id="timebank-amount"
|
||||
type="number"
|
||||
min="0.001"
|
||||
step="any"
|
||||
|
|
@ -74,7 +78,10 @@ export function TimeBankAdjustmentDialog({
|
|||
className="flex-1 px-3 py-2 border rounded-md bg-background text-foreground text-base md:text-sm"
|
||||
placeholder="Amount"
|
||||
/>
|
||||
<label htmlFor="timebank-unit" className="sr-only">Time unit</label>
|
||||
<select
|
||||
id="timebank-unit"
|
||||
aria-label="Time unit"
|
||||
value={unit}
|
||||
onChange={(e) => onUnitChange(e.target.value as "seconds" | "minutes" | "hours")}
|
||||
className="px-3 py-2 border rounded-md bg-background text-foreground text-base md:text-sm"
|
||||
|
|
|
|||
|
|
@ -44,13 +44,15 @@ export function OvernightPauseSettings({
|
|||
<div className="space-y-4">
|
||||
<Label>Overnight Pause</Label>
|
||||
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<div role="radiogroup" aria-label="Pause mode" className="grid grid-cols-3 gap-2">
|
||||
{PAUSE_MODES.map(({ value, icon: Icon, label, sub }) => {
|
||||
const selected = mode === value;
|
||||
return (
|
||||
<button
|
||||
key={value}
|
||||
type="button"
|
||||
role="radio"
|
||||
aria-checked={selected}
|
||||
disabled={disabled}
|
||||
onClick={() => onModeChange(value)}
|
||||
className={cn(
|
||||
|
|
@ -76,10 +78,11 @@ export function OvernightPauseSettings({
|
|||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Moon className="h-3.5 w-3.5 text-indigo-400 shrink-0" />
|
||||
<Label className="text-xs">Draft pauses</Label>
|
||||
<Moon className="h-3.5 w-3.5 text-indigo-400 shrink-0" aria-hidden="true" />
|
||||
<Label htmlFor="overnight-pause-start" className="text-xs">Draft pauses</Label>
|
||||
</div>
|
||||
<Input
|
||||
id="overnight-pause-start"
|
||||
type="time"
|
||||
value={start}
|
||||
disabled={disabled}
|
||||
|
|
@ -88,10 +91,11 @@ export function OvernightPauseSettings({
|
|||
</div>
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Sun className="h-3.5 w-3.5 text-yellow-400 shrink-0" />
|
||||
<Label className="text-xs">Draft resumes</Label>
|
||||
<Sun className="h-3.5 w-3.5 text-yellow-400 shrink-0" aria-hidden="true" />
|
||||
<Label htmlFor="overnight-pause-end" className="text-xs">Draft resumes</Label>
|
||||
</div>
|
||||
<Input
|
||||
id="overnight-pause-end"
|
||||
type="time"
|
||||
value={end}
|
||||
disabled={disabled}
|
||||
|
|
|
|||
|
|
@ -56,11 +56,13 @@ export function ScoringPresetPicker({
|
|||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Preset tabs */}
|
||||
<div className="flex rounded-lg border border-border overflow-hidden">
|
||||
<div role="radiogroup" aria-label="Scoring preset" 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}
|
||||
disabled={disabled}
|
||||
onClick={() => p !== "custom" ? applyPreset(p) : onPresetChange("custom")}
|
||||
className={cn(
|
||||
|
|
@ -90,7 +92,9 @@ export function ScoringPresetPicker({
|
|||
style={{ width: `${barWidth}%` }}
|
||||
/>
|
||||
</div>
|
||||
<label htmlFor={`scoring-${key}`} className="sr-only">Points for {label} place</label>
|
||||
<input
|
||||
id={`scoring-${key}`}
|
||||
type="number"
|
||||
value={val}
|
||||
disabled={disabled}
|
||||
|
|
|
|||
|
|
@ -25,13 +25,15 @@ const MODES = [
|
|||
|
||||
export function TimerModeSelector({ value, onChange, disabled }: TimerModeSelectorProps) {
|
||||
return (
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div role="radiogroup" aria-label="Timer mode" className="grid grid-cols-2 gap-3">
|
||||
{MODES.map((mode) => {
|
||||
const selected = value === mode.value;
|
||||
return (
|
||||
<button
|
||||
key={mode.value}
|
||||
type="button"
|
||||
role="radio"
|
||||
aria-checked={selected}
|
||||
onClick={() => onChange(mode.value)}
|
||||
disabled={disabled}
|
||||
className={cn(
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@ export interface WizardStepperProps {
|
|||
|
||||
export function WizardStepper({ currentStep, steps, onStepClick }: WizardStepperProps) {
|
||||
return (
|
||||
<div className="mb-6">
|
||||
<div className="flex items-center">
|
||||
<nav aria-label="Setup progress" className="mb-6">
|
||||
<ol className="flex items-center list-none p-0 m-0">
|
||||
{steps.map((label, i) => {
|
||||
const n = i + 1;
|
||||
const done = n < currentStep;
|
||||
|
|
@ -19,26 +19,30 @@ export function WizardStepper({ currentStep, steps, onStepClick }: WizardStepper
|
|||
return (
|
||||
<Fragment key={label}>
|
||||
{i > 0 && (
|
||||
<div className={cn("flex-1 h-0.5 transition-colors", done ? "bg-primary" : "bg-border")} />
|
||||
<li aria-hidden="true" className={cn("flex-1 h-0.5 transition-colors", done ? "bg-primary" : "bg-border")} />
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => done && onStepClick(n)}
|
||||
className={cn(
|
||||
"shrink-0 w-9 h-9 rounded-full border-2 flex items-center justify-center text-sm font-semibold bg-background transition-colors",
|
||||
done && "bg-primary border-primary text-primary-foreground",
|
||||
active && !done && "border-primary text-primary",
|
||||
!done && !active && "border-border text-muted-foreground",
|
||||
done ? "cursor-pointer" : "cursor-default"
|
||||
)}
|
||||
>
|
||||
{done ? <Check className="h-4 w-4" /> : n}
|
||||
</button>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => done && onStepClick(n)}
|
||||
aria-label={`Step ${n}: ${label}${done ? " (completed)" : active ? " (current)" : ""}`}
|
||||
aria-current={active ? "step" : undefined}
|
||||
className={cn(
|
||||
"shrink-0 w-9 h-9 rounded-full border-2 flex items-center justify-center text-sm font-semibold bg-background transition-colors",
|
||||
done && "bg-primary border-primary text-primary-foreground",
|
||||
active && !done && "border-primary text-primary",
|
||||
!done && !active && "border-border text-muted-foreground",
|
||||
done ? "cursor-pointer" : "cursor-default"
|
||||
)}
|
||||
>
|
||||
{done ? <Check className="h-4 w-4" aria-hidden="true" /> : <span aria-hidden="true">{n}</span>}
|
||||
</button>
|
||||
</li>
|
||||
</Fragment>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="flex mt-1.5">
|
||||
</ol>
|
||||
<div className="flex mt-1.5" aria-hidden="true">
|
||||
{steps.map((label, i) => {
|
||||
const n = i + 1;
|
||||
const done = n < currentStep;
|
||||
|
|
@ -58,6 +62,6 @@ export function WizardStepper({ currentStep, steps, onStepClick }: WizardStepper
|
|||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -122,11 +122,12 @@ export function DraftSetupSection({
|
|||
</div>
|
||||
|
||||
<div className="rounded-lg border p-5 sm:p-6">
|
||||
<Label htmlFor="draftDate">Draft Date & Time</Label>
|
||||
<Label>Draft Date & Time</Label>
|
||||
<div className="mt-5 grid gap-3 sm:grid-cols-2">
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
aria-label={draftDate ? `Draft date: ${format(draftDate, "PPP")}. Click to change.` : "Pick a draft date"}
|
||||
variant="outline"
|
||||
className={cn("justify-start text-left font-normal", !draftDate && "text-muted-foreground")}
|
||||
disabled={!canEditDraftRounds}
|
||||
|
|
@ -145,7 +146,9 @@ export function DraftSetupSection({
|
|||
</PopoverContent>
|
||||
</Popover>
|
||||
<Input
|
||||
id="draftTime"
|
||||
type="time"
|
||||
aria-label="Draft time"
|
||||
value={draftTime}
|
||||
onChange={(e) => onDraftTimeChange(e.target.value)}
|
||||
disabled={!canEditDraftRounds}
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ export function PeopleSection({
|
|||
<Form method="post" className="flex flex-col gap-2 sm:flex-row">
|
||||
<input type="hidden" name="intent" value="assign-team-owner" />
|
||||
<input type="hidden" name="teamId" value={team.id} />
|
||||
<Select name="userId" required>
|
||||
<Select name="userId" required aria-label={`Assign owner for ${team.name}`}>
|
||||
<SelectTrigger className="h-9 sm:w-[190px]">
|
||||
<SelectValue placeholder="Select user" />
|
||||
</SelectTrigger>
|
||||
|
|
@ -130,7 +130,7 @@ export function PeopleSection({
|
|||
|
||||
<Form method="post" className="mt-4 flex flex-col gap-2 sm:flex-row">
|
||||
<input type="hidden" name="intent" value="add-commissioner" />
|
||||
<Select name="userId" required>
|
||||
<Select name="userId" required aria-label="Add commissioner">
|
||||
<SelectTrigger className="flex-1">
|
||||
<SelectValue placeholder="Add commissioner from league members" />
|
||||
</SelectTrigger>
|
||||
|
|
|
|||
|
|
@ -94,18 +94,19 @@ export function SettingsDesktopNav({
|
|||
<p className="px-3 pb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
|
||||
Manage
|
||||
</p>
|
||||
<nav className="space-y-1">
|
||||
<nav aria-label="League settings" className="space-y-1">
|
||||
{sections.map((section) => (
|
||||
<button
|
||||
key={section.id}
|
||||
type="button"
|
||||
onClick={() => onSectionChange(section.id)}
|
||||
aria-current={activeSection === section.id ? "page" : undefined}
|
||||
className={cn(
|
||||
"flex w-full cursor-pointer items-center gap-2.5 rounded-md px-3 py-2 text-left text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground",
|
||||
activeSection === section.id && "bg-muted text-foreground"
|
||||
)}
|
||||
>
|
||||
<section.icon className={cn("h-4 w-4 shrink-0", section.isDanger && "text-destructive")} />
|
||||
<section.icon className={cn("h-4 w-4 shrink-0", section.isDanger && "text-destructive")} aria-hidden="true" />
|
||||
{section.label}
|
||||
</button>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -11,8 +11,7 @@ const FOOTER_LINKS = [
|
|||
export function Footer() {
|
||||
return (
|
||||
<footer
|
||||
className="flex flex-col items-start gap-3 border-t px-10 py-5 text-xs sm:flex-row sm:items-center sm:justify-between"
|
||||
style={{ color: "rgb(255 255 255 / 28%)" }}
|
||||
className="flex flex-col items-start gap-3 border-t px-10 py-5 text-xs sm:flex-row sm:items-center sm:justify-between text-muted-foreground"
|
||||
>
|
||||
<span>© 2026 Brackt. All rights reserved.</span>
|
||||
<nav className="flex gap-5">
|
||||
|
|
|
|||
|
|
@ -37,6 +37,11 @@ function SlotMachineHeadline() {
|
|||
const sportsSeq = useRef<string[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
|
||||
setLanded(true);
|
||||
return;
|
||||
}
|
||||
|
||||
sportsSeq.current = shuffle(SPORTS);
|
||||
let idx = 0;
|
||||
|
||||
|
|
@ -105,17 +110,33 @@ const TICKER_ITEMS = [
|
|||
];
|
||||
|
||||
function SportTicker() {
|
||||
const [paused, setPaused] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="relative overflow-hidden pb-px" style={{ marginTop: "52px" }}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setPaused((p) => !p)}
|
||||
aria-label={paused ? "Resume sport ticker" : "Pause sport ticker"}
|
||||
className="sr-only focus:not-sr-only focus:absolute focus:top-0 focus:right-0 focus:z-20 focus:px-2 focus:py-1 focus:text-xs focus:bg-background focus:border focus:rounded-md"
|
||||
>
|
||||
{paused ? "Resume" : "Pause"}
|
||||
</button>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="pointer-events-none absolute inset-y-0 left-0 z-10 w-[60px]"
|
||||
style={{ background: "linear-gradient(to right, #14171e, transparent)" }}
|
||||
/>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="pointer-events-none absolute inset-y-0 right-0 z-10 w-[60px]"
|
||||
style={{ background: "linear-gradient(to left, #14171e, transparent)" }}
|
||||
/>
|
||||
<div className="flex animate-ticker" style={{ width: "max-content" }}>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className={paused ? "flex" : "flex animate-ticker"}
|
||||
style={{ width: "max-content" }}
|
||||
>
|
||||
{TICKER_ITEMS.map(({ sport, key }) => (
|
||||
<span
|
||||
key={key}
|
||||
|
|
|
|||
|
|
@ -6,10 +6,11 @@ export function ScoringPointsTable({ className }: TableProps) {
|
|||
return (
|
||||
<div className={`bg-muted rounded-lg overflow-hidden ${className ?? ""}`}>
|
||||
<table className="w-full text-sm">
|
||||
<caption className="sr-only">Scoring points by finish position</caption>
|
||||
<thead>
|
||||
<tr className="border-b border-border">
|
||||
<th className="text-left p-3 font-semibold text-foreground">Finish</th>
|
||||
<th className="text-right p-3 font-semibold text-foreground">Points</th>
|
||||
<th scope="col" className="text-left p-3 font-semibold text-foreground">Finish</th>
|
||||
<th scope="col" className="text-right p-3 font-semibold text-foreground">Points</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-border">
|
||||
|
|
@ -29,10 +30,11 @@ export function QualifyingPointsTable({ className }: TableProps) {
|
|||
return (
|
||||
<div className={`bg-muted rounded-lg overflow-hidden ${className ?? ""}`}>
|
||||
<table className="w-full text-sm">
|
||||
<caption className="sr-only">Qualifying points by major finish position</caption>
|
||||
<thead>
|
||||
<tr className="border-b border-border">
|
||||
<th className="text-left p-3 font-semibold text-foreground">Major Finish</th>
|
||||
<th className="text-right p-3 font-semibold text-foreground">Qualifying Points</th>
|
||||
<th scope="col" className="text-left p-3 font-semibold text-foreground">Major Finish</th>
|
||||
<th scope="col" className="text-right p-3 font-semibold text-foreground">Qualifying Points</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-border">
|
||||
|
|
|
|||
|
|
@ -77,6 +77,12 @@ export function Layout({ children }: { children: React.ReactNode }) {
|
|||
<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 />
|
||||
|
|
@ -103,7 +109,7 @@ export default function App({ loaderData }: Route.ComponentProps) {
|
|||
<Outlet />
|
||||
) : (
|
||||
<>
|
||||
<main>
|
||||
<main id="main-content">
|
||||
<Outlet />
|
||||
</main>
|
||||
<Footer />
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ export default function AdminLayout() {
|
|||
<div className="flex h-16 items-center border-b px-6">
|
||||
<h2 className="text-lg font-semibold">Admin Panel</h2>
|
||||
</div>
|
||||
<nav className="space-y-1 p-4">
|
||||
<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" />
|
||||
|
|
|
|||
|
|
@ -59,9 +59,9 @@ export default function ForgotPasswordPage() {
|
|||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input id="email" name="email" type="email" required autoComplete="email" />
|
||||
<Input id="email" name="email" type="email" required autoComplete="email" aria-describedby={error ? "forgot-error" : undefined} />
|
||||
</div>
|
||||
{error && <p className="text-sm text-destructive">{error}</p>}
|
||||
{error && <p id="forgot-error" role="alert" className="text-sm text-destructive">{error}</p>}
|
||||
<Button type="submit" className="w-full" disabled={loading}>
|
||||
{loading ? "Sending…" : "Send reset link"}
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -1281,7 +1281,7 @@ export default function DraftRoom() {
|
|||
View Draft Board
|
||||
</a>
|
||||
{roomClosureCountdown !== null && roomClosureCountdown > 0 && (
|
||||
<span className="text-sm text-emerald-500">
|
||||
<span aria-live="polite" aria-atomic="true" className="text-sm text-emerald-500">
|
||||
Room closes in {Math.floor(roomClosureCountdown / 60)}:{String(roomClosureCountdown % 60).padStart(2, "0")}
|
||||
</span>
|
||||
)}
|
||||
|
|
@ -1364,7 +1364,7 @@ export default function DraftRoom() {
|
|||
|
||||
{/* Mobile On Clock bar */}
|
||||
{season.status === "draft" && !isDraftComplete && currentDraftSlot && (
|
||||
<div className={`md:hidden flex-shrink-0 flex items-center justify-between px-4 py-2 border-b ${
|
||||
<div aria-live="assertive" aria-atomic="true" className={`md:hidden flex-shrink-0 flex items-center justify-between px-4 py-2 border-b ${
|
||||
isMyTurn
|
||||
? isOvernightPause
|
||||
? "bg-blue-950/40 border-blue-800/40"
|
||||
|
|
@ -1423,7 +1423,7 @@ export default function DraftRoom() {
|
|||
<TabsTrigger value="summary">Summary</TabsTrigger>
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
<div className="flex justify-center">
|
||||
<div className="flex justify-center" aria-live="assertive" aria-atomic="true">
|
||||
{isMyTurn && season.status === "draft" && !isDraftComplete && (
|
||||
isOvernightPause ? (
|
||||
<span className="text-sm text-blue-200 text-center leading-snug">
|
||||
|
|
@ -1482,8 +1482,11 @@ export default function DraftRoom() {
|
|||
)}
|
||||
{mobileTab === "board" && (
|
||||
<div className="flex flex-col h-full overflow-hidden">
|
||||
<div className="flex-shrink-0 flex gap-1 p-2 border-b">
|
||||
<div role="tablist" aria-label="Board view" className="flex-shrink-0 flex gap-1 p-2 border-b">
|
||||
<button
|
||||
role="tab"
|
||||
aria-selected={boardSubTab === "board"}
|
||||
aria-controls="board-subtab-panel"
|
||||
onClick={() => setBoardSubTab("board")}
|
||||
className={`flex-1 py-1.5 text-sm font-medium rounded transition-colors ${
|
||||
boardSubTab === "board"
|
||||
|
|
@ -1494,6 +1497,9 @@ export default function DraftRoom() {
|
|||
Board
|
||||
</button>
|
||||
<button
|
||||
role="tab"
|
||||
aria-selected={boardSubTab === "pick-list"}
|
||||
aria-controls="board-subtab-panel"
|
||||
onClick={() => setBoardSubTab("pick-list")}
|
||||
className={`flex-1 py-1.5 text-sm font-medium rounded transition-colors ${
|
||||
boardSubTab === "pick-list"
|
||||
|
|
@ -1504,7 +1510,7 @@ export default function DraftRoom() {
|
|||
Pick List
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex-1 overflow-hidden">
|
||||
<div id="board-subtab-panel" role="tabpanel" className="flex-1 overflow-hidden">
|
||||
{boardSubTab !== "pick-list" ? (
|
||||
<DraftGridSection {...draftGridSectionProps} />
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -95,13 +95,13 @@ export default function LoginPage() {
|
|||
<form onSubmit={handleEmailSignIn} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input id="email" name="email" type="email" required autoComplete="email" />
|
||||
<Input id="email" name="email" type="email" required autoComplete="email" aria-describedby={error ? "login-error" : undefined} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="password">Password</Label>
|
||||
<Input id="password" name="password" type="password" required autoComplete="current-password" />
|
||||
<Input id="password" name="password" type="password" required autoComplete="current-password" aria-describedby={error ? "login-error" : undefined} />
|
||||
</div>
|
||||
{error && <p className="text-sm text-destructive">{error}</p>}
|
||||
{error && <p id="login-error" role="alert" className="text-sm text-destructive">{error}</p>}
|
||||
<Button type="submit" className="w-full" disabled={loading}>
|
||||
{loading ? "Signing in…" : "Sign In"}
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -91,13 +91,14 @@ export default function OnboardingPage({ loaderData, actionData }: Route.Compone
|
|||
maxLength={30}
|
||||
autoFocus
|
||||
autoComplete="off"
|
||||
aria-describedby={actionData && "error" in actionData ? "onboarding-error" : "username-hint"}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
<p id="username-hint" className="text-xs text-muted-foreground">
|
||||
3–30 characters. Letters, numbers, underscores, and hyphens only.
|
||||
</p>
|
||||
</div>
|
||||
{actionData && "error" in actionData && (
|
||||
<p className="text-sm text-destructive">{actionData.error}</p>
|
||||
<p id="onboarding-error" role="alert" className="text-sm text-destructive">{actionData.error}</p>
|
||||
)}
|
||||
<Button type="submit" className="w-full">
|
||||
Continue
|
||||
|
|
|
|||
|
|
@ -100,17 +100,17 @@ export default function RegisterPage() {
|
|||
<form onSubmit={handleRegister} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">Display Name</Label>
|
||||
<Input id="name" name="name" type="text" required autoComplete="name" />
|
||||
<Input id="name" name="name" type="text" required autoComplete="name" aria-describedby={error ? "register-error" : undefined} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input id="email" name="email" type="email" required autoComplete="email" />
|
||||
<Input id="email" name="email" type="email" required autoComplete="email" aria-describedby={error ? "register-error" : undefined} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="password">Password</Label>
|
||||
<Input id="password" name="password" type="password" required autoComplete="new-password" minLength={8} />
|
||||
<Input id="password" name="password" type="password" required autoComplete="new-password" minLength={8} aria-describedby={error ? "register-error" : undefined} />
|
||||
</div>
|
||||
{error && <p className="text-sm text-destructive">{error}</p>}
|
||||
{error && <p id="register-error" role="alert" className="text-sm text-destructive">{error}</p>}
|
||||
<Button type="submit" className="w-full" disabled={loading}>
|
||||
{loading ? "Creating account…" : "Create Account"}
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -67,6 +67,7 @@ export default function ResetPasswordPage() {
|
|||
required
|
||||
minLength={8}
|
||||
autoComplete="new-password"
|
||||
aria-describedby={error ? "reset-error" : undefined}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
|
|
@ -78,9 +79,10 @@ export default function ResetPasswordPage() {
|
|||
required
|
||||
minLength={8}
|
||||
autoComplete="new-password"
|
||||
aria-describedby={error ? "reset-error" : undefined}
|
||||
/>
|
||||
</div>
|
||||
{error && <p className="text-sm text-destructive">{error}</p>}
|
||||
{error && <p id="reset-error" role="alert" className="text-sm text-destructive">{error}</p>}
|
||||
<Button type="submit" className="w-full" disabled={loading}>
|
||||
{loading ? "Saving…" : "Set new password"}
|
||||
</Button>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue