From a Figma description to an accessible, fully-typed React component

Accessible, fully-typed `<Rating>` component — keyboard navigable, WCAG 2.1 AA, no library. ```tsx import { useId, useState, type KeyboardEvent } from "react"; interface RatingProps { /** Current value, 0–max. Controlled when provided. */ value?: number; max?: number; onChange?: (value: number) => void; label?: string; } export function Rating({ value, max = 5, onChange, label = "Rating" }: RatingProps) { const [hover, setHover] = useState<number | null>(null); const groupId = useId(); const active = hover ?? value ?? 0; const onKey = (e: KeyboardEvent, star: number) => { if (e.key === "ArrowRight" || e.key === "ArrowUp") onChange?.(Math.min(max, star + 1)); if (e.key === "ArrowLeft" || e.key === "ArrowDown") onChange?.(Math.max(1, star - 1)); }; return ( <div role="radiogroup" aria-label={label} className="inline-flex gap-1"> {Array.from({ length: max }, (_, i) => i + 1).map((star) => ( <button key={`${groupId}-${star}`} role="radio" aria-checked={star === value} aria-label={`${star} of ${max}`} tabIndex={star === (value || 1) ? 0 : -1} onClick={() => onChange?.(star)} onKeyDown={(e) => onKey(e, star)} onMouseEnter={() => setHover(star)} onMouseLeave={() => setHover(null)} className={star <= active ? "text-amber-400" : "text-zinc-600"} > ★ </button> ))} </div> ); } Rating.displayName = "Rating"; ``` Roving `tabIndex` + arrow-key handling means screen-reader and keyboard users get a proper radio group, not a pile of buttons.