From 84dde677d90bb3cfdf53329f7d257b870cb38eca Mon Sep 17 00:00:00 2001
From: Su Min Kim <kims622@gmail.com>
Date: Tue, 8 Dec 2020 10:15:28 -0800
Subject: [PATCH] Add accessibility examples (#30379)

Summary:
Added examples to RNTester for the AccessibilityInfo API for:
1. SetAccessibilityFocus()
2. isReduceMotionEnabled()
3. iOS Only
   a. isBoldTextEnabled()
   b. isGrayScaleEnabled()
   c. isInvertColorsEnabled()
   d. isReduceTransparencyEnabled()

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[General] [Added] - Add new examples to the Accessibility API page

Pull Request resolved: https://github.com/facebook/react-native/pull/30379

Test Plan: ![iOS GIF](http://g.recordit.co/pmzvQXYjdD.gif)

Reviewed By: TheSavior

Differential Revision: D25245329

Pulled By: rickhanlonii

fbshipit-source-id: e9c11c775410075199b4e1011b3dac0acd972e89
---
 .../rn-tester/js/components/ExamplePage.js    |   1 +
 .../Accessibility/AccessibilityExample.js     | 205 ++++++++++++++----
 2 files changed, 158 insertions(+), 48 deletions(-)

diff --git a/packages/rn-tester/js/components/ExamplePage.js b/packages/rn-tester/js/components/ExamplePage.js
index 879f37971b5..23dc5158799 100644
--- a/packages/rn-tester/js/components/ExamplePage.js
+++ b/packages/rn-tester/js/components/ExamplePage.js
@@ -76,6 +76,7 @@ const styles = StyleSheet.create({
   },
   examplesContainer: {
     flexGrow: 1,
+    flex: 1,
   },
   description: {
     marginVertical: 8,
diff --git a/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js b/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js
index f9e8e6c12e5..b5e0d4a1c2e 100644
--- a/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js
+++ b/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js
@@ -18,8 +18,10 @@ const {
   View,
   TouchableOpacity,
   TouchableWithoutFeedback,
+  findNodeHandle,
   Alert,
   StyleSheet,
+  Platform,
 } = require('react-native');
 
 const RNTesterBlock = require('../../components/RNTesterBlock');
@@ -27,6 +29,7 @@ const RNTesterBlock = require('../../components/RNTesterBlock');
 const checkImageSource = require('./check.png');
 const uncheckImageSource = require('./uncheck.png');
 const mixedCheckboxImageSource = require('./mixed.png');
+const {createRef} = require('react');
 
 const styles = StyleSheet.create({
   image: {
@@ -692,48 +695,6 @@ class FakeSliderExample extends React.Component {
   }
 }
 
-class ScreenReaderStatusExample extends React.Component<{}> {
-  state = {
-    screenReaderEnabled: false,
-  };
-
-  componentDidMount() {
-    AccessibilityInfo.addEventListener(
-      'change',
-      this._handleScreenReaderToggled,
-    );
-    AccessibilityInfo.fetch().done(isEnabled => {
-      this.setState({
-        screenReaderEnabled: isEnabled,
-      });
-    });
-  }
-
-  componentWillUnmount() {
-    AccessibilityInfo.removeEventListener(
-      'change',
-      this._handleScreenReaderToggled,
-    );
-  }
-
-  _handleScreenReaderToggled = isEnabled => {
-    this.setState({
-      screenReaderEnabled: isEnabled,
-    });
-  };
-
-  render() {
-    return (
-      <View>
-        <Text>
-          The screen reader is{' '}
-          {this.state.screenReaderEnabled ? 'enabled' : 'disabled'}.
-        </Text>
-      </View>
-    );
-  }
-}
-
 class AnnounceForAccessibility extends React.Component<{}> {
   _handleOnPress = () =>
     AccessibilityInfo.announceForAccessibility('Announcement Test');
@@ -750,6 +711,148 @@ class AnnounceForAccessibility extends React.Component<{}> {
   }
 }
 
+class SetAccessibilityFocusExample extends React.Component<{}> {
+  state = {
+    reactTag: null,
+  };
+
+  render() {
+    const myRef = createRef();
+
+    const onClose = () => {
+      if (myRef && myRef.current) {
+        const reactTag = findNodeHandle(myRef.current);
+        this.setState({reactTag});
+        AccessibilityInfo.setAccessibilityFocus(reactTag);
+      }
+    };
+
+    return (
+      <View>
+        <Text>
+          SetAccessibilityFocus on ReactTag:{' '}
+          {this.state.reactTag == null ? 'Null' : this.state.reactTag}
+        </Text>
+        <Button
+          ref={myRef}
+          title={'Click'}
+          onPress={() => {
+            Alert.alert(
+              'Set Accessibility Focus',
+              'Press okay to proceed',
+              [{text: 'Okay', onPress: onClose}],
+              {cancelable: true},
+            );
+          }}
+        />
+      </View>
+    );
+  }
+}
+
+class EnabledExamples extends React.Component<{}> {
+  render() {
+    return (
+      <View>
+        {Platform.OS === 'ios' ? (
+          <>
+            <RNTesterBlock title="isBoldTextEnabled()">
+              <EnabledExample
+                test="bold text"
+                eventListener="boldTextChanged"
+              />
+            </RNTesterBlock>
+            <RNTesterBlock title="isGrayScaleEnabled()">
+              <EnabledExample
+                test="gray scale"
+                eventListener="grayscaleChanged"
+              />
+            </RNTesterBlock>
+            <RNTesterBlock title="isInvertColorsEnabled()">
+              <EnabledExample
+                test="invert colors"
+                eventListener="invertColorsChanged"
+              />
+            </RNTesterBlock>
+            <RNTesterBlock title="isReduceTransparencyEnabled()">
+              <EnabledExample
+                test="reduce transparency"
+                eventListener="reduceTransparencyChanged"
+              />
+            </RNTesterBlock>
+          </>
+        ) : null}
+
+        <RNTesterBlock title="isReduceMotionEnabled()">
+          <EnabledExample
+            test="reduce motion"
+            eventListener="reduceMotionChanged"
+          />
+        </RNTesterBlock>
+
+        <RNTesterBlock title="isScreenReaderEnabled()">
+          <EnabledExample
+            test="screen reader"
+            eventListener="screenReaderChanged"
+          />
+        </RNTesterBlock>
+      </View>
+    );
+  }
+}
+
+class EnabledExample extends React.Component<{}> {
+  state = {
+    isEnabled: false,
+  };
+
+  componentDidMount() {
+    AccessibilityInfo.addEventListener(
+      this.props.eventListener,
+      this._handleToggled,
+    );
+
+    switch (this.props.eventListener) {
+      case 'reduceMotionChanged':
+        return AccessibilityInfo.isReduceMotionEnabled().then(state => {
+          this.setState({isEnabled: state});
+        });
+      default:
+        return null;
+    }
+  }
+
+  componentWillUnmount() {
+    AccessibilityInfo.removeEventListener(
+      this.props.eventListener,
+      this._handleToggled,
+    );
+  }
+
+  _handleToggled = isEnabled => {
+    if (!this.state.isEnabled) {
+      this.setState({isEnabled});
+    } else {
+      this.setState({isEnabled: false});
+    }
+  };
+
+  render() {
+    return (
+      <View>
+        <Text>
+          The {this.props.test} is{' '}
+          {this.state.isEnabled ? 'enabled' : 'disabled'}
+        </Text>
+        <Button
+          title={this.state.isEnabled ? 'disable' : 'enable'}
+          onPress={this._handleToggled}
+        />
+      </View>
+    );
+  }
+}
+
 exports.title = 'Accessibility';
 exports.documentationURL = 'https://reactnative.dev/docs/accessibilityinfo';
 exports.description = 'Examples of using Accessibility APIs.';
@@ -778,16 +881,22 @@ exports.examples = [
       return <FakeSliderExample />;
     },
   },
-  {
-    title: 'Check if the screen reader is enabled',
-    render(): React.Element<typeof ScreenReaderStatusExample> {
-      return <ScreenReaderStatusExample />;
-    },
-  },
   {
     title: 'Check if the screen reader announces',
     render(): React.Element<typeof AnnounceForAccessibility> {
       return <AnnounceForAccessibility />;
     },
   },
+  {
+    title: 'Check if accessibility is focused',
+    render(): React.Element<typeof SetAccessibilityFocusExample> {
+      return <SetAccessibilityFocusExample />;
+    },
+  },
+  {
+    title: 'Check if these properties are enabled',
+    render(): React.Element<typeof EnabledExamples> {
+      return <EnabledExamples />;
+    },
+  },
 ];