Expose setAccessibilityFocus from Native-Common AccessibilityUtil and expose setting accessibility focus on RX.TextInput. (#69)

* Expose setAccessibilityFocus from Native-Common AccessibilityUtil, so components can leverage native-common instance directly to set focus on iOS and Android platforms.

* Code review feedback.

* PR feedback.

* PR feedback.

* Nit: Space

* PR feedback. Rename platform specific files to AccessibilityUtil. Rename AccessibilityNativeUtil to AccessibilityPlatformUtil as that is more in sync with all the comments in the codebase.

Author: eulphean

src/android/AccessibilityUtil.ts

@@ -11,9 +11,9 @@ import React = require('react');
 import RN = require('react-native');
 
 import Accessibility from '../native-common/Accessibility';
-import { AccessibilityUtil as CommonAccessibilityUtil } from '../native-common/AccessibilityUtil';
+import { AccessibilityPlatformUtil as CommonAccessibilityNativeUtil } from '../common/AccessibilityUtil';
 
-export class AccessibilityUtil extends CommonAccessibilityUtil {
+export class AccessibilityUtil extends CommonAccessibilityNativeUtil {
     private _sendAccessibilityEvent(component: React.Component<any, any>, eventId: number) {
         // See list of events here:
         // https://developer.android.com/reference/android/view/accessibility/AccessibilityEvent.html

src/android/Button.tsx

@@ -20,7 +20,7 @@ import { default as AccessibilityImpl, Accessibility as AccessibilityType } from
 import { default as ActivityIndicatorImpl, ActivityIndicator as ActivityIndicatorType } from '../native-common/ActivityIndicator';
 import { default as AlertImpl, Alert as AlertType } from '../native-common/Alert';
 import { default as AppImpl, App as AppType } from '../native-common/App';
-import { default as ButtonImpl, Button as ButtonType } from './Button';
+import { default as ButtonImpl, Button as ButtonType } from '../native-common/Button';
 import { default as PickerImpl, Picker as PickerType } from '../native-common/Picker';
 import { default as ImageImpl, Image as ImageType } from './Image';
 import { default as ClipboardImpl, Clipboard as ClipboardType } from '../native-common/Clipboard';
@@ -43,7 +43,7 @@ import { default as TextInputImpl, TextInput as TextInputType } from '../native-
 import { default as ProfilingImpl, Profiling as ProfilingType } from '../native-common/Profiling';
 import { default as UserInterfaceImpl, UserInterface as UserInterfaceType } from '../native-common/UserInterface';
 import { default as UserPresenceImpl, UserPresence as UserPresenceType } from '../native-common/UserPresence';
-import { default as ViewImpl, View as ViewType } from './View';
+import { default as ViewImpl, View as ViewType } from '../native-common/View';
 import { default as WebViewImpl, WebView as WebViewType } from '../native-common/WebView';
 import ViewBase from '../native-common/ViewBase';
 
@@ -55,6 +55,14 @@ const _defaultViewStyle = StylesImpl.createViewStyle({
 });
 ViewBase.setDefaultViewStyle(_defaultViewStyle);
 
+// Initialize Android implementation of platform accessibility helpers inside the singleton
+// instance of native-common AccessibilityUtil. This is to let native-common components access
+// platform specific APIs through native-common implementation itself. 
+import AccessibilityUtil from '../native-common/AccessibilityUtil';
+import AccessibilityPlatformUtil  from './AccessibilityUtil';
+
+AccessibilityUtil.setAccessibilityPlatformUtil(AccessibilityPlatformUtil);
+
 // -- STRANGE THINGS GOING ON HERE --
 // See web/ReactXP.tsx for more details.
 

src/android/ReactXP.ts

@@ -10,7 +10,7 @@
 import React = require('react');
 import RN = require('react-native');
 
-import AccessibilityUtil from './AccessibilityUtil';
+import AccessibilityUtil from '../native-common/AccessibilityUtil';
 import { Text as CommonText } from '../native-common/Text';
 import Types = require('../common/Types');
 import Styles from '../native-common/Styles';
@@ -48,10 +48,6 @@ export class Text extends CommonText {
             </RN.Text>
         );
     }
-
-    focus() {
-        AccessibilityUtil.setAccessibilityFocus(this);
-    }
 }
 
 export default Text;

src/android/Text.tsx

@@ -7,6 +7,8 @@
 * Common accessibility interface for platform-specific accessibility utilities.
 */
 
+import React = require('react');
+
 import Types = require('../common/Types');
 
 export const ImportantForAccessibilityMap = {
@@ -16,6 +18,12 @@ export const ImportantForAccessibilityMap = {
     [Types.ImportantForAccessibility.NoHideDescendants]: 'no-hide-descendants'
 };
 
+
+// Platform specific helpers exposed through Native-Common AccessibilityUtil. 
+export abstract class AccessibilityPlatformUtil {
+    abstract setAccessibilityFocus(component: React.Component<any, any>): void;
+}
+
 export abstract class AccessibilityUtil {
     isHidden(importantForAccessibility: Types.ImportantForAccessibility): boolean {
         if (importantForAccessibility) {

src/android/View.tsx

@@ -0,0 +1,22 @@
+/**
+* AccessibilityUtil.ts
+*
+* Copyright (c) Microsoft Corporation. All rights reserved.
+* Licensed under the MIT license.
+*
+* iOS-specific accessibility utils.
+*/
+
+import React = require('react');
+import RN = require('react-native');
+
+import Accessibility from '../native-common/Accessibility';
+import { AccessibilityPlatformUtil } from '../common/AccessibilityUtil';
+
+export class AccessibilityUtil extends AccessibilityPlatformUtil {
+    setAccessibilityFocus(component: React.Component<any, any>): void {
+        // NO-OP
+    }
+}
+
+export default new AccessibilityUtil();

src/common/AccessibilityUtil.ts

@@ -55,6 +55,14 @@ const _defaultViewStyle = StylesImpl.createViewStyle({
 });
 ViewBase.setDefaultViewStyle(_defaultViewStyle);
 
+// Initialize iOS implementation of platform accessibility helpers inside the singleton
+// instance of native-common AccessibilityUtil. This is to let native-common components access
+// platform specific APIs through native-common implementation itself. 
+import AccessibilityUtil from '../native-common/AccessibilityUtil';
+import AccessibilityPlatformUtil from './AccessibilityUtil';
+
+AccessibilityUtil.setAccessibilityPlatformUtil(AccessibilityPlatformUtil);
+
 // -- STRANGE THINGS GOING ON HERE --
 // See web/ReactXP.tsx for more details.
 

src/ios/AccessibilityUtil.ts

@@ -9,8 +9,12 @@
 */
 
 import _ = require('./lodashMini');
+import assert = require('assert');
+import React = require('react');
+import RN = require('react-native');
+
+import { AccessibilityUtil as CommonAccessibilityUtil, AccessibilityPlatformUtil } from '../common/AccessibilityUtil';
 
-import { AccessibilityUtil as CommonAccessibilityUtil } from '../common/AccessibilityUtil';
 import Types = require('../common/Types');
 
 const liveRegionMap = {
@@ -54,6 +58,13 @@ const componentTypeMap = {
 };
 
 export class AccessibilityUtil extends CommonAccessibilityUtil {
+    // Handle to accessibility platform helper instance that gets initialized during ReactXP initialization using the setter. 
+    private _instance: AccessibilityPlatformUtil;
+
+    setAccessibilityPlatformUtil(instance: AccessibilityPlatformUtil) {
+        this._instance = instance; 
+    }
+
     // Converts an AccessibilityTrait to a string, but the returned value is only needed for iOS. Other platforms ignore it. Presence
     // of an AccessibilityTrait.None can make an element non-accessible on Android. We use the override traits if they are present, else
     // use the deafult trait.
@@ -89,6 +100,11 @@ export class AccessibilityUtil extends CommonAccessibilityUtil {
         }
         return undefined;
     }
+
+    // Platform specific accessibility APIs. 
+    setAccessibilityFocus(component: React.Component<any, any>): void {
+        this._instance.setAccessibilityFocus(component);
+    }
 }
 
 export default new AccessibilityUtil();

src/ios/ReactXP.ts

@@ -52,7 +52,7 @@ export class Text extends RX.Text<{}> {
     }
 
     focus() {
-        // No-op
+        AccessibilityUtil.setAccessibilityFocus(this);
     }
 
     blur() {