RocketChat / RocketChat/Rocket.Chat
fix: standardize aria-invalid handling across registration forms
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 46.1k
- Forks
- 13.9k
- Avg merge
- 3d 3h
- Merged PRs (30d)
- 130
Description
Proposed changes
Standardize the aria-invalid attribute handling across the web-ui-registration package.
Currently, different forms use different implementations, including:
aria-invalid={errors.x ? 'true' : 'false'}
aria-invalid={errors.x ? 'true' : undefined}
aria-invalid={Boolean(errors.email)}
aria-invalid={errors?.email?.type === 'required'}
This results in inconsistent accessibility semantics across the registration, login, password reset, and email confirmation forms.
The recommended implementation is:
aria-invalid={errors.fieldName ? 'true' : undefined}
This avoids explicitly setting aria-invalid="false" before a field has actually been validated and provides consistent behavior across all affected fields.
Steps to reproduce :-
- Open the packages/web-ui-registration package.
- Inspect the form components that use aria-invalid.
- Compare the implementations in:
RegisterForm.tsx
ResetPasswordPage.tsx
LoginForm.tsx
ResetPasswordForm.tsx
EmailConfirmationForm.tsx - Observe that aria-invalid is implemented using multiple different patterns.
- Trigger validation errors and inspect the rendered HTML/accessibility tree.
- Observe that the resulting aria-invalid behavior differs between fields/forms.
Before proof
Currently, the package contains multiple implementations:
// Pattern 1
aria-invalid={errors.x ? 'true' : 'false'}
// Pattern 2
aria-invalid={errors.x ? 'true' : undefined}
// Pattern 3
aria-invalid={Boolean(errors.email)}
// Pattern 4
aria-invalid={errors?.email?.type === 'required'}
After proof
All affected fields should consistently use:
aria-invalid={errors.fieldName ? 'true' : undefined}
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in packages/web-ui-registration and inspect aria-invalid usage in RegisterForm.tsx, ResetPasswordPage.tsx, LoginForm.tsx, ResetPasswordForm.tsx, and EmailConfirmationForm.tsx. Compare each affected field with the recommended error-based pattern, then trigger validation errors and inspect the rendered HTML or accessibility tree. Done means all affected fields use consistent aria-invalid behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- accessibility, frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 76/100