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
67 lines
2.6 KiB
TypeScript
67 lines
2.6 KiB
TypeScript
import { Fragment } from "react";
|
|
import { Check } from "lucide-react";
|
|
import { cn } from "~/lib/utils";
|
|
|
|
export interface WizardStepperProps {
|
|
currentStep: number;
|
|
steps: string[];
|
|
onStepClick: (n: number) => void;
|
|
}
|
|
|
|
export function WizardStepper({ currentStep, steps, onStepClick }: WizardStepperProps) {
|
|
return (
|
|
<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;
|
|
const active = n === currentStep;
|
|
return (
|
|
<Fragment key={label}>
|
|
{i > 0 && (
|
|
<li role="presentation" aria-hidden="true" className={cn("flex-1 h-0.5 transition-colors", done ? "bg-primary" : "bg-border")} />
|
|
)}
|
|
<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>
|
|
);
|
|
})}
|
|
</ol>
|
|
<div className="flex mt-1.5" aria-hidden="true">
|
|
{steps.map((label, i) => {
|
|
const n = i + 1;
|
|
const done = n < currentStep;
|
|
const active = n === currentStep;
|
|
return (
|
|
<Fragment key={label}>
|
|
{i > 0 && <div className="flex-1" />}
|
|
<div className="shrink-0 w-9 flex justify-center">
|
|
<span className={cn(
|
|
"text-xs hidden sm:block whitespace-nowrap",
|
|
active ? "text-primary font-medium" : done ? "text-foreground" : "text-muted-foreground"
|
|
)}>
|
|
{label}
|
|
</span>
|
|
</div>
|
|
</Fragment>
|
|
);
|
|
})}
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|