Comfy-Org / Comfy-Org/ComfyUI_frontend

a11y: wire aria-invalid and aria-describedby on username input in ComfyHubCreateProfileForm

Open
#10,462 0 comments 0 reactions 1 assignee Claimed by @christian-byrne View on GitHub
area:ui
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.