Skip to content

Commit

Permalink
Text with onPress or onLongPress handler is not accessible with TalkB…
Browse files Browse the repository at this point in the history
…ack (#34284)

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))) #30851 (comment)

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

```jsx
<TouchableOpacity />
```
The TouchableOpacity is accessible

```jsx
<TouchableOpacity accessible={false} />
```
The TouchableOpacity is not accessible

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

The TouchableOpacity is accessible.

https://github.com/facebook/react-native/blob/a70354df12ef71aec08583cca4f1fed5fb77d874/Libraries/Components/Touchable/TouchableOpacity.js#L249-L251

This and other PRs fixes #30851

## Changelog

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

Pull Request resolved: #34284

Test Plan:
main branch #30

<details><summary>pr branch</summary>
<p>

<video src="https://user-images.githubusercontent.com/24992535/181207388-bbf8379b-71b8-44e9-b4b2-b5c44e9ac14d.mp4" width="1000" />
</p>
</details>

Reviewed By: cipolleschi

Differential Revision: D39179107

Pulled By: blavalla

fbshipit-source-id: 3301fb2b799f233660e3e08f6a87dad294ddbcd8
  • Loading branch information
fabOnReact authored and facebook-github-bot committed Sep 20, 2022
1 parent 353b1b0 commit f3847ee
Showing 1 changed file with 8 additions and 1 deletion.
9 changes: 8 additions & 1 deletion Libraries/Text/Text.js
Original file line number Diff line number Diff line change
Expand Up @@ -207,6 +207,9 @@ const Text: React.AbstractComponent<
flattenedStyle.fontWeight = flattenedStyle?.fontWeight.toString();
}

const _hasOnPressOrOnLongPress =
props.onPress != null || props.onLongPress != null;

return hasTextAncestor ? (
<NativeVirtualText
{...restProps}
Expand All @@ -229,7 +232,11 @@ const Text: React.AbstractComponent<
{...eventHandlersForText}
disabled={_disabled}
selectable={_selectable}
accessible={_accessible}
accessible={
accessible == null && Platform.OS === 'android'
? _hasOnPressOrOnLongPress
: _accessible
}
accessibilityLabel={ariaLabel ?? accessibilityLabel}
accessibilityState={nativeTextAccessibilityState}
allowFontScaling={allowFontScaling !== false}
Expand Down

0 comments on commit f3847ee

Please sign in to comment.