Machine Coding: Accessible Star Rating Widget

1import React, { useState, KeyboardEvent } from 'react';
2
3interface StarRatingProps {
4  max?: number;
5  value: number;
6  onChange: (value: number) => void;
7  disabled?: boolean;
8}
9
10export function StarRating({
11  max = 5,
12  value,
13  onChange,
14  disabled = false,
15}: StarRatingProps) {
16  const [hoverValue, setHoverValue] = useState<number | null>(null);
17
18  // Active display rating is either current hover preview or committed value
19  const displayValue = hoverValue ?? value;
20
21  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
22    if (disabled) return;
23
24    switch (e.key) {
25      case 'ArrowRight':
26      case 'ArrowUp':
27        e.preventDefault();
28        onChange(Math.min(max, value + 1));
29        break;
30      case 'ArrowLeft':
31      case 'ArrowDown':
32        e.preventDefault();
33        onChange(Math.max(1, value - 1));
34        break;
35      case 'Home':
36        e.preventDefault();
37        onChange(1);
38        break;
39      case 'End':
40        e.preventDefault();
41        onChange(max);
42        break;
43    }
44  };
45
46  return (
47    <div
48      role="radiogroup"
49      aria-label="Rating"
50      tabIndex={disabled ? -1 : 0}
51      onKeyDown={handleKeyDown}
52      onMouseLeave={() => setHoverValue(null)}
53      className="star-rating-container"
54      style={{ display: 'inline-flex', gap: '4px', cursor: disabled ? 'not-allowed' : 'pointer' }}
55    >
56      {Array.from({ length: max }, (_, index) => {
57        const starNumber = index + 1;
58        const isFilled = starNumber <= displayValue;
59
60        return (
61          <span
62            key={starNumber}
63            role="radio"
64            aria-checked={starNumber === value}
65            aria-label={`${starNumber} of ${max} stars`}
66            onClick={() => !disabled && onChange(starNumber)}
67            onMouseEnter={() => !disabled && setHoverValue(starNumber)}
68            style={{
69              fontSize: '28px',
70              color: isFilled ? '#f59e0b' : '#d1d5db',
71              userSelect: 'none',
72              transition: 'color 150ms ease-in-out',
73            }}
74          >
75            ★
76          </span>
77        );
78      })}
79    </div>
80  );
81}