RocketChat / RocketChat/Rocket.Chat

feat: add autoComplete support to authentication and registration forms

Open Beginner friendly
#42,228 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

type: feature
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 email
RegisterForm.tsx Username username
RegisterForm.tsx Password new-password
RegisterForm.tsx Password Confirmation new-password
ResetPasswordForm.tsx Email email
ResetPasswordPage.tsx New Password new-password
ResetPasswordPage.tsx Password Confirmation new-password
EmailConfirmationForm.tsx Email 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-password from new-password fields.
  • 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.