CODEWITHSUNDEEP
androidreact-nativeaccessibilitytalkback
Waltari
Waltari

Reputation: 1249

React-Native Talkback reads component accessibilityRole in wrong language

I have a React-Native application where we want to support Talkback in Finnish and English. When using Google's Text to Speech module in Finnish everything else works fine, except "button" is read as "button" instead of Finnish equivalent "Painike". On iOS it also works fine. I'm testing on Samsung A40. Samsung Text to Speech doesn't support Finnish at all.

So for example, when I press button that reads "Paina minua" it reads "Button, paina minua", instead of "painike, paina minua". This only happens in the application I am developing. It also reads Image components as Images instead of in Finnish. Probably other components too.

In apps like Discord, Facebook, Instagram etc. buttons are read correctly as "Painike" instead of "button".

What can I do to make Talkback work correctly in our application?

Example button definition:

<TouchableOpacity
  onPress={onPress}
  accessibilityRole="button"
>
  <Text>Paina minua</Text>
</TouchableOpacity>

react-native: 0.63.2

Here is a repo with minimal reproduction of the bug: https://github.com/Waltari10/accessibilityRoleRN

Upvotes: 4

Views: 2395

Answers (2)

Lukasz
Lukasz

Reputation: 1842

Try adding the code below to your android/app/src/main/res/values/strings.xml:

<string name="button_description" translatable="false">Painike</string>

Once you rebuild your app it will read what you need.

If you need to have it different for different languages go ahead and create the folder structure as follows:

folder structure

you can create values-xx folders for each language you want to support, just have a look here: https://developer.android.com/guide/topics/resources/localization

The list of all the available values you may want to override is available in this file: https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/res/views/uimanager/values/strings_unlocalized.xml

Upvotes: 5

Samuli Hakoniemi
Samuli Hakoniemi

Reputation: 19049

I've encountered the same problem at least on testing with simulator.

One option is to make accessibilityHint verbose enough to "override" the concept of accessibilityRole read out only in Finnish.

Another, though a hacky solution would be using AccessibilityInfo.announceForAccessibility() instead and to write a helper utility for all the touchable / pressable components. So, instead of reading role+label+hint, you would explicitly trigger announcement with correct translations?

Upvotes: 2

Related Questions