react / react/react-native

Accessibility state treated incorrectly on iOS

Open
#45,300 4 comments 0 reactions 2 assignees View on GitHub

@blakef is already working on this.

Since Jul 12, 2024.

Accessibility Help Wanted :octocat: Issue: Author Provided Repro Platform: iOS
Dominant language
C++
Stars
127k
Forks
25.3k
Avg merge
1d 23h
Merged PRs (30d)
4

Description

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.