status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Added 5 examples of new Accessibility API to RN Tester on Android 

Summary:
I added three examples to the RN Tester in order to test the new accessibility props I've added to the accessibility API.

These examples test the following properties on views and touchables:
* AccessibilityRole
* AccessibilityStates
* AccessibilityHint

Reviewed By: PeteTheHeat

Differential Revision: D9167874

fbshipit-source-id: 4971b9ae43ad4f35c6be7e8548cc31393c3f0a33
This commit is contained in:
Ziqi Chen 2018-08-08 01:20:44 -07:00 committed by Facebook Github Bot
parent 91b3a3055a
commit 893e4d19a9
1 changed files with 63 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
RNTester/js/AccessibilityAndroidExample.android.js
View File

@ -114,7 +114,7 @@ class AccessibilityAndroidExample extends React.Component {
</View>
</RNTesterBlock>
<RNTesterBlock title="Touchable with component type = button">
<RNTesterBlock title="Touchable with accessibilityRole = button">
<TouchableWithoutFeedback
onPress={() =>
ToastAndroid.show('Toasts work by default', ToastAndroid.SHORT)
@ -127,6 +127,68 @@ class AccessibilityAndroidExample extends React.Component {
</TouchableWithoutFeedback>
</RNTesterBlock>
<RNTesterBlock title="Disabled Touchable with accessibilityRole = button">
<TouchableWithoutFeedback
onPress={() =>
ToastAndroid.show('Toasts work by default', ToastAndroid.SHORT)
}
accessibilityRole="button"
accessibilityStates={['disabled']}
disabled={true}>
<View>
<Text>I am disabled</Text>
<Text>Clicking me will not trigger any action.</Text>
</View>
</TouchableWithoutFeedback>
</RNTesterBlock>
<RNTesterBlock title="Touchable with accessibilityRole = button and accessibilityHint">
<TouchableWithoutFeedback
onPress={() =>
ToastAndroid.show('Toasts work by default', ToastAndroid.SHORT)
}
accessibilityRole="button"
accessibilityHint="Triggers
Toasts">
<View>
<Text>Click Me!</Text>
</View>
</TouchableWithoutFeedback>
</RNTesterBlock>
<RNTesterBlock title="Accessible View with hint, role, and state">
<View
accessible={true}
accessibilityRole="button"
accessibilityStates={['selected']}
accessibilityHint="accessibility hint">
<Text>Accessible view with hint, role, and state</Text>
<Text style={{color: 'gray'}}>
Talkback will say: accessibility hint button, selected{' '}
</Text>
</View>
</RNTesterBlock>
<RNTesterBlock title="Accessible View with label, hint, role, and state">
<View
accessible={true}
accessibilityLabel="accessibility Label"
accessibilityRole="button"
accessibilityStates={['selected']}
accessibilityHint="accessibility Hint">
<Text>Accessible view with label, hint, role, and state</Text>
<Text style={{color: 'gray'}}>
Talkback will say: accessibility label, hint button, selected{' '}
</Text>
</View>
</RNTesterBlock>
<RNTesterBlock title="Accessible View with no other properties set">
<View accessible={true}>
<Text>This accessible view has no label, so the text is read.</Text>
</View>
</RNTesterBlock>
<RNTesterBlock title="LiveRegion">
<TouchableWithoutFeedback onPress={this._addOne}>
<View style={styles.embedded}>