RocketChat / RocketChat/Rocket.Chat

fix: standardize aria-invalid handling across registration forms

Open
#42,121 6 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

type: bug
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 :-

  1. Open the packages/web-ui-registration package.
  2. Inspect the form components that use aria-invalid.
  3. Compare the implementations in:
    RegisterForm.tsx
    ResetPasswordPage.tsx
    LoginForm.tsx
    ResetPasswordForm.tsx
    EmailConfirmationForm.tsx
  4. Observe that aria-invalid is implemented using multiple different patterns.
  5. Trigger validation errors and inspect the rendered HTML/accessibility tree.
  6. 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

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 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.