Text Component does not announce "disabled" #30937

[fabOnReact]

facebook/react-native#30937

[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 facebook/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 facebook/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

7.6. Text has onPress callback and accessibilityState = {{ disabled: true }}

<Text
  onPress={() => console.warn('onPress')}
  accessibilityState={{disabled: true}}>
  Awesome App
</Text>

Expected Result:
The Text is disabled and should NOT trigger the onPress callback

Actual Result:
The Text announces disabled, but is not disabled and triggers the onPress callback

Related facebook/react-native#30947 Fixed with commits facebook/react-native@6ab7ab3 fabOnReact/react-native@17095c6

CLICK TO OPEN TESTS RESULTS - ON PR BRANCH BEFORE COMMIT 1c4f98dd

On PR Branch before commit 1c4f98dd the user is allowed to click on the text and trigger the onPress callback.

testcase15.mp4

CLICK TO OPEN TESTS RESULTS - MAIN BRANCH

testcase15onmain.mp4

[fabOnReact]

Test Cases

1. Text has disabled and accessibilityState={{disabled: false}}

CLICK TO OPEN SOURCECODE

<Text
  style={styles.text}
  onPress={() => console.warn('onPress')}
  disabled
  accessibilityState={{disabled: false}}>
  This is a Text
</Text>

Expected/Actual Result:
The ScreenReader should announce disabled when the focus moves to the Text.
The onPress handler is disabled.

CLICK TO OPEN TESTS RESULTS

testcase1.mp4

[fabOnReact]

Test Cases

2. Text has disabled

CLICK TO OPEN SOURCECODE

<Text
  style={styles.text}
  onPress={() => console.warn('onPress')}
  disabled>
  This is a Text
</Text>

Expected/Actual Result:

• The Text is disabled
• The ScreenReader announces disabled.
• The onPress handler is disabled.

CLICK TO OPEN TESTS RESULTS

testcase2.mp4

[fabOnReact]

Test Cases

3. Text has accessibilityState={{disabled: true}}

CLICK TO OPEN SOURCECODE

<Text
  style={styles.text}
  onPress={() => console.warn('onPress')}
  accessibilityState={{disabled: true}}>
  This is a Text
</Text>

Expected/Actual Result:

• The ScreenReader announces disabled when the focus moves to the Text.
• The Text is disabled. Users are NOT allowed to interact with the text.
• The onPress handler is disabled.

CLICK TO OPEN TESTS RESULTS

testcase3.mp4

[fabOnReact]

Test Cases

4. Text has accessibilityState={{disabled:false}}

CLICK TO OPEN SOURCECODE

<Text
  style={styles.text}
  onPress={() => console.warn('onPress')}
  accessibilityState={{disabled: false}}>
  This is a Text
</Text>

Expected/Actual Result:

• The ScreenReader does not announce disabled.
• The Text is not disabled. Users are allowed to interact with the text.
• The onPress handler is NOT disabled.

CLICK TO OPEN TESTS RESULTS

testcase4.mp4

[fabOnReact]

Test Cases

5. Text has disabled={false} accessibilityState={{disabled:true}}

CLICK TO OPEN SOURCECODE

<Text
  style={styles.text}
  onPress={() => console.warn('onPress')}
  disabled={false}
  accessibilityState={{disabled: true}}>
  This is a Text
</Text>

Expected/Actual Result:
The Text is not disabled.

CLICK TO OPEN TESTS RESULTS

testcase5.mp4

[fabOnReact]

Test Cases

7.1 Text has disabled set to true and accessibilityState={{disabled: false}} (main branch)

CLICK TO OPEN SOURCECODE

<Text
  style={styles.text}
  onPress={() => console.warn('onPress')}
  disabled
  accessibilityState={{disabled: false}}>
  This is a Text
</Text>

Expected Result:
The ScreenReader should announce disabled when the focus moves to the Text.

Actual Result:
The ScreenReader does not announce disabled when the focus moves to the Text.

CLICK TO OPEN TESTS RESULTS

testcase7-1.mp4

[fabOnReact]

Test Cases

7.3. Text has accessibilityState={{disabled: true}} (tested on main branch).

CLICK TO OPEN SOURCECODE

<Text
  style={styles.text}
  onPress={() => console.warn('onPress')}
  accessibilityState={{disabled: true}}>
  This is a Text
</Text>

Expected Result:

• The ScreenReader announces disabled when the focus moves to the Text.
• The Text is disabled. Users are NOT allowed to interact with the Text (click and trigger onPress callback).

Actual Result:

• The Text is NOT disabled.
• Users are allowed to interact with the Text.

CLICK TO OPEN TESTS RESULTS

testcase7-3.mp4

[fabOnReact]

Test Cases

7.5 Text has disabled={false} and accessibilityState={{disabled:true}} (on main branch)

CLICK TO OPEN SOURCECODE

<Text
  style={styles.text}
  onPress={() => console.warn('onPress')}
  disabled={false}
  accessibilityState={{disabled: true}}>
  This is a Text
</Text>

Expected Result:
The Text is disabled. ScreenReader should announce disabled when the focus moves to the Text.

Actual Result:

• The ScreenReader does not announce disabled.
• Users are allowed to interact with the Text.

CLICK TO OPEN TESTS RESULTS

testcase7-5.mp4

[fabOnReact]

Summary

This issue fixes facebook/react-native#30937 facebook/react-native#30947 (Test Case 7.1, Test Case 7.3, Test Case 7.5) .
The issue is caused by:

1. the missing prop accessibilityState in the Text component fabOnReact/react-native@6ab7ab3
2. missing setter for prop accessible in ReactTextAnchorViewManager fabOnReact/react-native@17095c6

Related PRs facebook/react-native#33070 callstack/react-native-slider#354

Changelog

[General] [Fixed] - Text Component does not announce and disable click functionality when disabled

Test Plan

1. Text has disabled and accessibilityState={{disabled: false}}
2. Text has disabled
3. Text has accessibilityState={{disabled: true}}
4. Text has accessibilityState={{disabled:false}}
5. Text has disabled={false} and accessibilityState={{disabled:true}}
7. Test Cases on the main branch
7.1. Text has disabled and accessibilityState={{disabled: false}}
7.3 Text has accessibilityState={{disabled: true}}
7.5 Text has disabled={false} and accessibilityState={{disabled:true}}

[fabOnReact]

PR facebook/react-native#33076

[fabOnReact]

Test Cases

7.7 Text has accessibilityState={{disabled:true}} and no method setAccessible in ReactTextAnchorViewManager (tested on commit facebook/react-native@6ab7ab3)

Without the below logic in ReactTextAnchorViewManager (added in commit facebook/react-native@17095c6).

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

CLICK TO OPEN SOURCECODE

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

Expected Result:
The ScreenReader announces disabled when the focus moves to the Text.

Actual Result:

• The ScreenReader does not announce disabled.

CLICK TO OPEN TESTS RESULTS

notAnnounceDisabled.mp4

[fabOnReact]

Test Cases

6. Text has accessibilityState={{disabled:true}} and method setAccessible in ReactTextAnchorViewManager (tested on commit facebook/react-native@17095c6)

With the below logic in ReactTextAnchorViewManager.

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

CLICK TO OPEN SOURCECODE

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

Expected/Actual Result:
The ScreenReader announces disabled when the focus moves to the Text.

CLICK TO OPEN TESTS RESULTS

announcesDisabled.mp4