Accessibility state treated incorrectly on iOS

[biadars]

Description

I'm seeing two strange behaviours around the disabled property and accessibilitState.disabled on iOS:

• Setting disabled={true} on a TouchableOpacity leads to Voiceover reading the label of the touchable opacity followed by "link"
  • Even if you set role="button" and accessibilityRole="button", VoiceOver will still read out " link button"
  • In the example I've included you can see once you bump the counter up and the minus button is no longer disabled, it stops getting read out as a link
• Whatever is set for accessibilityState.disabled is never read out. Other properties, like accessibilityState.selected are still read out

Both of these issues happen on iOS (I'm including a snack, my iOS version is 17.5.1 - I've not tested this on other iOS versions), but TalkBack correctly reads out the button role and accessibilityState.

Steps to reproduce

1. Create a and assign it a button role and accessibilityRole
2. Set disabled={true} on it and accessibilityState={{disabled: true}}
3. Turn on VoiceOver and focus on the TouchableOpacity

Expected behaviour

• The TouchableOpacity's is read out as " button disabled"

Actual behaviour

• The TouchableOpacity is read out as " link button"
  • "disabled" is never read out
  • Removing disabled={true} leads to the component no longer being read out as a link

React Native Version

0.74.0

Affected Platforms

Runtime - iOS

Output of npx react-native info

Not applicable as developing directly in Expo Snack

Stacktrace or Logs

Not applicable as developing directly in Expo Snack

Reproducer

https://snack.expo.dev/_f-0w64MnvIqQ65myDxPW

Screenshots and Videos

No response

[github-actions[bot]]

:warning:	Add or Reformat Version Info
:information_source:	We could not find or parse the version number of React Native in your issue report. Please use the template, and report your version including major, minor, and patch numbers - e.g. 0.70.2

[biadars]

FYI this also occurs on iOS 16 - I've now tested it on iOS 16.7.8

[ziggear]

Hi @biadars I'm interested with this issue and tried to reproduce from your code with iOS 16.1.1 device and react native 0.74.3, something different happened than you described, my VoiceOver read the disabled minus button as "Dimmed button minus" and another add button as "button add".

I manually disabled the minus button:

<TouchableOpacity onPress={() => setCounter(counter - 1)}
                          role="button"
                          accessibilityRole="button"
                          disabled={true}
                          accessibilityState={{disabled: true}}
                          >

Here is my reproducing video: https://github.com/user-attachments/assets/a2ed8587-5d4c-4e75-b4c6-0eef407e476f