add talkback navigation support for links and header (#22447)

Summary:
1. add role description for heading
2. add talkback navigation support for link and header

Fixes #22440
Pull Request resolved: https://github.com/facebook/react-native/pull/22447

Differential Revision: D14205822

Pulled By: cpojer

fbshipit-source-id: 86bfc3bfc851f3544b1962012abaf8d1a357a9d2
This commit is contained in:
Wei Yang
2019-02-27 21:22:14 +01:00
committed by Mike Grabowski
parent 2b7346f4b3
commit 8e5eb6389f
3 changed files with 52 additions and 1 deletions
@@ -111,6 +111,31 @@ class AccessibilityAndroidExample extends React.Component {
</View>
</RNTesterBlock>
<RNTesterBlock title="Touchable with accessibilityRole = header">
<View
accessible={true}
accessibilityLabel="I'm a header, so I read it instead of embedded text."
accessibilityRole="header">
<Text style={{color: 'green'}}>This is</Text>
<Text style={{color: 'blue'}}>
nontouchable accessible view with label.
</Text>
</View>
</RNTesterBlock>
<RNTesterBlock title="Touchable with accessibilityRole = link">
<TouchableWithoutFeedback
onPress={() =>
ToastAndroid.show('Toasts work by default', ToastAndroid.SHORT)
}
accessibilityRole="link">
<View style={styles.embedded}>
<Text>Click me</Text>
<Text>Or not</Text>
</View>
</TouchableWithoutFeedback>
</RNTesterBlock>
<RNTesterBlock title="Touchable with accessibilityRole = button">
<TouchableWithoutFeedback
onPress={() =>