Review form includes required and optional fields clearly marked

WCAG 2.2 SC 1.3.1 (Info and Relationships) and SC 3.3.2 (Labels or Instructions) require that every form input have a programmatically associated label and that required fields be identified. A review form where labels exist only as placeholder text fails both criteria: placeholders vanish on focus, and screen readers cannot associate floating-label text with the input's purpose. A form that doesn't distinguish required from optional fields produces higher abandonment rates — users guess wrong, get validation errors, and leave. This is particularly acute for star rating inputs and photo upload fields that have no obvious placeholder.

Use explicit <label htmlFor> elements tied to each input's id, and mark every field's required or optional status in the review form component.

<form>
  <div>
    <label htmlFor="rating">
      Rating <span aria-label="required" className="text-red-500">*</span>
    </label>
    <StarInput id="rating" aria-required="true" />
  </div>

  <div>
    <label htmlFor="review-text">
      Your Review <span aria-label="required" className="text-red-500">*</span>
    </label>
    <textarea id="review-text" required minLength={10} />
  </div>

  <div>
    <label htmlFor="photos">
      Photos <span className="text-muted">(optional)</span>
    </label>
    <input id="photos" type="file" accept="image/*" multiple />
  </div>
</form>

Do not rely on placeholder text to convey label meaning — it disappears on focus and has no ARIA role.