Comfy-Org / Comfy-Org/ComfyUI_frontend
a11y: wire aria-invalid and aria-describedby on username input in ComfyHubCreateProfileForm
- Dominant language
- TypeScript
- Stars
- 2k
- Forks
- 704
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 512
Description
## Summary
The username error message introduced in PR #10128 is not programmatically associated with the username input field, which means assistive technologies (screen readers) cannot announce the validation error to users.
## Required changes
In `src/platform/workflow/sharing/components/profile/ComfyHubCreateProfileForm.vue`:
1. Add `aria-invalid` and `aria-describedby` to the `Input` component (id="profile-username"):
- `:aria-invalid="showUsernameError ? 'true' : 'false'"`
- `:aria-describedby="showUsernameError ? 'profile-username-error' : undefined"`
2. Add `id="profile-username-error"` to the `
` element that renders when `showUsernameError` is true.
This ensures the error message is programmatically linked to the input, satisfying WCAG 1.3.1 (Info and Relationships) and 4.1.3 (Status Messages).
## References
- PR: https://github.com/Comfy-Org/ComfyUI_frontend/pull/10128
- Review comment: https://github.com/Comfy-Org/ComfyUI_frontend/pull/10128#discussion_r2943841266
- Requested by: @christian-byrne
┆Issue is synchronized with this [Notion page](https://www.notion.so/Issue-10462-a11y-wire-aria-invalid-and-aria-describedby-on-username-input-in-ComfyHubCreateProfi-32d6d73d36508113b55ce9f0a8c7151c) by [Unito](https://www.unito.io)
Contributor guide
Assessment
This issue has not been assessed yet.