React: How to implement accessibility in React forms?

1function AccessibleForm() {
2  const [errors, setErrors] = useState<Record<string, string>>({});
3
4  const validate = (name: string, value: string) => {
5    if (!value) return `${name} is required`;
6    return null;
7  };
8
9  return (
10    <form onSubmit={handleSubmit} noValidate>
11      <div className="field">
12        <label htmlFor="email">
13          Email <span aria-hidden="true">*</span>
14        </label>
15        <input
16          id="email"
17          type="email"
18          name="email"
19          required
20          aria-required="true"
21          aria-invalid={!!errors.email}
22          aria-describedby={errors.email ? "email-error" : undefined}
23        />
24        {errors.email && (
25          <span id="email-error" className="error" role="alert">
26            {errors.email}
27          </span>
28        )}
29      </div>
30
31      <div className="field">
32        <label htmlFor="password">
33          Password <span aria-hidden="true">*</span>
34        </label>
35        <input
36          id="password"
37          type="password"
38          name="password"
39          required
40          aria-required="true"
41          aria-describedby="password-help"
42        />
43        <span id="password-help" className="help">
44          Must be at least 8 characters
45        </span>
46      </div>
47
48      <button type="submit">Submit</button>
49    </form>
50  );
51}