Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[iOS][Accessibility] VoiceOver i18n accessibilityState read in English only

See original GitHub issue

When using some accessibilityStates, the state postfix/prefix is read out in English, not the phone’s language on iOS.

It seems like accessibilityState={{ selected }} translates correctly, but checked and collapsed do not. I have not tried the others.

React Native version: 0.61.5

System:
    OS: macOS Mojave 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
    Memory: 101.02 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.13.0 - ~/.nvm/versions/node/v10.13.0/bin/node
    Yarn: 1.22.4 - ~/.yvm/shim/yarn
    npm: 6.13.4 - ~/.nvm/versions/node/v10.13.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
    Android SDK:
      API Levels: 23, 25, 26, 27, 28
      Build Tools: 23.0.1, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 26.0.3, 27.0.0, 27.0.3, 28.0.2, 28.0.3
      System Images: android-23 | Intel x86 Atom_64, android-23 | Google APIs Intel x86 Atom_64, android-25 | Google APIs Intel x86 Atom_64, android-25 | Google Play Intel x86 Atom, android-26 | Google APIs Intel x86 Atom_64, android-27 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom
      Android NDK: 17.1.4828580
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5791312
    Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0
    react-native: 0.61.5 => 0.61.5
  npmGlobalPackages:
    react-native-cli: 2.0.1
    react-native-git-upgrade: 0.2.7
    react-native-permissions: 2.0.1
    react-native: 0.61.5

Steps To Reproduce

Create a clean project: npx react-native init a11ybug
Run it on an iPhone device with phone language not English (Norwegian in my case)
Add the following to your App.js:

        <TouchableOpacity
          accessibilityRole="checkbox"
          accessibilityState={{ checked: true }}>
          <View>
            <Text>Trykk her</Text>
          </View>
        </TouchableOpacity>

Make sure to activate VocieOverx

When you mark the checkbox above, VoiceOver will read “Trykk her checkbox checked”.

Expected Results

I am not sure what the exact correct translation would be for this, but I’d expect something like “Trykk her, markert avmerkingsknapp.”

Issue Analytics

State:
Created 4 years ago
Reactions:3
Comments:8 (4 by maintainers)

Top GitHub Comments

1reaction

TheSaviorcommented, Mar 24, 2020

I appreciate the detailed proposal!

I think with React Native, the question we often want to start by asking is how do the native platforms handle this? Is there some way we can piggyback on that instead of reimplementing things in user land?

Understanding how native apps make the talkback responses localized would probably be a good starting point.

0reactions

stale[bot]commented, Jun 29, 2020

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.