JedWatson / JedWatson/react-select
Screen reader is not reading focused option using Narrator
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 28k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
Problem
We are using the Select inside a table, the parent element has a role="row". This causes the screen reader not reading focused option. If remove the parent's role, the screen reader works well.
<div role="row">
<Select options={colourOptions} />
</div>
Example
https://codesandbox.io/s/react-select-v3-sandbox-forked-3qbhi?file=/example.js
Environment
Narrator + Edge
Possible solution
Append the LiveRegion to document.body
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 reproducing the issue in the linked CodeSandbox with Narrator and Edge, keeping Select inside an element with role="row". Then inspect the Select's LiveRegion behavior and the proposed document.body placement. Done means Narrator announces the focused option without removing the row role.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100