Tab on iOS - unable to override default accessibilityValue (tab description), no accessibilityRole communicated, no matching accessibilityTrait to provide.

[smjurek]

Hi,

I'm running into an issue with accessibility trying to use any touchable component as a tab on iOS.
When the component's role is set to 'tab' on iOS, it will include an accessibilityValue 'Tab description' that cannot be overridden in any way. I tested this on Android, where the behaviour is correct and the 'Tab description' is not present.
To solve the issue, I tried to override the accessibilityValue with accessibilityValue={{text: 'new value'}}, but rather than overwriting it, it appends the string after, resulting in 'Tab description, new value' in the announcement.

In the same time, on iOS the role of the component is not announced. I tried following the example of native iOS apps where the tab items are communicated with accessibilityTraits: button, tab, but currently there is no way to provide 'tab' as an accessibilityTrait.

React Native version:

0.63.4 (replicated on 0.63.2 and 0.63.3)
Full react-native info output below:

System:
    OS: macOS Mojave 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
    Memory: 47.89 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.15.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
    Watchman: Not Found
  Managers:
    CocoaPods: 1.9.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
    Android SDK: Not Found
  IDEs:
    Android Studio: 3.3 AI-182.5107.16.33.5199772
    Xcode: 11.2.1/11B500 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.5 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1 
    react-native: 0.63.4 => 0.63.4 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

Scenario A - no attempt to override the value

1. Create a simple Touchable component and add accessibility props: accessibilityRole, accessibilityLabel, accessibilityState (example A in code section below)

2. Open Accessibility Inspector and navigate to the element. See the result:
   

Label: label,
Value: tab description,
Traits: selected

3. Test on device with VoiceOver on.
   Announcement does not include the role, but does include the 'tab description' string.

label, tab description, selected

Scenario B - attempting to override the value

1. Create a simple Touchable component and add accessibility props: accessibilityRole, accessibilityLabel, accessibilityState, accessibilityValue (example B in code section below)
2. Open Accessibility Inspector and navigate to the element. See the result:
   

Label: label,
Value: tab description, new value,
Traits: selected

3. Test on device with VoiceOver on.
   Announcement does not include the role, but does include the 'tab description' string.

label, tab description, new value, selected

Expected Results

1. When using a component with accessibilityRole of 'tab', the component is announced as tab and the accessibility value is empty by default or can be overwritten.
2. When using a component with accessibilityRole of 'tab', if passing accessibilityTraits is required to ensure desired behaviour of the component on iOS, there is a relevant 'tab' trait that can be provided together with 'button' to mimic the behaviour of native iOS apps (e.g. Photos).

Snack, code example, screenshot, or link to a repository:

Example A: no override for default value

import React from "react";
import { TouchableWithoutFeedback, Text, View } from "react-native";

const TouchableWithoutFeedbackExample = () => {
  return (
      <TouchableWithoutFeedback
        accessibilityLabel="label"
        accessibilityRole="tab"
        accessibilityState={{selected: true}}
        onPress={() => {console.log('press');}}
      >
        <View style={{width: 200, backgroundColor: 'grey', height: 20, textAlign: 'center'}}>
          <Text>Touch Here</Text>
        </View>
      </TouchableWithoutFeedback>
  );
}
export default TouchableWithoutFeedbackExample;

Example B: override for default value

import React from "react";
import { TouchableWithoutFeedback, Text, View } from "react-native";

const TouchableWithoutFeedbackExample = () => {
  return (
      <TouchableWithoutFeedback
        accessibilityLabel="label"
        accessibilityRole="tab"
        accessibilityState={{selected: true}}
        accessibilityValue={{text: 'new value'}}
        onPress={() => {console.log('press');}}
      >
        <View style={{width: 200, backgroundColor: 'grey', height: 20, textAlign: 'center'}}>
          <Text>Touch Here</Text>
        </View>
      </TouchableWithoutFeedback>
  );
}
export default TouchableWithoutFeedbackExample;

[github-actions]

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

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.