feat: standardize form validation UX with accessible error handling

[RuthChisom]

Implements standardized UI/UX patterns for form validation, focusing on accessibility and clear error
communication. This includes a FormField wrapper for field-level feedback and an ErrorSummary for
form-wide error reporting.

Changes

• Created FormField component:
  • Supports label, helperText, and error props.
  • Automatically manages aria-describedby and aria-invalid.
  • Injects consistent styling for error states.
• Created ErrorSummary component:
  • Provides a focusable alert box (WCAG compliant).
  • Lists errors with anchor links to specific fields.
• Added unit tests in src/components/FormValidation.test.tsx.
• Updated src/app/page.tsx with a functional demo.

How to test

1. Run npm install to ensure dependencies are present.
2. Run npm test to verify ARIA associations.
3. Run npm run dev and navigate to the home page.
4. Attempt to submit the "Sign Up" form empty to trigger the error summary and field-level
   validation.

Notes

• Components are designed to be used with any form state management or as standalone elements.
• Uses aria-describedby to ensure screen readers read both instructions and errors.

Closes #15

[drips-wave]

@RuthChisom Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits