From ca5e3b1dc9619d067581be42ca379e145516f109 Mon Sep 17 00:00:00 2001
From: Kacie Bawiec <kacieb@fb.com>
Date: Tue, 26 Apr 2022 12:44:42 -0700
Subject: [PATCH] Fix sendAccessibilityEvent_unstable Example in RNTester

Summary:
# First issue - incorrect ref
In this example, `AccessibilityInfo.setAccessibilityFocus_unstable` is being called on the Button ref. This fails because Button is not a HostComponent and does not accept a forwarded ref.

Since the button needs to be focused in order to click on it, I don't think the intention of this example actually makes sense. Since even if it worked, it would just reset the focus in the same place.

Instead, I alter this to set accessibility focus on the preceding Text element, which makes it more clear that setAccessibilityFocus is working.

# Second Issue - focus after closing Alert doesn't work
I am not sure why this is the case, but removing the alert causes focus to work correctly. i'm guessing the set focus command is conflicting with Alert's default resetting focus behavior.

# Minor Fix
I also quickly cleaned this up to be a function component because class components make refs more confusing (to me).

Changelog:
[Genera] Fix sendAccessibilityEvent_unstable Example in RNTester

Reviewed By: p-sun

Differential Revision: D35725018

fbshipit-source-id: f5a1dbbcf2635f038c41db9ef2a0b31389d2c745
---
 .../Accessibility/AccessibilityExample.js     | 47 +++++++------------
 1 file changed, 17 insertions(+), 30 deletions(-)

diff --git a/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js b/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js
index 1cabf06e9f1e0e..9b8f2876d3ed61 100644
--- a/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js
+++ b/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js
@@ -951,37 +951,24 @@ class AnnounceForAccessibility extends React.Component<{}> {
   }
 }
 
-class SetAccessibilityFocusExample extends React.Component<{}> {
-  render(): React.Node {
-    const myRef: {current: React.ElementRef<any> | null} = createRef();
-
-    const onClose = () => {
-      if (myRef && myRef.current) {
-        AccessibilityInfo.sendAccessibilityEvent_unstable(
-          myRef.current,
-          'focus',
-        );
-      }
-    };
+function SetAccessibilityFocusExample(props: {}): React.Node {
+  const myRef = React.useRef<?React.ElementRef<typeof Text>>(null);
 
-    return (
-      <View>
-        <Text>SetAccessibilityFocus on native element</Text>
-        <Button
-          ref={myRef}
-          title={'Click'}
-          onPress={() => {
-            Alert.alert(
-              'Set Accessibility Focus',
-              'Press okay to proceed',
-              [{text: 'Okay', onPress: onClose}],
-              {cancelable: true},
-            );
-          }}
-        />
-      </View>
-    );
-  }
+  const onPress = () => {
+    if (myRef && myRef.current) {
+      AccessibilityInfo.sendAccessibilityEvent_unstable(myRef.current, 'focus');
+    }
+  };
+
+  return (
+    <View>
+      <Text ref={myRef}>
+        SetAccessibilityFocus on native element. This should get focus after
+        clicking the button!
+      </Text>
+      <Button title={'Click'} onPress={onPress} />
+    </View>
+  );
 }
 
 class EnabledExamples extends React.Component<{}> {