Comfy-Org / Comfy-Org/ComfyUI_frontend
Make sign-up password requirements accessible to screen readers
- 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
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