mui / mui/base-ui

[select] Announces completion selected for all items

Open
#5,472 0 comments 0 reactions 0 assignees View on GitHub
browser: Chrome browser: Safari type: bug
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):

Image

Image

Contributor guide

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.