Android: Role description is announced before the components text, rather than after #31042

[fabOnReact]

Issue facebook/react-native#31042
PR facebook/react-native#33690

[fabOnReact]

https://github.com/fabriziobertoglio1987/react-native-notes/blob/472d531ae867ac23a866851cb51759053b267b1c/Libraries/Components/View/ViewNativeComponent.js#L22-L25

https://github.com/fabriziobertoglio1987/react-native-notes/blob/472d531ae867ac23a866851cb51759053b267b1c/ReactAndroid/src/main/java/com/facebook/react/fabric/FabricComponents.java#L26-L43

https://github.com/fabriziobertoglio1987/react-native-notes/blob/472d531ae867ac23a866851cb51759053b267b1c/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java#L19

https://github.com/fabriziobertoglio1987/react-native-notes/blob/472d531ae867ac23a866851cb51759053b267b1c/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.java#L38-L40

[fabOnReact]

• Test a quick solution in java to solve this issue
• Update notes on github

[fabOnReact]

facebook/react-native#31296 (comment)
The issues seems to be caused when passing accessibilityRole="button" to a TouchableNativeFeedback #1 (comment)

[fabOnReact]

The View does not announce the child component Text when accessibilityLabel is missing (automatic content grouping)

The View has accessibilityRole="button" and child component with:

• importantForAccessibility="no". It is not focusable or clickable. The ScreenReader focus will not move on this element.
• has text This is a child Text

Expected Result:
The View announces This is a child Text, Button.

Actual Result:
The View announces Button.

click to open code used in the test

<View
  style={{height: 100, width: 400, backgroundColor: 'red'}}
  importantForAccessibility="yes"
  accessibilityRole="button">
  <Text
    importantForAccessibility="no"
    style={{
      height: 50,
      marginLeft: 50,
      marginTop: 50,
      backgroundColor: 'white',
    }}>
    {childText}
  </Text>
</View>

click to open recording of test case

2022-04-05.21-01-39.mp4

[fabOnReact]

The View announces the child component Text when accessibilityLabel is missing (automatic content grouping)

The View has accessibilityRole="button" and child component with:

• importantForAccessibility="no". It is not focusable or clickable. The ScreenReader focus will not move on this element.
• has text This is a child Text

Expected/Actual Result:
The View announces This is a child Text, Button.

Notes

• The solution here is checking if an accessibilityLabel already exist otherwise over-ride it with the childText
• The child text should be non focusable, otherwise their label/text is announced when TalkBack ScreenReader focuses on the element
• The fix is applied to the affected components (Button, TouchableOpacity etc..)

click to open code used in the test

<View
  style={{height: 100, width: 400, backgroundColor: 'red'}}
  importantForAccessibility="yes"
  accessibilityRole="button"
  accessibilityLabel={props.accessibilityLabel ? props.accessibilityLabel : childText}>
  <Text
    importantForAccessibility="no"
    style={{
      height: 50,
      marginLeft: 50,
      marginTop: 50,
      backgroundColor: 'white',
    }}>
    {childText}
  </Text>
</View>

click to open recording of test case

2022-04-05.21-08-43.mp4

[fabOnReact]

Scenarios - TouchableNativeFeedback

Touchable with one child

<TouchableNativeFeedback
  accessible={true}
  importantForAccessibility="yes"
  accessibilityRole="button">
  <Text
    accessible={false}
    focusable={false}>
    Text number 1
  </Text>
</TouchableNativeFeedback>

Touchable with multiple children

<TouchableNativeFeedback
  accessible={true}
  importantForAccessibility="yes"
  accessibilityRole="button">
  <View>
      <Text
        accessible={false}
        focusable={false}>
        Text number 1
      </Text>
      <Text
        accessible={false}
        focusable={false}>
        Text number 2
      </Text>
   </View>
</TouchableNativeFeedback>

Touchable with children that have children

<TouchableNativeFeedback
  accessible={true}
  importantForAccessibility="yes"
  accessibilityRole="button">
  <View>
      <Text
        accessible={false}
        focusable={false}>
        Text number 1
      </Text>
      <Text
        accessible={false}
        focusable={false}>
        Text number 2
          <Text
            accessible={false}
            focusable={false}>
            Text number 3
          </Text>
      </Text>
   </View>
</TouchableNativeFeedback>

Touchable with children's that are not Text components

<TouchableNativeFeedback
  accessible={true}
  importantForAccessibility="yes"
  accessibilityRole="button">
  <View>
      <Text
        accessible={false}
        focusable={false}>
        Text number 1
      </Text>
      <Text
        accessible={false}
        focusable={false}>
        Text number 2
      </Text>
   </View>
</TouchableNativeFeedback>

Touchable with one Text link

<TouchableNativeFeedback
  accessible={true}
  importantForAccessibility="yes"
  accessibilityRole="button">          
    <Text accessible={false} focusable={false}>
      Text number 1<Text accessibilityRole="link">Link</Text>
    </Text>
</TouchableNativeFeedback>

[fabOnReact]

• isAccessibilityFocused
• isSpeakingNode

[fabOnReact]

• add check if parent node already has accessibilityLabel or contentDescription to be read, if not then retrieve children
• scenario where getTalkbackDescription returns null
• add grid role as included in TalkBack support for ScrollView accessibility announcements (list and grid) facebook/react-native#33180
• add test cases to AccessibilityExample
• save test cases for button, view and other components
• example where text has accessibilityAction or is clickable etc..
• verify no regression in ScrollView
• rebase
• update pr summary
• instead of using AccessibilityNodeInfoCompat.obtain() use node.getChild to loop over children nod
• test more edge cases

Low Priority:

• implement getRole() instead of check on accessibilityRole variable

completed

• test edge cases
• evaluate if we need isTopLevelScrollItem
• implement logic to only handle the basic scenario
  implement logic for isTopLevelScrollItem
• compare current implementation with Flipper
• prepare draft implementation
• evaluate adding/removing code after comparing with Flipper
• test EditText and verify behaviour is correct
• prepare pr summary

low priority

• getRole to avoid triggering runtime error
• scenario - scroll view or other components
• adding space when several text components next to each other
• consider adding a check on the accessibilityRole=button
  do we need this behaviour only for the items with accessibilityRole button?
  if yes, then we add a check on the accessibilityRole

[fabOnReact]

Screenreader focuses on ScrollView Items

Expected/Actual Result:
This has to be verified again before moving the pr to Ready for Review.

click to open code used in the test

function TouchableExample(props) {
  return (
    <ScrollView
      accessible={true}
      focusable={true}
      style={{backgroundColor: 'red'}}>
      <Text>Text number 1</Text>
      <Text>
        Text number 2<Text accessible={false}>Text number 3</Text>
      </Text>
    </ScrollView>
  );
}

click to open recording of test case - without the implementation

2022-04-27.14-09-04.mp4

click to open recording of test case - with the implementation

2022-04-22.13-00-53.mp4

[fabOnReact]

Screenreader announces Pressability items

Expected/Actual Result:
Screenreader announces Text number 1Text number 2 Text number 3, Button.

click to open code used in the test

function TouchableExample(props) {
  return (
    <Pressable
      accessible={true}
      focusable={true}
      onPress={() => console.warn('pressed')}
      accessibilityRole="button"
      style={{backgroundColor: 'red'}}>
      <View>
        <Text accessible={false}>Text number 1</Text>
        <Text accessible={false}>
          Text number 2<Text accessible={false}>Text number 3</Text>
        </Text>
      </View>
    </Pressable>
  );
}

click to open recording of test case

2022-04-22.16-56-13.mp4

[fabOnReact]

Screenreader correctly announcing accessible/non-accessible items

Expected/Actual Result:
Talkback announces Text number 1Text number 2Text number3, Button.
Talkback announces Text clickable.

click to open code used in the test

function TouchableExample(props) {
  return (
    <Pressable
      accessible={true}
      focusable={true}
      onPress={() => console.warn('pressed')}
      accessibilityRole="button"
      style={{backgroundColor: 'red'}}>
      <View>
        <Text onPress={() => console.warn('pressed')}>Text clickable</Text>
        <Text accessible={false}>Text number 1</Text>
        <Text accessible={false}>
          Text number 2<Text accessible={false}>Text number 3</Text>
        </Text>
      </View>
    </Pressable>
  );
}

click to open recording of test case

2022-04-22.18-48-40.mp4

[fabOnReact]

Conditions that should trigger the custom contentDescription

facebook/react-native#33690 (comment)

The custom contentDescription should be triggered if:

• an element has no contentDescription AND no text
• AND has other content to announce (role, state, etc.)

[fabOnReact]

Runtime error when calling createNodeInfoFromView

  @Nullable
  public static AccessibilityNodeInfoCompat createNodeInfoFromView(View view) {
    if (view == null) {
      return null;
    }

    final AccessibilityNodeInfoCompat nodeInfo = AccessibilityNodeInfoCompat.obtain();

    // For some unknown reason, Android seems to occasionally throw a NPE from
    // onInitializeAccessibilityNodeInfo.
    try {
      // ==> Runtime when called from onInitializeAccessbilityNodeInfo
      ViewCompat.onInitializeAccessibilityNodeInfo(view, nodeInfo);
    } // ...
}

create an infinite loop, onInitializeAccessibilityNodeInfo calls method that calls itself without stopping.