From 860d2d2012ca9f7d1c6af53435e4b2af74478165 Mon Sep 17 00:00:00 2001
From: Ziqi Chen <ziqichen@fb.com>
Date: Wed, 8 Aug 2018 01:20:44 -0700
Subject: [PATCH] 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
---
 .../js/AccessibilityAndroidExample.android.js | 64 ++++++++++++++++++-
 1 file changed, 63 insertions(+), 1 deletion(-)

diff --git a/RNTester/js/AccessibilityAndroidExample.android.js b/RNTester/js/AccessibilityAndroidExample.android.js
index 23e0fa40c2c..cc52876963c 100644
--- a/RNTester/js/AccessibilityAndroidExample.android.js
+++ b/RNTester/js/AccessibilityAndroidExample.android.js
@@ -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}>