Text with onPress or onLongPress handler is not accessible with TalkBack

[fabOnReact]

Summary

Finally, the last catch relates to why these views are considered focusable. We've been working with the assumption that they are only focusable because accessible="true", but this is not the only property that can make a view focusable on Android. Android also makes all elements with onClick listeners or onLongPress listeners focusable

Adding onPress handler to a Text Component does not call setClickable(true) (test case) #30851 (comment)

Pressable, TouchableOpacity, Switch, TextInput, and TouchableNativeFeedback are focusable/accessible by default without an onPress handler or accessible prop.

<TouchableOpacity />

The TouchableOpacity is accessible

<TouchableOpacity accessible={false} />

The TouchableOpacity is not accessible

<TouchableOpacity accessible={false} onPress={() => console.log('pressed')} />

The TouchableOpacity is accessible.

react-native/Libraries/Components/Touchable/TouchableOpacity.js

Lines 249 to 251 in a70354d

	focusable={
	this.props.focusable !== false && this.props.onPress !== undefined
	}

This and other PRs fixes #30851

Changelog

[Android] [Fixed] - Text with onPress or onLongPress handler is not accessible with TalkBack

Test Plan

main branch #30

pr branch

2022-07-27.17-00-33.mp4

[fabOnReact]

• build on iOS and Android after deleting .gradle cache and rebasing
• test iOS iCloud issues - Xcode crashes in project, need to troubleshoot again tomorrow
• test onLongPress

test onLongPress

2022-08-04.18-56-34.mp4

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	7,618,089	-24
android	hermes	armeabi-v7a	7,032,343	-21
android	hermes	x86	7,918,142	-24
android	hermes	x86_64	7,891,761	-21
android	jsc	arm64-v8a	9,495,493	+29
android	jsc	armeabi-v7a	8,273,119	+31
android	jsc	x86	9,433,278	+29
android	jsc	x86_64	10,026,271	+37

Base commit: b444f0e
Branch: main

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
ios	-	universal	n/a	--

Base commit: b444f0e
Branch: main

[blavalla]

This looks good to me, but I just wanted to confirm that you were able to test this change on iOS as well.

[fabOnReact]

sorry, @blavalla. I had again this issue with iCloud, and I postponed testing iOS.

Test before commit 4149b68
Test after commit 4149b68

As included in the documentation pr

Android

In the above example, the TalkBack screenreader focuses on the parent view with the 'accessible' property and uses the unfocusable child Text with the text "text two" as a label. The focus will then move to read the second focusable child Text with the text "text one".

<View
  accessible={true}
  accessibilityLabel="a couple of text views">
  <Text onPress={() => console.log('text one pressed')}>
    text One
  </Text>
  <Text onPress={() => console.log('text two pressed')}>
    text Two
  </Text>
</View>

iOS

VoiceOver can't get accessibility focus separately on 'text one' and 'text two' in the above example. Instead, it focuses on the parent view with 'accessible' property.

[facebook-github-bot]

@blavalla has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

[react-native-bot]

This pull request was successfully merged by @fabriziobertoglio1987 in f3847ee.

^{When will my fix make it into a release? | Upcoming Releases}