Text Component does not announce "disabled" #30937

[fabOnReact]

react/react-native#30937

[fabOnReact]

• Commit 33ff44 fixed a similar issue (Text component does not disable click functionality when disabled #30947).
• The issue does not reproduce if the <Text /> component has accessibilityRole="button" see issue #31033
• Text component is not touchable by default, becomes touchable with an onPress prop.
• We need to have accessibilityRole="button" for something to be recognized as pressable (issue 30947)

I've since realized that we need to set accessibilityRole="button" for the screenreaders to recognize something as clickable.

from react/react-native#30947 (comment)

I notice that we hardcode the values of selected and enabled here and it seems to be expecting that somewhere we override these values by the comment immediate following:

https://github.com/fabriziobertoglio1987/react-native-notes/blob/4bd5450b6e54ffe99556598a4ba6fb44a61b7177/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java#L169-L183

But setting a breakpoint here where we read the accessibilityState to initializeAccessibiltyNodeInfo, it never gets hit in the examples above. I'm unfamiliar with how accessibiltyNodeInfo should be used but I see it being referenced in something like ReactHorizontalScrollView -- does this imply that Text needs to do something as well? cc @blavalla if you have more context on how AccessibilityNodeInfo is used typically in Android views?

https://github.com/fabriziobertoglio1987/react-native-notes/blob/46813a6aa6958def5a160c27dd3ad497063c99b5/ReactAndroid/src/main/java/com/facebook/react/uimanager/ReactAccessibilityDelegate.java#L206

[fabOnReact]

Test Cases

1. ScreenReader does NOT announce disabled when moving focus to TouchableNativeFeedback

<TouchableNativeFeedback accessibilityState={{disabled: true}}>
    <Text>TouchableNativeFeedback</Text>
</TouchableNativeFeedback>

Expected Result:

• ScreenReader announces disabled

Actual Result:

• ScreenReader does NOT announce disabled

NOTES:

The problems does not reproduce with the View Component

https://github.com/fabriziobertoglio1987/react-native-notes/blob/9cd43340a7e2443564c2ff5e8e85d37f6e1e47ef/Libraries/Components/Touchable/TouchableNativeFeedback.js#L262-L264

<TouchableNativeFeedback accessibilityState={{disabled: true}}>
    <Text>TouchableNativeFeedback</Text>
</TouchableNativeFeedback>

renders

<Text>TouchableNativeFeedback</Text>

<TouchableNativeFeedback accessibilityState={{disabled: true}}>
    <View>
        <Text>TouchableNativeFeedback</Text>
    </View>
</TouchableNativeFeedback>

renders

<View><Text>TouchableNativeFeedback</Text></View>

CLICK TO OPEN TESTS RESULTS

2022-02-04.11-44-09.mp4

[fabOnReact]

Test Cases

2. ScreenReader does announce disabled when moving focus to TouchableNativeFeedback

<TouchableNativeFeedback accessibilityState={{disabled: true}}>
    <View>
       <Text>TouchableNativeFeedback</Text>
    </View>
</TouchableNativeFeedback>

Expected/Actual Result:

• ScreenReader announces disabled

CLICK TO OPEN TESTS RESULTS

2022-02-04.11-50-25.mp4

[fabOnReact]

Test Cases

3. ScreenReader announces disabled when moving focus on <View focusable={true} />

<View
  focusable={true}
  style={{backgroundColor: 'red', height: 100, width: 100}}
  accessibilityState={{disabled: true}}>
  <Text style={{backgroundColor: 'green', color: 'white'}}>
    This is a View and it has an accessibilityState
  </Text>
</View>

Expected/Actual Result:

• The ScreenReader announces disabled

NOTES:

ReactViewManager#focusable

Relevant discussion react/react-native#31033 (comment)

https://github.com/fabriziobertoglio1987/react-native-notes/blob/9cd43340a7e2443564c2ff5e8e85d37f6e1e47ef/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.java#L236-L264

CLICK TO OPEN TESTS RESULTS

2022-02-04.12-35-09.mp4

[fabOnReact]

Test Cases

4. ScreenReader announces disabled when moving focus to Text

<Text accessibilityState={{disabled: true}}>This is a Text Example</Text>

Adding the prop accessible to ReactTextAnchorViewManager fixes the problem for this component.
The same solution from my previous pr react/react-native#30935 (comment).

https://github.com/fabriziobertoglio1987/react-native-notes/blob/9cd43340a7e2443564c2ff5e8e85d37f6e1e47ef/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextAnchorViewManager.java#L38-L39

       @ReactProp(name = "accessible")
       public void setAccessible(ReactTextView view, boolean accessible) {
         view.setFocusable(accessible);
       }

Expected/Actual Result:

• ScreenReader announces disabled

CLICK TO OPEN TESTS RESULTS

2022-02-04.13-16-28.mp4

[fabOnReact]

TO-DO:

• Review diff
• Write a list of edge cases
• Test edge cases
• Fix PR to handle edge case
• Review fix
• Test
• Write test cases

Fix PR to handle edge case:

• Remove Java logic (setAccessible) method in TextAnchorManager
• pass prop disabled to NativeText
• change prop as previously done with button
• test

Edge Cases

• onPress and onLongPress
  accessibilityState.disabled does not disable Text Text Component does not announce "disabled" #30937 #1 (comment)
  Consider adding test case to re-open issue#30947
• accessibilityLabel, Role and Actions

Low Priority

• Consider adding the prop to shared parent class to fix this issue for all components
• Further investigate issue and find the real problem that causes TextManager to not have prop accessible while View has it
• Evaluate over-riding the prop in TextAnchorViewManager
• Nested Text ==> not accessible with ReactNative
• ReactViewManager#accessible
  I'm adding setAccessible prop and not setFocusable ==> not relevant

[fabOnReact]

Test Cases

5. ScreenReader announces disabled when moving focus TextInput Component

<>
  <Text>This Component is not disabled</Text>
  <TextInput
    placeholder="This component is disabled"
    accessibilityState={{disabled: true}}
  />
</>

Expected/Actual Result:

• ScreenReader announces disabled

CLICK TO OPEN TESTS RESULTS

2022-02-07.07-46-00.mp4