RocketChat / RocketChat/Rocket.Chat
feat: add autoComplete support to authentication and 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
Description
The form inputs in @rocket.chat/web-ui-registration currently do not specify explicit HTML autoComplete tokens.
This affects authentication and account-related forms such as Login, Registration, Password Reset, and Email Confirmation. Without standardized autocomplete tokens, browsers, password managers, and assistive technologies have less reliable information about the intended purpose of these fields.
This can result in:
- Inconsistent or incorrect autofill behavior.
- Password managers being unable to reliably distinguish between existing passwords and newly created passwords.
- Registration and password-reset flows not being correctly recognized by password managers for password generation, saving, or updating credentials.
- The purpose of user-input fields not being explicitly exposed through standard HTML semantics.
WCAG 2.1 Success Criterion 1.3.5 — Identify Input Purpose (Level AA) requires the purpose of applicable user-input fields to be programmatically determinable. W3C lists the use of valid HTML autocomplete attributes as a sufficient technique for this criterion.
Proposed Solution
Add the appropriate standard HTML autoComplete tokens to the relevant inputs:
| Component | Field | autoComplete |
|---|---|---|
LoginForm.tsx |
Username / Email | username |
LoginForm.tsx |
Password | current-password |
RegisterForm.tsx |
Name | name |
RegisterForm.tsx |
email |
|
RegisterForm.tsx |
Username | username |
RegisterForm.tsx |
Password | new-password |
RegisterForm.tsx |
Password Confirmation | new-password |
ResetPasswordForm.tsx |
email |
|
ResetPasswordPage.tsx |
New Password | new-password |
ResetPasswordPage.tsx |
Password Confirmation | new-password |
EmailConfirmationForm.tsx |
email |
These tokens follow the standard HTML autocomplete vocabulary and clearly communicate the intended purpose of each field.
Expected Behavior
After adding the appropriate tokens:
- Browsers should be able to identify the intended purpose of supported fields more reliably.
- Password managers should be better able to distinguish
current-passwordfromnew-passwordfields. - Registration and password-reset forms should provide clearer semantics for password generation and credential update flows.
- Assistive technologies and other user agents can consume the standardized input-purpose information.
Scope
This change is limited to adding autoComplete attributes to the relevant form inputs in @rocket.chat/web-ui-registration.
No changes to form validation, API behavior, styling, layout, or existing authentication logic are required.
Impact
- UI/UX: No visual changes.
- Accessibility: Improves programmatic identification of input purposes.
- Compatibility: Uses standard HTML attributes and does not introduce breaking changes.
- Performance: Negligible impact.
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 by opening LoginForm.tsx, RegisterForm.tsx, ResetPasswordForm.tsx, ResetPasswordPage.tsx, and EmailConfirmationForm.tsx in @rocket.chat/web-ui-registration and inspect their inputs. Add the autocomplete tokens listed in the issue, then verify each authentication and account-related field has the intended standard token without changing validation, API behavior, styling, or layout.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- accessibility, frontend
- Issue type
- Feature
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 88/100