[select] Announces completion selected for all items
- Dominant language
- TypeScript
- Stars
- 10.9k
- Forks
- 543
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 101
Description
# Bug report
## Current behavior
When navigating through items in the Base UI `Select` component using VoiceOver on macOS, the announcements contain unexpected/incorrect information.
In Chrome v151.0.7922.138 (and some older versions), VoiceOver announces **"completion selected"** for each item as focus moves through the list, even when the item is not selected.
For example:
> "Gala, (1 of 5), completion selected"
In Safari 26.4, there is an additional issue where VoiceOver announces **"(null)"** for the currently focused option:
> "You are currently on a selectable (null), inside a list box."
The option itself has a visible label, so I would not expect `null` to be exposed or announced.
I can reproduce the behaviour on the Select documentation/example at https://base-ui.com/react/components/select.
## Expected behavior
When navigating through the options:
- VoiceOver should announce the option's accessible name and relevant position/state.
- It should only announce an option as **selected** when that option is actually selected.
- Safari/VoiceOver should not announce **"(null)"** for an option that has an accessible name.
## Reproducible example
The issue can be reproduced using the Select examples in the [Base UI documentation](https://base-ui.com/react/components/select).
Steps to reproduce:
1. Enable VoiceOver on macOS.
2. Open the Base UI Select documentation in Chrome or Safari.
3. Open one of the Select examples.
4. Navigate through the available options using the keyboard.
5. Listen to the announcement as the active option changes.
6. In Chrome 151.0.7922.138, notice that VoiceOver announces **"completion selected"** for each option.
7. In Safari 26.4, notice that VoiceOver may announce **"selectable (null)"** instead of the option's accessible name.
## Base UI version
v1.7.0
## Which browser are you using?
Reproduced in:
- Safari 26.4
- Chrome 148.0.7778.179
- Chrome 151.0.7922.138
## Which OS are you using?
macOS Sequoia 15.7.5
## Which assistive tech are you using (if applicable)?
VoiceOver
## Additional context
It's worth noting that [Ariakit](https://ariakit.com/components/select) has the same issue but [React Aria](https://react-aria.adobe.com/Select) doesn't so it appears to be a symptom of making Select a `role=combobox`.
It works fine for Aaron and James (who is on a different OS version to me) so perhaps it's an OS issue.
We could:
- Remove `role=combobox` and support all operating systems
- Ignore old operating system versions and ask people to upgrade if they report issues
Screenshots (Safari):
Contributor guide
Research direction
Start with the Select examples in the Base UI documentation and reproduce the announcements with VoiceOver on the listed Chrome and Safari versions. Trace the Select combobox accessibility behavior and compare the spoken option name and selected state against the expected announcements; done means unselected options are not announced as selected and named options are not announced as “(null)”.
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
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100