adobe / adobe/react-spectrum

Live regions are not announced when using `<Select>`

Open
#7,155 2 comments 0 reactions 0 assignees View on GitHub
needs investigation
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

### Provide a general summary of the issue here

I tried to use ARIA live regions with the RAC `` component, but changes to the page were not being announced as expected. In comparison, using a similar pattern with a native `` worked correctly (see demo below).

I tried to solve this on my own, but failed. But I found out that

- the `aria-controls` prop is not being passed down to any element within the RAC ``,
- passing the `aria-controls` prop to the `` element doesn't seem to have any effect on screen reader behavior, and
- manually correcting the DOM and adding the `aria-controls` to the hidden select does not have any effect either (I guess because it is in an `aria-hidden` tree anyway).

### 🤔 Expected Behavior?

When chosing an item from the `` (`ListBoxItem`) screen reades will announce the content change within the related live region.

### 😯 Current Behavior

When selecting an item, the screenreader will only read were the focus currently is.

### 💁 Possible Solution

I only found a work around by putting the `aria-controls` on a ``. But this changes the UX a lot, because after selecting something from the `` you also need to submit the form. But then the announcement works :)

I would gladly help were I can, but I have not enough experience with screen readers and accessibility I fear.

### 🔦 Context

I think this is a very common pattern. It basically boiles down to "user selects something, another part on the page dynamically updates".

### 🖥️ Steps to Reproduce

Code for reproduction: https://stackblitz.com/edit/sb1-tyujro?file=src%2FApp.tsx

If you just want to view only the app: https://sb1-tyujro.stackblitz.io

(I created the demo using bolt.new, which was super fast. I hope I found all the bugs it implemented :D)

### Version

1.4.0

### What browsers are you seeing the problem on?

Chrome

### If other, please specify.

_No response_

### What operating system are you using?

MacOS

### 🧢 Your Company/Team

_No response_

### 🕷 Tracking Issue

_No response_

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.