fix: resolve all 48 WCAG 2.2 AA accessibility issues (#439)
* 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>
This commit is contained in:
Chris Parsons
GitHub
parent
d468385d90
commit
4bbcac1949
32 changed files with 404 additions and 196 deletions
|
|
@ -200,8 +200,26 @@ function AutodraftOptions({
|
|||
|
||||
const isDisabled = isMyTurn;
|
||||
|
||||
function handleGroupKeyDown(e: React.KeyboardEvent<HTMLDivElement>) {
|
||||
if (isDisabled) return;
|
||||
if (!["ArrowDown", "ArrowRight", "ArrowUp", "ArrowLeft"].includes(e.key)) return;
|
||||
e.preventDefault();
|
||||
const idx = OPTION_ORDER.indexOf(localState);
|
||||
const next = e.key === "ArrowDown" || e.key === "ArrowRight"
|
||||
? (idx + 1) % OPTION_ORDER.length
|
||||
: (idx - 1 + OPTION_ORDER.length) % OPTION_ORDER.length;
|
||||
const nextState = OPTION_ORDER[next];
|
||||
handleStateChange(nextState);
|
||||
e.currentTarget.querySelector<HTMLElement>(`[data-radio-value="${nextState}"]`)?.focus();
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col rounded-lg border overflow-hidden">
|
||||
<div
|
||||
role="radiogroup"
|
||||
aria-label="Autodraft setting"
|
||||
onKeyDown={handleGroupKeyDown}
|
||||
className="flex flex-col rounded-lg border overflow-hidden"
|
||||
>
|
||||
{OPTION_ORDER.map((state) => {
|
||||
const { label } = OPTIONS[state];
|
||||
const isActive = localState === state;
|
||||
|
|
@ -209,6 +227,10 @@ function AutodraftOptions({
|
|||
<button
|
||||
key={state}
|
||||
type="button"
|
||||
role="radio"
|
||||
aria-checked={isActive}
|
||||
tabIndex={isActive ? 0 : -1}
|
||||
data-radio-value={state}
|
||||
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 +239,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>
|
||||
);
|
||||
|
|
@ -385,6 +407,19 @@ export function AutodraftSettings({
|
|||
|
||||
const isDisabled = isMyTurn;
|
||||
|
||||
function handleGroupKeyDown(e: React.KeyboardEvent<HTMLDivElement>) {
|
||||
if (isDisabled) return;
|
||||
if (!["ArrowDown", "ArrowRight", "ArrowUp", "ArrowLeft"].includes(e.key)) return;
|
||||
e.preventDefault();
|
||||
const idx = OPTION_ORDER.indexOf(localState);
|
||||
const next = e.key === "ArrowDown" || e.key === "ArrowRight"
|
||||
? (idx + 1) % OPTION_ORDER.length
|
||||
: (idx - 1 + OPTION_ORDER.length) % OPTION_ORDER.length;
|
||||
const nextState = OPTION_ORDER[next];
|
||||
handleStateChange(nextState);
|
||||
e.currentTarget.querySelector<HTMLElement>(`[data-radio-value="${nextState}"]`)?.focus();
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="border-t pt-4 mt-4">
|
||||
{/* Header with info icon inline */}
|
||||
|
|
@ -417,7 +452,7 @@ export function AutodraftSettings({
|
|||
</Popover>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col rounded-lg border overflow-hidden">
|
||||
<div role="radiogroup" aria-label="Autodraft setting" onKeyDown={handleGroupKeyDown} className="flex flex-col rounded-lg border overflow-hidden">
|
||||
{OPTION_ORDER.map((state) => {
|
||||
const { label } = OPTIONS[state];
|
||||
const isActive = localState === state;
|
||||
|
|
@ -425,6 +460,10 @@ export function AutodraftSettings({
|
|||
<button
|
||||
key={state}
|
||||
type="button"
|
||||
role="radio"
|
||||
aria-checked={isActive}
|
||||
tabIndex={isActive ? 0 : -1}
|
||||
data-radio-value={state}
|
||||
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 +472,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}
|
||||
|
|
|
|||
|
|
@ -33,10 +33,10 @@ describe('AutodraftSettings Component', () => {
|
|||
it('renders all four option buttons', () => {
|
||||
render(<AutodraftSettings {...defaultProps} />);
|
||||
|
||||
expect(screen.getByRole('button', { name: 'Off' })).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: 'Next in Queue' })).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: 'All in Queue' })).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: 'All Picks' })).toBeInTheDocument();
|
||||
expect(screen.getByRole('radio', { name: 'Off' })).toBeInTheDocument();
|
||||
expect(screen.getByRole('radio', { name: 'Next in Queue' })).toBeInTheDocument();
|
||||
expect(screen.getByRole('radio', { name: 'All in Queue' })).toBeInTheDocument();
|
||||
expect(screen.getByRole('radio', { name: 'All Picks' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('does not render a queue-only toggle switch', () => {
|
||||
|
|
@ -51,24 +51,24 @@ describe('AutodraftSettings Component', () => {
|
|||
|
||||
it('marks Off as active (muted border) when isEnabled=false', () => {
|
||||
render(<AutodraftSettings {...defaultProps} isEnabled={false} />);
|
||||
expect(screen.getByRole('button', { name: 'Off' }).className).toContain(
|
||||
expect(screen.getByRole('radio', { name: 'Off' }).className).toContain(
|
||||
'border-l-muted-foreground'
|
||||
);
|
||||
});
|
||||
|
||||
it('marks Next in Queue as active when isEnabled=true, mode=next_pick', () => {
|
||||
render(<AutodraftSettings {...defaultProps} isEnabled={true} mode="next_pick" queueOnly={true} />);
|
||||
expect(screen.getByRole('button', { name: 'Next in Queue' }).className).toContain('bg-electric');
|
||||
expect(screen.getByRole('radio', { name: 'Next in Queue' }).className).toContain('bg-electric');
|
||||
});
|
||||
|
||||
it('marks All in Queue as active when isEnabled=true, mode=while_on, queueOnly=true', () => {
|
||||
render(<AutodraftSettings {...defaultProps} isEnabled={true} mode="while_on" queueOnly={true} />);
|
||||
expect(screen.getByRole('button', { name: 'All in Queue' }).className).toContain('bg-electric');
|
||||
expect(screen.getByRole('radio', { name: 'All in Queue' }).className).toContain('bg-electric');
|
||||
});
|
||||
|
||||
it('marks All Picks as active when isEnabled=true, mode=while_on, queueOnly=false', () => {
|
||||
render(<AutodraftSettings {...defaultProps} isEnabled={true} mode="while_on" queueOnly={false} />);
|
||||
expect(screen.getByRole('button', { name: 'All Picks' }).className).toContain('bg-electric');
|
||||
expect(screen.getByRole('radio', { name: 'All Picks' }).className).toContain('bg-electric');
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -79,7 +79,7 @@ describe('AutodraftSettings Component', () => {
|
|||
const onUpdate = vi.fn();
|
||||
render(<AutodraftSettings {...defaultProps} onUpdate={onUpdate} />);
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Next in Queue' }));
|
||||
fireEvent.click(screen.getByRole('radio', { name: 'Next in Queue' }));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(global.fetch).toHaveBeenCalledWith(
|
||||
|
|
@ -94,7 +94,7 @@ describe('AutodraftSettings Component', () => {
|
|||
const onUpdate = vi.fn();
|
||||
render(<AutodraftSettings {...defaultProps} onUpdate={onUpdate} />);
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: 'All in Queue' }));
|
||||
fireEvent.click(screen.getByRole('radio', { name: 'All in Queue' }));
|
||||
|
||||
await waitFor(() => expect(onUpdate).toHaveBeenCalledWith(true, 'while_on', true));
|
||||
});
|
||||
|
|
@ -103,7 +103,7 @@ describe('AutodraftSettings Component', () => {
|
|||
const onUpdate = vi.fn();
|
||||
render(<AutodraftSettings {...defaultProps} onUpdate={onUpdate} />);
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: 'All Picks' }));
|
||||
fireEvent.click(screen.getByRole('radio', { name: 'All Picks' }));
|
||||
|
||||
await waitFor(() => expect(onUpdate).toHaveBeenCalledWith(true, 'while_on', false));
|
||||
});
|
||||
|
|
@ -114,7 +114,7 @@ describe('AutodraftSettings Component', () => {
|
|||
<AutodraftSettings {...defaultProps} isEnabled={true} mode="next_pick" queueOnly={true} onUpdate={onUpdate} />
|
||||
);
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Off' }));
|
||||
fireEvent.click(screen.getByRole('radio', { name: 'Off' }));
|
||||
|
||||
await waitFor(() => expect(onUpdate).toHaveBeenCalledWith(false, 'next_pick', false));
|
||||
});
|
||||
|
|
@ -122,21 +122,21 @@ describe('AutodraftSettings Component', () => {
|
|||
it('disables all buttons when isMyTurn=true', () => {
|
||||
render(<AutodraftSettings {...defaultProps} isMyTurn={true} />);
|
||||
|
||||
expect(screen.getByRole('button', { name: 'Off' })).toBeDisabled();
|
||||
expect(screen.getByRole('button', { name: 'Next in Queue' })).toBeDisabled();
|
||||
expect(screen.getByRole('button', { name: 'All in Queue' })).toBeDisabled();
|
||||
expect(screen.getByRole('button', { name: 'All Picks' })).toBeDisabled();
|
||||
expect(screen.getByRole('radio', { name: 'Off' })).toBeDisabled();
|
||||
expect(screen.getByRole('radio', { name: 'Next in Queue' })).toBeDisabled();
|
||||
expect(screen.getByRole('radio', { name: 'All in Queue' })).toBeDisabled();
|
||||
expect(screen.getByRole('radio', { name: 'All Picks' })).toBeDisabled();
|
||||
});
|
||||
|
||||
it('does not call fetch when a button is clicked during the user\'s turn', () => {
|
||||
render(<AutodraftSettings {...defaultProps} isMyTurn={true} />);
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Next in Queue' }));
|
||||
fireEvent.click(screen.getByRole('radio', { name: 'Next in Queue' }));
|
||||
expect(global.fetch).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('does not re-fire when the already-active option is clicked', async () => {
|
||||
render(<AutodraftSettings {...defaultProps} isEnabled={false} />);
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Off' }));
|
||||
fireEvent.click(screen.getByRole('radio', { name: 'Off' }));
|
||||
expect(global.fetch).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
|
@ -149,10 +149,10 @@ describe('AutodraftSettings Component', () => {
|
|||
(global.fetch as any).mockReturnValueOnce(new Promise((r) => { resolve = r; }));
|
||||
|
||||
render(<AutodraftSettings {...defaultProps} />);
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Next in Queue' }));
|
||||
fireEvent.click(screen.getByRole('radio', { name: 'Next in Queue' }));
|
||||
|
||||
// Buttons stay enabled — optimistic UI does not block interaction
|
||||
expect(screen.getByRole('button', { name: 'Off' })).not.toBeDisabled();
|
||||
expect(screen.getByRole('radio', { name: 'Off' })).not.toBeDisabled();
|
||||
|
||||
resolve?.({ ok: true, json: async () => ({ success: true }) });
|
||||
});
|
||||
|
|
@ -160,9 +160,9 @@ describe('AutodraftSettings Component', () => {
|
|||
it('fires a fetch for every rapid click, aborting previous in-flight requests', async () => {
|
||||
render(<AutodraftSettings {...defaultProps} />);
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Next in Queue' }));
|
||||
fireEvent.click(screen.getByRole('button', { name: 'All in Queue' }));
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Off' }));
|
||||
fireEvent.click(screen.getByRole('radio', { name: 'Next in Queue' }));
|
||||
fireEvent.click(screen.getByRole('radio', { name: 'All in Queue' }));
|
||||
fireEvent.click(screen.getByRole('radio', { name: 'Off' }));
|
||||
|
||||
await waitFor(() => expect(global.fetch).toHaveBeenCalledTimes(3));
|
||||
});
|
||||
|
|
@ -175,10 +175,10 @@ describe('AutodraftSettings Component', () => {
|
|||
(global.fetch as any).mockResolvedValueOnce({ ok: false });
|
||||
|
||||
render(<AutodraftSettings {...defaultProps} isEnabled={false} />);
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Next in Queue' }));
|
||||
fireEvent.click(screen.getByRole('radio', { name: 'Next in Queue' }));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByRole('button', { name: 'Off' }).className).toContain(
|
||||
expect(screen.getByRole('radio', { name: 'Off' }).className).toContain(
|
||||
'border-l-muted-foreground'
|
||||
);
|
||||
});
|
||||
|
|
@ -188,10 +188,10 @@ describe('AutodraftSettings Component', () => {
|
|||
(global.fetch as any).mockRejectedValueOnce(new Error('Network error'));
|
||||
|
||||
render(<AutodraftSettings {...defaultProps} isEnabled={false} />);
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Next in Queue' }));
|
||||
fireEvent.click(screen.getByRole('radio', { name: 'Next in Queue' }));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByRole('button', { name: 'Off' }).className).toContain(
|
||||
expect(screen.getByRole('radio', { name: 'Off' }).className).toContain(
|
||||
'border-l-muted-foreground'
|
||||
);
|
||||
});
|
||||
|
|
@ -203,7 +203,7 @@ describe('AutodraftSettings Component', () => {
|
|||
describe('API payload', () => {
|
||||
it('posts correct formData for Next in Queue (next_pick, queueOnly=true)', async () => {
|
||||
render(<AutodraftSettings {...defaultProps} />);
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Next in Queue' }));
|
||||
fireEvent.click(screen.getByRole('radio', { name: 'Next in Queue' }));
|
||||
|
||||
await waitFor(() => expect(global.fetch).toHaveBeenCalled());
|
||||
|
||||
|
|
@ -217,7 +217,7 @@ describe('AutodraftSettings Component', () => {
|
|||
|
||||
it('posts correct formData for All in Queue (while_on, queueOnly=true)', async () => {
|
||||
render(<AutodraftSettings {...defaultProps} />);
|
||||
fireEvent.click(screen.getByRole('button', { name: 'All in Queue' }));
|
||||
fireEvent.click(screen.getByRole('radio', { name: 'All in Queue' }));
|
||||
|
||||
await waitFor(() => expect(global.fetch).toHaveBeenCalled());
|
||||
|
||||
|
|
@ -229,7 +229,7 @@ describe('AutodraftSettings Component', () => {
|
|||
|
||||
it('posts correct formData for All Picks (while_on, queueOnly=false)', async () => {
|
||||
render(<AutodraftSettings {...defaultProps} />);
|
||||
fireEvent.click(screen.getByRole('button', { name: 'All Picks' }));
|
||||
fireEvent.click(screen.getByRole('radio', { name: 'All Picks' }));
|
||||
|
||||
await waitFor(() => expect(global.fetch).toHaveBeenCalled());
|
||||
|
||||
|
|
@ -241,7 +241,7 @@ describe('AutodraftSettings Component', () => {
|
|||
|
||||
it('posts isEnabled=false for Off', async () => {
|
||||
render(<AutodraftSettings {...defaultProps} isEnabled={true} mode="next_pick" queueOnly={true} />);
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Off' }));
|
||||
fireEvent.click(screen.getByRole('radio', { name: 'Off' }));
|
||||
|
||||
await waitFor(() => expect(global.fetch).toHaveBeenCalled());
|
||||
|
||||
|
|
@ -251,7 +251,7 @@ describe('AutodraftSettings Component', () => {
|
|||
|
||||
it('passes an AbortSignal to fetch', async () => {
|
||||
render(<AutodraftSettings {...defaultProps} />);
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Next in Queue' }));
|
||||
fireEvent.click(screen.getByRole('radio', { name: 'Next in Queue' }));
|
||||
|
||||
await waitFor(() => expect(global.fetch).toHaveBeenCalled());
|
||||
|
||||
|
|
|
|||
|
|
@ -403,8 +403,8 @@ describe("AvailableParticipantsSection", () => {
|
|||
render(
|
||||
<AvailableParticipantsSection {...defaultProps} hasTeam={false} />
|
||||
);
|
||||
expect(screen.queryByTitle("Add to watchlist")).not.toBeInTheDocument();
|
||||
expect(screen.queryByTitle("Remove from watchlist")).not.toBeInTheDocument();
|
||||
expect(screen.queryByRole('button', { name: "Add to watchlist" })).not.toBeInTheDocument();
|
||||
expect(screen.queryByRole('button', { name: "Remove from watchlist" })).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders EyeOff icon for unwatched participants when hasTeam is true", () => {
|
||||
|
|
@ -415,7 +415,7 @@ describe("AvailableParticipantsSection", () => {
|
|||
watchedParticipantIds={new Set<string>()}
|
||||
/>
|
||||
);
|
||||
const buttons = screen.getAllByTitle("Add to watchlist");
|
||||
const buttons = screen.getAllByRole('button', { name: "Add to watchlist" });
|
||||
expect(buttons.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
|
|
@ -427,7 +427,7 @@ describe("AvailableParticipantsSection", () => {
|
|||
watchedParticipantIds={new Set(["1"])}
|
||||
/>
|
||||
);
|
||||
const buttons = screen.getAllByTitle("Remove from watchlist");
|
||||
const buttons = screen.getAllByRole('button', { name: "Remove from watchlist" });
|
||||
expect(buttons.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
|
|
@ -441,7 +441,7 @@ describe("AvailableParticipantsSection", () => {
|
|||
watchedParticipantIds={new Set<string>()}
|
||||
/>
|
||||
);
|
||||
const buttons = screen.getAllByTitle("Add to watchlist");
|
||||
const buttons = screen.getAllByRole('button', { name: "Add to watchlist" });
|
||||
await user.click(buttons[0]);
|
||||
expect(onToggleWatchlist).toHaveBeenCalledWith("1");
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,23 +1,32 @@
|
|||
import { useRef } from "react";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import { Card } from "~/components/ui/card";
|
||||
import { useFocusTrap } from "~/hooks/useFocusTrap";
|
||||
|
||||
interface AuthRecoveryOverlayProps {
|
||||
isAuthDegraded: boolean;
|
||||
}
|
||||
|
||||
export function AuthRecoveryOverlay({
|
||||
isAuthDegraded,
|
||||
}: AuthRecoveryOverlayProps) {
|
||||
if (!isAuthDegraded) {
|
||||
return null;
|
||||
}
|
||||
export function AuthRecoveryOverlay({ isAuthDegraded }: AuthRecoveryOverlayProps) {
|
||||
const dialogRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useFocusTrap(dialogRef, 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">
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="w-8 h-8 text-destructive"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
|
|
@ -34,18 +43,13 @@ 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.
|
||||
Your session has expired. Reload the page to reconnect to the draft.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
onClick={() => window.location.reload()}
|
||||
className="w-full"
|
||||
variant="default"
|
||||
>
|
||||
<Button onClick={() => window.location.reload()} className="w-full" variant="default">
|
||||
Reload Page
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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,7 +474,7 @@ 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`}>
|
||||
<div aria-hidden="true" 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>
|
||||
|
|
@ -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,5 +1,7 @@
|
|||
import { useRef } from "react";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import { Card } from "~/components/ui/card";
|
||||
import { useFocusTrap } from "~/hooks/useFocusTrap";
|
||||
|
||||
interface ConnectionOverlayProps {
|
||||
isConnected: boolean;
|
||||
|
|
@ -14,18 +16,41 @@ export function ConnectionOverlay({
|
|||
connectionError,
|
||||
isSyncing,
|
||||
}: ConnectionOverlayProps) {
|
||||
if (isConnected && !isSyncing) {
|
||||
return null;
|
||||
}
|
||||
const isVisible = !isConnected || isSyncing;
|
||||
const dialogRef = useRef<HTMLDivElement>(null);
|
||||
const titleId = "connection-overlay-title";
|
||||
|
||||
useFocusTrap(dialogRef, isVisible);
|
||||
|
||||
if (!isVisible) 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]">
|
||||
<Card className="w-full max-w-md mx-4 p-8 text-center">
|
||||
<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]"
|
||||
>
|
||||
{/* sr-only live region so status changes are announced without relying on aria-label on the dots */}
|
||||
<span className="sr-only" aria-live="polite" aria-atomic="true">{statusMessage}</span>
|
||||
|
||||
{/* tabIndex allows the card to receive focus when there are no interactive children (spinner state) */}
|
||||
<Card tabIndex={-1} className="w-full max-w-md mx-4 p-8 text-center focus:outline-none">
|
||||
<div className="flex flex-col items-center gap-6">
|
||||
{/* Spinner or Error Icon */}
|
||||
{connectionError ? (
|
||||
<div className="w-16 h-16 rounded-full bg-destructive/15 flex items-center justify-center">
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="w-8 h-8 text-destructive"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
|
|
@ -41,7 +66,7 @@ export function ConnectionOverlay({
|
|||
</svg>
|
||||
</div>
|
||||
) : (
|
||||
<div className="relative w-16 h-16">
|
||||
<div aria-hidden="true" className="relative w-16 h-16">
|
||||
<div className="absolute inset-0 border-4 border-primary/30 rounded-full" />
|
||||
<div className="absolute inset-0 border-4 border-primary border-t-transparent rounded-full animate-spin" />
|
||||
</div>
|
||||
|
|
@ -49,7 +74,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 +84,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,19 +100,10 @@ export function ConnectionOverlay({
|
|||
|
||||
{/* Loading Dots */}
|
||||
{!connectionError && (
|
||||
<div className="flex gap-1.5">
|
||||
<div
|
||||
className="w-2 h-2 bg-primary rounded-full animate-bounce"
|
||||
style={{ animationDelay: "0ms" }}
|
||||
/>
|
||||
<div
|
||||
className="w-2 h-2 bg-primary rounded-full animate-bounce"
|
||||
style={{ animationDelay: "150ms" }}
|
||||
/>
|
||||
<div
|
||||
className="w-2 h-2 bg-primary rounded-full animate-bounce"
|
||||
style={{ animationDelay: "300ms" }}
|
||||
/>
|
||||
<div aria-hidden="true" className="flex gap-1.5">
|
||||
<div className="w-2 h-2 bg-primary rounded-full animate-bounce" style={{ animationDelay: "0ms" }} />
|
||||
<div className="w-2 h-2 bg-primary rounded-full animate-bounce" style={{ animationDelay: "150ms" }} />
|
||||
<div className="w-2 h-2 bg-primary rounded-full animate-bounce" style={{ animationDelay: "300ms" }} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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" 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" 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,7 @@ export const DraftSummaryView = memo(function DraftSummaryView({
|
|||
const flexesExhausted = flexPicksAvailable > 0 && used >= flexPicksAvailable;
|
||||
return (
|
||||
<div
|
||||
role="columnheader"
|
||||
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 +116,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 +147,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 +161,11 @@ export const DraftSummaryView = memo(function DraftSummaryView({
|
|||
</div>
|
||||
);
|
||||
})}
|
||||
</div>{/* end row */}
|
||||
</Fragment>
|
||||
);
|
||||
})}
|
||||
</div>{/* end rowgroup */}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -84,14 +84,18 @@ 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"
|
||||
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"
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import React from "react";
|
||||
import { Ban, Globe, Moon, Sun, Users } from "lucide-react";
|
||||
import { GradientIcon } from "~/components/ui/GradientIcon";
|
||||
import { Input } from "~/components/ui/input";
|
||||
|
|
@ -40,17 +41,36 @@ export function OvernightPauseSettings({
|
|||
}: OvernightPauseSettingsProps) {
|
||||
if (!show) return null;
|
||||
|
||||
const PAUSE_VALUES = PAUSE_MODES.map((m) => m.value);
|
||||
|
||||
function handleGroupKeyDown(e: React.KeyboardEvent<HTMLDivElement>) {
|
||||
if (disabled) return;
|
||||
if (!["ArrowDown", "ArrowRight", "ArrowUp", "ArrowLeft"].includes(e.key)) return;
|
||||
e.preventDefault();
|
||||
const idx = PAUSE_VALUES.indexOf(mode);
|
||||
const next = e.key === "ArrowDown" || e.key === "ArrowRight"
|
||||
? (idx + 1) % PAUSE_VALUES.length
|
||||
: (idx - 1 + PAUSE_VALUES.length) % PAUSE_VALUES.length;
|
||||
const nextValue = PAUSE_VALUES[next];
|
||||
onModeChange(nextValue);
|
||||
e.currentTarget.querySelector<HTMLElement>(`[data-radio-value="${nextValue}"]`)?.focus();
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<Label>Overnight Pause</Label>
|
||||
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<div role="radiogroup" aria-label="Pause mode" onKeyDown={handleGroupKeyDown} 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}
|
||||
tabIndex={selected ? 0 : -1}
|
||||
data-radio-value={value}
|
||||
disabled={disabled}
|
||||
onClick={() => onModeChange(value)}
|
||||
className={cn(
|
||||
|
|
@ -76,10 +96,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 +109,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}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import React from "react";
|
||||
import { cn } from "~/lib/utils";
|
||||
import { DEFAULT_SCORING_RULES, type ScoringRules } from "~/lib/scoring-types";
|
||||
|
||||
|
|
@ -39,6 +40,21 @@ export function ScoringPresetPicker({
|
|||
disabled,
|
||||
}: ScoringPresetPickerProps) {
|
||||
const maxPoints = Math.max(...Object.values(rules));
|
||||
const PRESET_VALUES = ["brackt", "omnifantasy", "custom"] as const;
|
||||
|
||||
function handleGroupKeyDown(e: React.KeyboardEvent<HTMLDivElement>) {
|
||||
if (disabled) return;
|
||||
if (!["ArrowDown", "ArrowRight", "ArrowUp", "ArrowLeft"].includes(e.key)) return;
|
||||
e.preventDefault();
|
||||
const idx = PRESET_VALUES.indexOf(preset);
|
||||
const next = e.key === "ArrowDown" || e.key === "ArrowRight"
|
||||
? (idx + 1) % PRESET_VALUES.length
|
||||
: (idx - 1 + PRESET_VALUES.length) % PRESET_VALUES.length;
|
||||
const nextValue = PRESET_VALUES[next];
|
||||
if (nextValue !== "custom") applyPreset(nextValue);
|
||||
else onPresetChange("custom");
|
||||
e.currentTarget.querySelector<HTMLElement>(`[data-radio-value="${nextValue}"]`)?.focus();
|
||||
}
|
||||
|
||||
function applyPreset(p: "brackt" | "omnifantasy") {
|
||||
onPresetChange(p);
|
||||
|
|
@ -56,11 +72,15 @@ 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" onKeyDown={handleGroupKeyDown} 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}
|
||||
tabIndex={preset === p ? 0 : -1}
|
||||
data-radio-value={p}
|
||||
disabled={disabled}
|
||||
onClick={() => p !== "custom" ? applyPreset(p) : onPresetChange("custom")}
|
||||
className={cn(
|
||||
|
|
@ -90,7 +110,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}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import React from "react";
|
||||
import { ChessPawn, Hourglass } from "lucide-react";
|
||||
import { GradientIcon } from "~/components/ui/GradientIcon";
|
||||
import { cn } from "~/lib/utils";
|
||||
|
|
@ -24,14 +25,31 @@ const MODES = [
|
|||
];
|
||||
|
||||
export function TimerModeSelector({ value, onChange, disabled }: TimerModeSelectorProps) {
|
||||
function handleGroupKeyDown(e: React.KeyboardEvent<HTMLDivElement>) {
|
||||
if (disabled) return;
|
||||
if (!["ArrowDown", "ArrowRight", "ArrowUp", "ArrowLeft"].includes(e.key)) return;
|
||||
e.preventDefault();
|
||||
const idx = MODES.findIndex((m) => m.value === value);
|
||||
const next = e.key === "ArrowDown" || e.key === "ArrowRight"
|
||||
? (idx + 1) % MODES.length
|
||||
: (idx - 1 + MODES.length) % MODES.length;
|
||||
const nextValue = MODES[next].value;
|
||||
onChange(nextValue);
|
||||
e.currentTarget.querySelector<HTMLElement>(`[data-radio-value="${nextValue}"]`)?.focus();
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div role="radiogroup" aria-label="Timer mode" onKeyDown={handleGroupKeyDown} 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}
|
||||
tabIndex={selected ? 0 : -1}
|
||||
data-radio-value={mode.value}
|
||||
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 role="presentation" 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">
|
||||
|
|
|
|||
31
app/hooks/useFocusTrap.ts
Normal file
31
app/hooks/useFocusTrap.ts
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
import { useEffect, type RefObject } from "react";
|
||||
|
||||
const FOCUSABLE_SELECTOR =
|
||||
'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
|
||||
|
||||
export function useFocusTrap(ref: RefObject<HTMLElement | null>, active: boolean) {
|
||||
useEffect(() => {
|
||||
if (!active) return;
|
||||
const el = ref.current;
|
||||
if (!el) return;
|
||||
|
||||
const first = el.querySelector<HTMLElement>(FOCUSABLE_SELECTOR) ?? el;
|
||||
first.focus();
|
||||
|
||||
function onKeyDown(e: KeyboardEvent) {
|
||||
if (e.key !== "Tab") return;
|
||||
const focusables = Array.from(el?.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR) ?? []);
|
||||
if (focusables.length === 0) return;
|
||||
const firstEl = focusables[0];
|
||||
const lastEl = focusables[focusables.length - 1];
|
||||
if (e.shiftKey) {
|
||||
if (document.activeElement === firstEl) { e.preventDefault(); lastEl.focus(); }
|
||||
} else {
|
||||
if (document.activeElement === lastEl) { e.preventDefault(); firstEl.focus(); }
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("keydown", onKeyDown);
|
||||
return () => document.removeEventListener("keydown", onKeyDown);
|
||||
}, [ref, active]);
|
||||
}
|
||||
|
|
@ -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