adobe / adobe/react-spectrum

RadioGroup with isRequired announces "Invalid data" on each radio button in VoiceOver before any user interaction

Open
#9,809 1 comment 0 reactions 0 assignees View on GitHub
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

When using `RadioGroup` with `isRequired={true}`, VoiceOver (iOS) announces "Invalid data" (or equivalent in the OS language, e.g. "Données non valides" in French) for each individual radio button on initial render, before the user has interacted with the form or attempted to submit. The radio button value isn't even read.

It is also reproducible on the official react-aria documentation page at : https://react-aria.adobe.com/RadioGroup#forms

### 🤔 Expected Behavior?

The expected behavior is that VoiceOver read the radio button's value and its position in the list. Then, VoiceOver can provide the validation rules for the RadioGroup.

### 😯 Current Behavior

The radio button value isn't even read. We only hear "Invalid data".

### 💁 Possible Solution

_No response_

### 🔦 Context

_No response_

### 🖥️ Steps to Reproduce

```


Dog
Cat
Dragon

Submit

```

### Version

react-aria-components@1.16.0 => @adobe/react-spectrum@3.46.2

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

Chrome, Safari

### If other, please specify.

_No response_

### What operating system are you using?

iOS 26.3.1

### 🧢 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.