Skip to content

ForgotPasswordForm and ResetPasswordForm still funnel field errors into one unlabelled alert #867

Description

@TortoiseWolfe

ForgotPasswordForm and ResetPasswordForm have the identical shape that #857 just fixed in SignInForm and SignUpForm: field-specific validation funnelled into a single form-level alert with no id, and no input carrying aria-invalid or aria-describedby.

file line what is set field it is really about
ForgotPasswordForm.tsx :145 form-level error email validation
ResetPasswordForm.tsx :36 setError(passwordValidation.error) password
ResetPasswordForm.tsx :41 'Passwords do not match' confirm-password

They were deliberately left out of #866 rather than silently widening its scope — but they are the same defect, and leaving two of four forms behind is worse than either doing all four or none.

The pattern to copy

#866 established it in both directions:

  • a field-scoped error kept apart from the form-level one, so only client-side validation is attached to a field
  • aria-invalid + aria-describedby pointing at an id'd slot containing a role="alert" span
  • errors that are genuinely not about one field — rate limits, captcha, and anything that would leak account existence — stay form-level on purpose

ContactForm.tsx:262-278 remains the reference implementation.

Testing notes, learned the hard way in #866

  • findByRole('alert') resolves to an EMPTY live region on these forms. The assertion then reads Received: <empty> and tells you nothing. Follow the association instead: read aria-describedby, then look up that id.
  • A value the browser rejects never reaches React. type="email" inputs need something like a@b — accepted by native validation, rejected by validateEmail (which requires a dot in the domain and a 2+ alpha TLD).
  • Assert that the OTHER fields stay clean. An implementation that marks every input invalid satisfies "the error is associated" and still tells the user nothing. That check is what caught a deliberately mis-routed error in fix(#857): auth errors now say which field they are about #866.
  • Both *.accessibility.test.tsx files for these forms are likely to contain the same generator stub — a should have proper ARIA attributes case with only example comments and no assertions. Check before adding new files; that is the natural home.

Refs #857, #396

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions