Skip to content

accessibilityElementsHidden does not hide elements if nested under accessible #34528

@MrGVSV

Description

@MrGVSV

Description

Take the following code:

<View accessible>
  <Text accessible={false}>Hello</Text>
  <Text>World</Text>
</View>

Both iOS and Android screen readers read out "Hello World" due to the outer View specifying that it is accessible.

However, if we do this:

<View accessible>
  <Text 
    accessible={false} 
    accessibilityElementsHidden 
    importantForAccessibility="no-hide-descendants"
  >
    Hello
  </Text>
  <Text>World</Text>
</View>

Then Android reads out "World", while iOS still reads out "Hello World". This seems like a possible bug as the property accessibilityElementsHidden is supposed to be "similar to the Android property importantForAccessibility="no-hide-descendants"."

Version

0.67.2

Output of npx react-native info

System:
    OS: macOS 12.5.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 133.58 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
    Yarn: 1.13.0 - ~/.dev/yarn/1.13.0/bin/yarn
    npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm
    Watchman: 2022.03.21.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.11.2 - ~/.gem/ruby/2.7.5/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.4, iOS 15.5, macOS 12.3, tvOS 15.4, watchOS 8.5
    Android SDK:
      API Levels: 29, 30
      Build Tools: 29.0.2, 30.0.2, 32.0.0, 33.0.0
      System Images: android-29 | Google APIs ARM 64 v8a, android-29 | Google APIs Intel x86 Atom_64, android-32 | Google APIs ARM 64 v8a, android-32 | Google Play ARM 64 v8a
      Android NDK: 22.1.7171670
  IDEs:
    Android Studio: 2021.1 AI-211.7628.21.2111.8309675
    Xcode: 13.4.1/13F100 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.11 - /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2 
    react-native: 0.67.2 => 0.67.2 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

  1. Setup a project and include the code above
  2. Enable VoiceOver/TalkBack
  3. Tap on the element and verify that iOS reads out the full text in both scenarios

Snack, code example, screenshot, or link to a repository

https://snack.expo.dev/@shopigino/accessibility-bug

Metadata

Metadata

Assignees

No one assigned

    Labels

    Needs: Triage 🔍StaleThere has been a lack of activity on this issue and it may be closed soon.

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions