chrisp/brackt
1
1
Fork 0
Code Issues 42 Pull requests Projects Releases Packages Wiki Activity Actions

Fix code review findings from WCAG compliance pass

Browse source 
- 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
This commit is contained in:
Claude 2026-05-17 23:46:57 +00:00
parent b47b3d2eb5
commit e25cba09ac
No known key found for this signature in database
12 changed files with 155 additions and 103 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/app.css
View file

@ -69,7 +69,7 @@ html {
--secondary: #1c1f26;
--secondary-foreground: #ffffff;
--muted: #1c1f26;
--muted-foreground: rgb(255 255 255 / 62%);
--muted-foreground: rgb(255 255 255 / 55%);
--accent: #2ce1c1;
--accent-foreground: #14171e;
--destructive: oklch(0.65 0.22 25);

39
app/components/AutodraftSettings.tsx
View file

@ -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 role="radiogroup" aria-label="Autodraft setting" 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;
@ -211,6 +229,8 @@ function AutodraftOptions({
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)} ${
@ -387,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 */}
@ -419,7 +452,7 @@ export function AutodraftSettings({
</Popover>
</div>
<div role="radiogroup" aria-label="Autodraft setting" 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;
@ -429,6 +462,8 @@ export function AutodraftSettings({
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)} ${

48
app/components/draft/AuthRecoveryOverlay.tsx
View file

@ -1,46 +1,18 @@
import { useEffect, useRef } from "react";
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) {
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();
useFocusTrap(dialogRef, isAuthDegraded);
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;
}
if (!isAuthDegraded) return null;
return (
<div
@ -54,6 +26,7 @@ export function AuthRecoveryOverlay({
<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"
@ -72,16 +45,11 @@ export function AuthRecoveryOverlay({
<div>
<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>

8
app/components/draft/AvailableParticipantsSection.tsx
View file

@ -474,10 +474,10 @@ export const AvailableParticipantsSection = memo(function AvailableParticipantsS
</div>
</div>
<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 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>
</div>
<div ref={parentRef} className="flex-1 overflow-y-auto">

64
app/components/draft/ConnectionOverlay.tsx
View file

@ -1,6 +1,7 @@
import { useEffect, useRef } from "react";
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;
@ -15,39 +16,13 @@ export function ConnectionOverlay({
connectionError,
isSyncing,
}: ConnectionOverlayProps) {
const isVisible = !isConnected || isSyncing;
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();
useFocusTrap(dialogRef, isVisible);
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;
}
if (!isVisible) return null;
const statusMessage = connectionError
? connectionError
@ -65,12 +40,17 @@ export function ConnectionOverlay({
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">
{/* 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"
@ -86,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>
@ -120,22 +100,10 @@ export function ConnectionOverlay({
{/* Loading Dots */}
{!connectionError && (
<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" }}
/>
<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>

5
app/components/draft/DraftSummaryView.tsx
View file

@ -78,10 +78,10 @@ export const DraftSummaryView = memo(function DraftSummaryView({
{/* Header row */}
<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">
<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 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">
<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) => {
@ -92,7 +92,6 @@ export const DraftSummaryView = memo(function DraftSummaryView({
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" : ""}`}
>

1
app/components/draft/ParticipantSelectionDialog.tsx
View file

@ -96,7 +96,6 @@ export function ParticipantSelectionDialog({
<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)}

20
app/components/league/OvernightPauseSettings.tsx
View file

@ -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,11 +41,26 @@ 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 role="radiogroup" aria-label="Pause mode" 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 (
@ -53,6 +69,8 @@ export function OvernightPauseSettings({
type="button"
role="radio"
aria-checked={selected}
tabIndex={selected ? 0 : -1}
data-radio-value={value}
disabled={disabled}
onClick={() => onModeChange(value)}
className={cn(

20
app/components/league/ScoringPresetPicker.tsx
View file

@ -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,13 +72,15 @@ export function ScoringPresetPicker({
return (
<div className="space-y-4">
{/* Preset tabs */}
<div role="radiogroup" aria-label="Scoring preset" 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(

18
app/components/league/TimerModeSelector.tsx
View file

@ -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,8 +25,21 @@ 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 role="radiogroup" aria-label="Timer mode" 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 (
@ -34,6 +48,8 @@ export function TimerModeSelector({ value, onChange, disabled }: TimerModeSelect
type="button"
role="radio"
aria-checked={selected}
tabIndex={selected ? 0 : -1}
data-radio-value={mode.value}
onClick={() => onChange(mode.value)}
disabled={disabled}
className={cn(

2
app/components/league/WizardStepper.tsx
View file

@ -19,7 +19,7 @@ export function WizardStepper({ currentStep, steps, onStepClick }: WizardStepper
return (
<Fragment key={label}>
{i > 0 && (
<li aria-hidden="true" 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")} />
)}
<li>
<button

31
app/hooks/useFocusTrap.ts Normal file
View 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]);
}