[iOS] accessibilityElementsHidden does not work if the parent view is accessible

[vbriand]

Description

When a parent view has the accessible prop set, VoiceOver reads all the text nodes and accessibility labels of its children even if one of them has a parent with the accessibilityElementsHidden / aria-hidden prop set.

Steps to reproduce

1. Open the Expo Snack on an iOS device with Expo Go.
2. Enable VoiceOver (triple press on the power button, if enabled in the settings. Otherwise enable it in Settings > Accessibility > VoiceOver).
3. Verify that VoiceOver reads all three lines in both cases when it should only read "First layout" in the second one, like TalkBack on Android does.

React Native Version

0.74.5

Affected Platforms

Runtime - iOS

Output of npx react-native info

System:
  OS: macOS 14.6.1
  CPU: (10) arm64 Apple M1 Pro
  Memory: 536.33 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /opt/homebrew/bin/zsh
Binaries:
  Node:
    version: 21.6.1
    path: ~/.local/share/mise/installs/node/21.6.1/bin/node
  Yarn:
    version: 1.22.21
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.2.4
    path: ~/.local/share/mise/installs/node/21.6.1/bin/npm
  Watchman:
    version: 2024.03.18.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /Users/valou/.local/share/mise/installs/ruby/3.2.3/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.2
      - iOS 17.2
      - macOS 14.2
      - tvOS 17.2
      - visionOS 1.0
      - watchOS 10.2
  Android SDK: Not Found
IDEs:
  Android Studio: 2023.1 AI-231.9392.1.2311.11255304
  Xcode:
    version: 15.2/15C500b
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.10
    path: /Users/valou/.local/share/mise/installs/java/adoptopenjdk-17.0.10+7/bin/javac
  Ruby:
    version: 3.2.3
    path: /Users/valou/.local/share/mise/installs/ruby/3.2.3/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.74.5
    wanted: 0.74.5
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Stacktrace or Logs

N/A

Reproducer

https://snack.expo.dev/@vbriand/voiceover-accessible-bug

Screenshots and Videos

accessible_bug.mov

[Hosam-hsm]

Facing same issue. @vbriand Were you able to solve this?

[vbriand]

Facing same issue. @vbriand Were you able to solve this?

Sadly no, but I haven't had much time to delve much further into the issue to be honest.

[TechWilk]

I've run into the same issue today. It looks like if you set accessibilityLabel="" as well as (or instead of) accessibilityElementsHidden it works around the issue for now.

My use case is an icon component (similar to react-native-vector-icons) which uses characters of a font-based icon pack. Clearly you don't want the screen reader to read out characters like j when you're showing a settings-icon.

<Text 
    selectable={false}
    accessibilityElementsHidden={true}
    aria-hidden={true}
    accessibilityLabel=""
>
    {glyph}
</Text>

Note: it looks like this bug was also raised a few years ago in #34528