Improve UX form errors

[Sharqiewicz]

Task summary

Standardize form error timing across the app using the "reward early, punish late"

Problem / context

• Currently validation is inconsistent: some fields show errors on change, some on blur, some only on submit.
• This creates UX noise, makes WCAG compliance harder (3.3.1 Error Identification), and complicates implementation

Acceptance Criteria

Validation timing:

1. Before interaction: No errors shown until form submitted
2. On submit: Validate all, show error summary + inline errors, focus first error
3. On input: Clear error immediately when field becomes valid (don't wait for blur)
4. On blur: Show error if field is invalid + dirty
   ( 3 and 4 only after form submission(2) )

• use react-hook-form and yup

Accessibility (WCAG 3.3.1 compliance)

• Use aria-invalid="true" on invalid fields, "false" or remove when valid.
• Link error text via aria-describedby="field-error-id".
• Error text must be perceivable without color alone (don't rely solely on red borders).
• Consider aria-live="polite" for dynamic inline error updates to avoid overwhelming screen readers.
  ​