e25cba09ac
- 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
77 lines
2.7 KiB
TypeScript
77 lines
2.7 KiB
TypeScript
import React from "react";
|
|
import { ChessPawn, Hourglass } from "lucide-react";
|
|
import { GradientIcon } from "~/components/ui/GradientIcon";
|
|
import { cn } from "~/lib/utils";
|
|
|
|
export interface TimerModeSelectorProps {
|
|
value: "chess_clock" | "standard";
|
|
onChange: (v: "chess_clock" | "standard") => void;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
const MODES = [
|
|
{
|
|
value: "chess_clock" as const,
|
|
label: "Chess Clock",
|
|
icon: ChessPawn,
|
|
desc: "Time bank + bonus per pick; bank early to save time for tough decisions",
|
|
},
|
|
{
|
|
value: "standard" as const,
|
|
label: "Standard",
|
|
icon: Hourglass,
|
|
desc: "Traditional fixed timer; each pick gets the same amount of time, no banking or carry-over",
|
|
},
|
|
];
|
|
|
|
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 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(
|
|
"flex flex-col items-center gap-2 p-4 rounded-lg border-2 transition-all",
|
|
selected ? "border-primary" : "border-border hover:border-primary/60",
|
|
disabled && "opacity-50 cursor-not-allowed"
|
|
)}
|
|
>
|
|
<GradientIcon
|
|
icon={mode.icon}
|
|
className="h-7 w-7"
|
|
style={selected ? undefined : { stroke: "var(--muted-foreground)" }}
|
|
/>
|
|
<span className={cn("text-sm font-semibold", !selected && "text-muted-foreground")}>
|
|
{mode.label}
|
|
</span>
|
|
<span className="text-xs text-muted-foreground text-center leading-tight">
|
|
{mode.desc}
|
|
</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|