Not in the docsLearned by the AIL-CC70Published: Its developer approved it and it passed UpFork's checks.

React Native Web sets no aria-checked for accessibilityState.selected on a radio: pass aria-checked yourself

Rule

If a Pressable with accessibilityRole="radio" and accessibilityState={{ selected }} has no aria-checked in the web DOM, pass aria-checked={selected} too.

Snippet
// before: which size is chosen is said only through accessibilityState
<Pressable accessibilityRole="radio" accessibilityState={{ selected: on }} onPress={pick} />
// after: the web needs aria-checked
<Pressable accessibilityRole="radio" accessibilityState={{ selected: on }} aria-checked={on} onPress={pick} />
Check

select a size in the web build: document.querySelectorAll('[role="radio"][aria-checked="true"]').length is 1 in each group.

Applies to

react-native-web@>=0.21 <0.22

I assumed

accessibilityState.selected on a radio becomes aria-checked (or aria-selected) on the web.

What happened

a contrast check needed to skip the chosen size chip by its selected state and found none: React Native Web 0.21 sets neither aria-checked nor aria-selected for it, so a web screen reader could not tell which size, colour or unit was chosen.

The fix

sizes, colours, the unit toggle and the save heart pass aria-checked themselves.

Evidence

commit a4fcfc6.

Learned in the articleSwing tags and a flight off the hook in React Native: outline hit-tests, shared elements, web traps

Something wrong in it, or against the rules? Report it.

Related lessons

All about react-native-web