- Add visual asterisk for required inputs in Input.tsx - Add .required style in Input.module.css - Update Contact form to use required props and noValidate - Add role="alert" to Contact form success/error messages - Add tests for required field rendering Co-authored-by: ragusa-it <196988693+ragusa-it@users.noreply.github.com>
393 B
393 B
2024-05-22 - Semantic Required Fields with Custom Validation
Learning: To combine custom validation UI with semantic required attributes (vital for a11y), add noValidate to the <form>. This prevents native browser bubbles while keeping the accessibility benefits.
Action: Use noValidate on forms when implementing custom validation but keep required attributes on inputs.