RocketChat / RocketChat/Rocket.Chat
Accessibility: MultiSelectSettingInput should use aria-labelledby instead of aria-label
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 46.1k
- Forks
- 13.9k
- Avg merge
- 3d 3h
- Merged PRs (30d)
- 130
Description
Description:
The MultiSelectSettingInput component currently uses aria-label with the setting ID, which causes screen readers to announce technical IDs instead of human-readable labels.
Proposed Fix:
Generate a stable labelId based on the setting _id.
Apply the id to the FieldLabel.
Use aria-labelledby in the MultiSelect component to point to the label.
Motivation:
Improves accessibility and follows WCAG best practices, ensuring a better experience for users relying on assistive technologies. Resolves a long-standing FIXME in the codebase.
Related PR:
#38666
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by locating the MultiSelectSettingInput component and its FieldLabel usage, then inspect the existing FIXME and the related PR #38666. Verify that the setting label is exposed through a stable label ID and that assistive technology announces the human-readable label rather than the setting ID.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 35/100