Skip to content

Commit

Permalink
Added 5 examples of new Accessibility API to RN Tester on Android
Browse files Browse the repository at this point in the history
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
  • Loading branch information
Ziqi Chen authored and facebook-github-bot committed Aug 8, 2018
1 parent 91b3a30 commit 893e4d1
Showing 1 changed file with 63 additions and 1 deletion.
64 changes: 63 additions & 1 deletion RNTester/js/AccessibilityAndroidExample.android.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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}>
Expand Down

0 comments on commit 893e4d1

Please sign in to comment.