ragusa-it/ragusaitweb
1
0
Fork 0
Code Issues Pull Requests 6 Actions Packages Projects Releases Wiki Activity

feat: add accessible required field indicators and alerts

Browse Source 
- 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>
This commit is contained in:
google-labs-jules[bot]
2026-01-28 02:10:17 +00:00
parent 6b8f54072e
commit e14ce38f61
5 changed files with 55 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.jules/palette.md Normal file
View File

@@ -0,0 +1,3 @@
## 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.