[iOS] [New Architecture 0.73.6] Missing accessibilityLabel Text and Switch Component

[renopp]

Description

There is an issue with rendering the Text and Switch components with custom accessibilityLabel on the iOS platform with new architecture enabled. It seems like the accessibilityLabel props not passing properly. However, there is no problem on the Android platform with new architecture enabled.

Steps to reproduce

1. yarn install
2. yarn start
3. yarn ios
4. After the app installed successfully open Xcode then go to menu Xcode -> Open Developer Tool -> Accessibility Inspector

React Native Version

0.73.6

Affected Platforms

Runtime - iOS

Areas

Fabric - The New Renderer

Output of npx react-native info

System:
  OS: macOS 13.5.2
  CPU: (8) arm64 Apple M1 Pro
  Memory: 84.02 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.10.0
    path: /usr/local/bin/node
  Yarn:
    version: 1.22.19
    path: ~/.yarn/bin/yarn
  npm:
    version: 8.12.1
    path: /opt/homebrew/bin/npm
  Watchman:
    version: 2023.12.04.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.12.1
    path: /usr/local/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.9
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.73.6
    wanted: 0.73.6
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Stacktrace or Logs

no stacktrace

Reproducer

https://github.com/renopp/accessibilityLabel-issue

Screenshots and Videos

No response

[gedeagas]

Hello @renopp ,

Thank you for reporting this issue. Indeed, it appears to be a bug, and currently, there doesn't seem to be a quick workaround.

With the new architecture in iOS, the testID is now being mapped to the accessibilityIdentifier of a native component. Previously, it was mapped to the accessibilityLabel. This change has led to a situation where automated testing tools like Appium are unable to find elements using accessibilityLabel.

At the moment, it seems the only viable solution for iOS is to refactor your automated tests to use accessibilityIdentifier.

For related issues, please see: #38709

Unfortunately, I don't believe the React Native core team has a clear timeline for addressing this issue right now.

[cortinico]

cc @j-piasecki

[j-piasecki]

@renopp Looks like setting accessibilityLabel on Switch components works correctly now (tested on 3cb03cb):

As for the label being wrong for the text component, the prop is being passed properly but it's being overridden by the text value: https://github.com/facebook/react-native/blob/7061649c03d6a121cd5d2bd77daf60166d9b3188/packages/react-native/React/Fabric/Mounting/ComponentViews/Text/RCTParagraphComponentView.mm#L157-L160

The override was added here: 76a1db4

Would doing something like this:

- (NSString *)accessibilityLabel
{
  NSString *label = super.accessibilityLabel;
  if ([label length] > 0) {
    return label;
  }
  return self.attributedText.string;
}

be acceptable? On the first glance it should handle both cases cc @cortinico @sammy-SC

[cortinico]

Thanks for checking this @j-piasecki super valuable!

Would doing something like this:

Yup your suggested snipped sounds reasonable to me 👍 Don't you mind sending it out as a PR?

[j-piasecki]

Here it is: #45003