react / react/react-native

Accessibility state treated incorrectly on iOS

Ouverte
#45,300 4 commentaires 0 réactions 2 personnes assignées Voir sur GitHub

@blakef y travaille déjà.

Depuis le 12/7/2024.

Accessibility Help Wanted :octocat: Issue: Author Provided Repro Platform: iOS
Langage dominant
C++
Étoiles
127k
Forks
25.3k
Merge moyen
1 j 23 h
PR mergées (30 j)
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

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Évaluation

Cette issue n'a pas encore été évaluée.

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.