Skip to content

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

Open

Description

@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

Activity

  1. Hosam-hsm commented on Dec 23, 2024

    @Hosam-hsm

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

  2. vbriand commented on Dec 23, 2024

    @vbriand
    Author

    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.

  3. TechWilk commented on Jan 15, 2025

    @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

  4. mpolmeta commented on Jun 8, 2026

    @mpolmeta

    Should be fixed by b60f533

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions