Skip to content

feat(ui): add inline form validation error display (#162) - #262

Open
lmduy2612 wants to merge 1 commit into
Dorisio:mainfrom
lmduy2612:feat/issue-162-inline-form-validation-errors
Open

lmduy2612 wants to merge 1 commit into
Dorisio:mainfrom
lmduy2612:feat/issue-162-inline-form-validation-errors

Conversation

@lmduy2612

Copy link
Copy Markdown

Closes #162.

Summary of Changes

  • Implements accessible InlineFormError component in src/components/shared/inline-form-error.tsx with role="alert", aria-live="polite", alert icons, and unique ID linking.
  • Adds user-friendly Zod error message mapping via getFriendlyErrorMessage in src/components/auth/form-error-mapper.ts providing specific, actionable error messages for email, name, password, and confirmation fields.
  • Integrates inline validation display into SignInForm and SignUpForm with visual feedback (border-destructive focus-visible:ring-destructive) and full ARIA attributes (aria-invalid and aria-describedby).
  • Configures automatic focus to the first invalid field upon form submission failure for keyboard and screen reader accessibility.
  • Adds comprehensive unit test suite in src/test/unit/inline-form-validation-errors.test.tsx verifying inline error display, ARIA attributes, first-field focus, and user-friendly error mapping (12/12 tests passing).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat: Add inline form validation error display

1 participant