JedWatson / JedWatson/react-select

Accessibility/LiveRegion: Selected options are not announced as selected if the object reference changed

Open
#5,424 3 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
28k
Forks
4.1k
PR merge metrics
No merged PRs in 30d

Description

See:
https://codesandbox.io/s/react-select-v5-sandbox-forked-gzdeq6?file=/example.js

As far as I can tell this is due to this code:
https://github.com/JedWatson/react-select/blob/da617c51b810c67d809dfde9cb9f3b5815313d91/packages/react-select/src/components/LiveRegion.tsx#L112-L116

In most places, the object reference is not relevant. Following this pattern, I think this should look like this:

    const isSelected = !!(
      focusedOption &&
      selectValue &&
      selectValue.some(option => option.value === focusedOption.value)
    );

I'll send a PR.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the announcement behavior using the linked CodeSandbox, then inspect the referenced logic in packages/react-select/src/components/LiveRegion.tsx around lines 112-116. Confirm the behavior when the selected option's object reference changes; done means selected options are announced as selected in that case.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.