[iOS][Accessibility] VoiceOver will read aloud the text from image and even texts that overlaid on top of the image

[retyui]

Description

Actual:

VoiceOver will read aloud the text from image and even texts that overlaid on top of the image

if wrap an image component with accessible={true} (see video below) & code here: https://github.com/retyui/react-native-voice-over-issue/blob/main/App.tsx

I tried to hide element from accessibility using, but it' doesn't help

  accessible: false,
  accessibilityRole:'none',
  accessibilityElementsHidden:true, // ios only

Expected: I'm expecting only a accessibilityLabel to be read aloud of <Pressable accessible={true} />

Steps to reproduce

1. Create a new Project
2. add <Pressable accessible={true} />
3. inside Pressable put an Image component with and use any image with a text as source
4. Put float text on the image
5. Enable VoiceOver with Text Recognition enabled
   

React Native Version

0.73.4

Affected Platforms

Runtime - iOS

Output of npx react-native info

System:
  OS: macOS 14.2.1
  CPU: (10) arm64 Apple M1 Pro
  Memory: 236.81 MB / 32.00 GB
  Shell:
    version: 3.6.1
    path: /opt/homebrew/bin/fish
Binaries:
  Node:
    version: 20.11.0
    path: /usr/local/bin/node
  Yarn:
    version: 1.22.19
    path: /opt/homebrew/bin/yarn
  npm:
    version: 9.7.2
    path: /opt/homebrew/bin/npm
  Watchman:
    version: 2023.09.04.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.13.0
    path: /opt/homebrew/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: Not Found
  Xcode:
    version: 15.2/15C500b
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.8
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react: Not Found
  react-native: Not Found
  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

no logs...

Reproducer

https://github.com/retyui/react-native-voice-over-issue

Screenshots and Videos

PXL_20240209_143201887.mp4

[react-native-bot]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[retyui]

...

[Hosam-hsm]

@retyui Were you able to find a solution?

[retyui]

@Hosam-hsm I've patched react native to prevent this behavior

[Hosam-hsm]

@retyui Do you mind sharing the patch here?