From d79e16780e13bc36a758b119ad0b015b847f3ec0 Mon Sep 17 00:00:00 2001 From: fabriziobertoglio1987 Date: Wed, 27 Jul 2022 16:22:01 +0800 Subject: [PATCH 1/4] Text onPress handler does not trigger setClickable(true) on Android >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, as well as a bunch of other less-clear edge cases. If our layout looked like this: adding onPress handler to a Text Component does not call setClickable(true) ([test case](https://github.com/facebook/react-native/issues/30851#issuecomment-1194957300)) https://github.com/facebook/react-native/issues/30851#issuecomment-1196297746 verify if the accessible prop does not work on other components * Pressable, TouchableOpacity, Switch, TextInput, and TouchableNativeFeedback are focusable/accessible by default without an onPress handler * `` is accessible, `` is not accessible, ` console.log('pressed')}>` is accessible https://github.com/facebook/react-native/blob/a70354df12ef71aec08583cca4f1fed5fb77d874/Libraries/Components/Touchable/TouchableOpacity.js#L249-L251 --- Libraries/Text/Text.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/Libraries/Text/Text.js b/Libraries/Text/Text.js index 57b6a2ea82ca28..3551a16d49a146 100644 --- a/Libraries/Text/Text.js +++ b/Libraries/Text/Text.js @@ -193,7 +193,9 @@ const Text: React.AbstractComponent< {...restProps} {...eventHandlersForText} disabled={_disabled} - accessible={_accessible} + accessible={ + accessible == null ? props.onPress != undefined : _accessible + } accessibilityState={_accessibilityState} allowFontScaling={allowFontScaling !== false} ellipsizeMode={ellipsizeMode ?? 'tail'} From 58864991dbe79c64b9086cd29971ebc99fd5f775 Mon Sep 17 00:00:00 2001 From: fabriziobertoglio1987 Date: Wed, 27 Jul 2022 16:34:00 +0800 Subject: [PATCH 2/4] adding check onLongPress --- Libraries/Text/Text.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/Libraries/Text/Text.js b/Libraries/Text/Text.js index 3551a16d49a146..db6a6785bd8384 100644 --- a/Libraries/Text/Text.js +++ b/Libraries/Text/Text.js @@ -176,6 +176,9 @@ const Text: React.AbstractComponent< default: accessible, }); + const _hasOnPressOrOnLongPress = + props.onPress != null && props.onLongPress != null; + return hasTextAncestor ? ( Date: Wed, 27 Jul 2022 17:27:01 +0800 Subject: [PATCH 3/4] typing mistake --- Libraries/Text/Text.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Libraries/Text/Text.js b/Libraries/Text/Text.js index db6a6785bd8384..d9530e785a66c9 100644 --- a/Libraries/Text/Text.js +++ b/Libraries/Text/Text.js @@ -177,7 +177,7 @@ const Text: React.AbstractComponent< }); const _hasOnPressOrOnLongPress = - props.onPress != null && props.onLongPress != null; + props.onPress != null || props.onLongPress != null; return hasTextAncestor ? ( Date: Tue, 30 Aug 2022 17:14:43 +0800 Subject: [PATCH 4/4] adding android Platform check --- Libraries/Text/Text.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/Libraries/Text/Text.js b/Libraries/Text/Text.js index d9530e785a66c9..0d236c33115d3a 100644 --- a/Libraries/Text/Text.js +++ b/Libraries/Text/Text.js @@ -196,7 +196,11 @@ const Text: React.AbstractComponent< {...restProps} {...eventHandlersForText} disabled={_disabled} - accessible={accessible == null ? _hasOnPressOrOnLongPress : _accessible} + accessible={ + accessible == null && Platform.OS === 'android' + ? _hasOnPressOrOnLongPress + : _accessible + } accessibilityState={_accessibilityState} allowFontScaling={allowFontScaling !== false} ellipsizeMode={ellipsizeMode ?? 'tail'}