From 2abacace54dc72bac1a5d7f2fb795edd89374b1c Mon Sep 17 00:00:00 2001
From: Matthew Gray <Matgray@microsoft.com>
Date: Wed, 25 Aug 2021 16:27:58 -0700
Subject: [PATCH] Adding Accessibility Display Options Enabled to RNTester
 (#29231)

Summary:
Currently there isn't any way to test if the Accessibility Display Options or the event listeners for them were working properly within RNTester. It turns out that because of changes to the accessibility API Apple made when they added Smart Invert AccessibilityInfo.isInvertColorsEnabled() and the associated event listener are working incorrectly. You can see this if you take a look at how RNTester (with this PR incorporated) responds to toggling Invert Colors. I've submitted a bug report to Apple, but this might have been caught earlier if this had been implemented.

## Changelog

[General] [Added] - Adding Accessibility Display Options Enabled to RNTester

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

Test Plan:
1. Build iOS app
2. Navigate to the Accessibility page
3. Switch over to settings and change any of the settings at
  - Settings>Accessibility>Display and Text Size>Bold Text
  - Settings>Accessibility>Display and Text Size>Color Filters>Grayscale
  - Settings>Accessibility>Display and Text Size>Smart Invert (or Classic Invert)
  - Settings>Accessibility>Motion>Reduce Motion
  - Settings>Accessibility>VoiceOver>VoiceOver
4. Switch back to the app and see the results

![Simulator Screen Shot - iPhone 11 - 2020-06-26 at 21 13 16](https://user-images.githubusercontent.com/65255457/85914380-f09c5500-b7f1-11ea-98db-b83fb4ab5305.png)
![Simulator Screen Shot - iPhone 11 - 2020-06-26 at 21 13 39](https://user-images.githubusercontent.com/65255457/85914382-f2feaf00-b7f1-11ea-8ebf-cdb2b703c731.png)

Modified it a bit to only show relevant statuses for the Platform

| {F656951547} | {F656951643} |

Reviewed By: TheSavior

Differential Revision: D29531642

Pulled By: lunaleaps

fbshipit-source-id: f54fb3216ef663428c23b613f0a3b10b01d7f24d
---
 .../Accessibility/AccessibilityExample.js     | 72 +++++++++++++++++++
 1 file changed, 72 insertions(+)

diff --git a/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js b/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js
index 001464fd63d..6133080a4ad 100644
--- a/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js
+++ b/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js
@@ -1024,6 +1024,72 @@ class EnabledExample extends React.Component<
   }
 }
 
+class DisplayOptionsStatusExample extends React.Component<{}> {
+  render(): React.Node {
+    const isAndroid = Platform.OS === 'android';
+    return (
+      <View>
+        <DisplayOptionStatusExample
+          optionName={'Reduce Motion'}
+          optionChecker={AccessibilityInfo.isReduceMotionEnabled}
+          notification={'reduceMotionChanged'}
+        />
+        <DisplayOptionStatusExample
+          optionName={'Screen Reader'}
+          optionChecker={AccessibilityInfo.isScreenReaderEnabled}
+          notification={'reduceMotionChanged'}
+        />
+        {isAndroid ? null : (
+          <>
+            <DisplayOptionStatusExample
+              optionName={'Bold Text'}
+              optionChecker={AccessibilityInfo.isBoldTextEnabled}
+              notification={'boldTextChanged'}
+            />
+            <DisplayOptionStatusExample
+              optionName={'Grayscale'}
+              optionChecker={AccessibilityInfo.isGrayscaleEnabled}
+              notification={'grayscaleChanged'}
+            />
+            <DisplayOptionStatusExample
+              optionName={'Invert Colors'}
+              optionChecker={AccessibilityInfo.isInvertColorsEnabled}
+              notification={'invertColorsChanged'}
+            />
+            <DisplayOptionStatusExample
+              optionName={'Reduce Transparency'}
+              optionChecker={AccessibilityInfo.isReduceTransparencyEnabled}
+              notification={'reduceTransparencyChanged'}
+            />
+          </>
+        )}
+      </View>
+    );
+  }
+}
+
+function DisplayOptionStatusExample({optionName, optionChecker, notification}) {
+  const [statusEnabled, setStatusEnabled] = React.useState(false);
+  React.useEffect(() => {
+    AccessibilityInfo.addEventListener(notification, setStatusEnabled);
+    optionChecker().then(isEnabled => {
+      setStatusEnabled(isEnabled);
+    });
+    return function cleanup() {
+      AccessibilityInfo.removeEventListener(notification, setStatusEnabled);
+    };
+  }, [optionChecker, notification]);
+  return (
+    <View>
+      <Text>
+        {optionName}
+        {' is '}
+        {statusEnabled ? 'enabled' : 'disabled'}.
+      </Text>
+    </View>
+  );
+}
+
 exports.title = 'Accessibility';
 exports.documentationURL = 'https://reactnative.dev/docs/accessibilityinfo';
 exports.description = 'Examples of using Accessibility APIs.';
@@ -1058,6 +1124,12 @@ exports.examples = [
       return <FakeSliderExample />;
     },
   },
+  {
+    title: 'Check if the display options are enabled',
+    render(): React.Element<typeof DisplayOptionsStatusExample> {
+      return <DisplayOptionsStatusExample />;
+    },
+  },
   {
     title: 'Check if the screen reader announces',
     render(): React.Element<typeof AnnounceForAccessibility> {