Comfy-Org / Comfy-Org/ComfyUI_frontend

Make sign-up password requirements accessible to screen readers

Open
#14,920 1 comment 1 reaction 0 assignees View on GitHub
area:ui Potential Bug
Dominant language
TypeScript
Stars
2k
Forks
699
Avg merge
1d 7h
Merged PRs (30d)
490

Description

## What happened?

The password requirements on the cloud sign-up form are visual-only feedback:

- The requirements are not programmatically associated with the native password input.
- The list is conditionally mounted while the field is focused, so adding `aria-describedby` to the wrapper alone would not reliably announce it on focus.
- PrimeVue `Password` does not forward a plain `aria-describedby` attribute to its inner input; the association must use its input props or pass-through API.
- Each requirement's met/unmet state is currently conveyed by color alone.
- Adding `role="status"` alone would not announce state changes because only CSS classes change, and announcing the full list on every keystroke could be overly verbose.

This was identified while reviewing #14859. The visual requirements list should continue to hide on blur as specified by FE-1534, but the accessible description and state must remain usable.

## Steps to reproduce

1. Open `/cloud/signup` with a screen reader.
2. Focus the Password field and enter a partial password.
3. Observe that the requirements are not programmatically associated with the native input and met/unmet changes are not conveyed without color.

## Expected behavior

- The native password input is programmatically associated with its requirements.
- The description is available when focus enters the field, without relying on a node created after the focus event.
- Met/unmet state is exposed textually or through another non-color-only signal.
- Any live announcements are concise and avoid repeating the full list on every keystroke.
- The visual checklist still follows FE-1534 and hides when the Password field loses focus.
- Automated coverage verifies the accessible relationship and state semantics.

## Implementation notes

A likely direction is to keep a requirements description available in the accessibility tree, visually hide it when appropriate, and apply `aria-describedby` to PrimeVue's inner input through `inputProps` or its pass-through API. The exact live-region behavior should be validated with screen readers rather than adding `role="status"` mechanically.

## How is this affecting you?

Feature doesn't work as expected

## Browser

All supported browsers

Contributor guide

Open the contributing guide

Research direction

Start at the /cloud/signup Password field and inspect how PrimeVue Password exposes its native input and how the requirements list is mounted and hidden under FE-1534. Review the existing automated coverage, then verify the accessible relationship, textual met/unmet state, concise announcements, and blur behavior with a screen reader.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
58/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.