JedWatson / JedWatson/react-select
No ability to set aria-label to option
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 28k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
Discussed in https://github.com/JedWatson/react-select/discussions/5557
Originally posted by mellis481 February 14, 2023
It's possible to set an aria-label (or use aria-labelledby) on an HTML select option, but that doesn't not appear to be possible for an option in react-select. I've tried replacing the Option component as well as using the formatOptionLabel prop, but neither work. In fact, if I manually set an aria-label on all option nodes, the label is never announced by a screen reader.
An example use-case is if I want a label to visually appear as "= (Equals)" or "- (Subtract)", but want to set an aria-label so a screen reader won't read out "equals equals" or "minus subtract" respectively.
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 with the custom Option component and formatOptionLabel prop behavior described in the issue, then reproduce the screen-reader output for option labels such as "= (Equals)" and "- (Subtract)". Done means an option can expose a distinct aria-label or aria-labelledby value that is announced correctly without changing its visual label.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- accessibility, frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100