Star rating input is accessible and keyboard-navigable

WCAG 2.2 SC 4.1.2 (Name, Role, Value) and SC 2.1.1 (Keyboard) require that all interactive controls be operable without a mouse and expose their purpose to assistive technology. A star rating built from styled <div> elements with only onClick handlers is invisible to screen readers and completely unreachable by keyboard — failing Section 508 2018 Refresh 502.3.1 as well. Users who navigate by keyboard or rely on VoiceOver/NVDA cannot leave a rating at all, which is a measurable drop in review volume and a legal exposure under ADA and EAA for US and EU stores.

Replace click-only star elements with native radio inputs inside a role="radiogroup" container in components/AccessibleStarInput.tsx. Native radios give keyboard navigation (arrow keys), visible focus, and screen-reader announcements for free.

// components/AccessibleStarInput.tsx
export function StarInput({ value, onChange }: { value: number; onChange: (v: number) => void }) {
  return (
    <div role="radiogroup" aria-label="Star rating">
      {[1, 2, 3, 4, 5].map(star => (
        <label key={star} className="star-label">
          <input
            type="radio"
            name="rating"
            value={star}
            checked={value === star}
            onChange={() => onChange(star)}
            aria-label={`${star} star${star > 1 ? 's' : ''}`}
            className="sr-only"
          />
          <span aria-hidden="true">★</span>
        </label>
      ))}
    </div>
  )
}

Add CSS focus-visible styles on .star-label:has(input:focus-visible) so the focus ring is visible without cluttering mouse interactions.