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

src/android/AccessibilityUtil.ts → src/android/AccessibilityNativeUtil.ts

@@ -1,5 +1,5 @@
 /**
-* AccessibilityUtil.ts
+* AccessibilityNativeUtil.ts
 *
 * Copyright (c) Microsoft Corporation. All rights reserved.
 * Licensed under the MIT license.
@@ -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 { AccessibilityNativeUtil as CommonAccessibilityNativeUtil } from '../common/AccessibilityUtil';
 
-export class AccessibilityUtil extends CommonAccessibilityUtil {
+export class AccessibilityNativeUtil 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
@@ -36,4 +36,4 @@ export class AccessibilityUtil extends CommonAccessibilityUtil {
     }
 }
 
-export default new AccessibilityUtil();
+export default new AccessibilityNativeUtil();

src/android/ReactXP.ts

@@ -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,8 +43,11 @@ 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 AccessibilityUtil from '../native-common/AccessibilityUtil';
+import AccessibilityNativeUtil  from './AccessibilityNativeUtil';
 import ViewBase from '../native-common/ViewBase';
 
 // Initialize the Android default view style. This is should not be required because RN for
@@ -55,6 +58,11 @@ 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. 
+AccessibilityUtil.setAccessibilityNativeUtil(AccessibilityNativeUtil);
+
 // -- STRANGE THINGS GOING ON HERE --
 // See web/ReactXP.tsx for more details.
 

src/android/Text.tsx

@@ -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/common/AccessibilityUtil.ts

@@ -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 AccessibilityNativeUtil {
+    abstract setAccessibilityFocus(component: React.Component<any, any>): void;
+}
+
 export abstract class AccessibilityUtil {
     isHidden(importantForAccessibility: Types.ImportantForAccessibility): boolean {
         if (importantForAccessibility) {

src/ios/AccessibilityNativeUtil.ts

@@ -0,0 +1,22 @@
+/**
+* AccessibilityNativeUtil.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 { AccessibilityNativeUtil as CommonAccessibilityNativeUtil } from '../common/AccessibilityUtil';
+
+export class AccessibilityNativeUtil extends CommonAccessibilityNativeUtil {
+    setAccessibilityFocus(component: React.Component<any, any>): void {
+        // NO-OP
+    }
+}
+
+export default new AccessibilityNativeUtil();

src/ios/ReactXP.ts

@@ -46,6 +46,9 @@ import { default as UserInterfaceImpl, UserInterface as UserInterfaceType } from
 import { default as UserPresenceImpl, UserPresence as UserPresenceType } from '../native-common/UserPresence';
 import { default as ViewImpl, View as ViewType } from '../native-common/View';
 import { default as WebViewImpl, WebView as WebViewType } from '../native-common/WebView';
+
+import AccessibilityUtil from '../native-common/AccessibilityUtil';
+import AccessibilityNativeUtil from './AccessibilityNativeUtil';
 import ViewBase from '../native-common/ViewBase';
 
 // Initialize the iOS default view style. This is required because on RN for iOS, the default
@@ -55,6 +58,11 @@ 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. 
+AccessibilityUtil.setAccessibilityNativeUtil(AccessibilityNativeUtil);
+
 // -- STRANGE THINGS GOING ON HERE --
 // See web/ReactXP.tsx for more details.
 

src/native-common/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, AccessibilityNativeUtil } 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: AccessibilityNativeUtil;
+
+    setAccessibilityNativeUtil(instance: AccessibilityNativeUtil) {
+        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/native-common/Text.tsx

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

src/native-common/TextInput.tsx

@@ -11,6 +11,7 @@ import _ = require('./lodashMini');
 import React = require('react');
 import RN = require('react-native');
 
+import AccessibilityUtil from './AccessibilityUtil';
 import RX = require('../common/Interfaces');
 import Styles from './Styles';
 import Types = require('../common/Types');
@@ -188,6 +189,7 @@ export class TextInput extends RX.TextInput<TextInputState> {
 
     focus() {
         (this.refs['nativeTextInput'] as any).focus();
+        AccessibilityUtil.setAccessibilityFocus(this);
     }
 
     isFocused() {

src/native-common/View.tsx

@@ -96,6 +96,10 @@ export class View extends ViewBase<Types.ViewProps, {}> {
             );
         }
     }
+
+    focus() {
+        AccessibilityUtil.setAccessibilityFocus(this);
+    }
 }
 
 export default View;

src/windows/AccessibilityNativeUtil.ts

@@ -0,0 +1,20 @@
+/**
+* AccessibilityNativeUtil.ts
+*
+* Copyright (c) Microsoft Corporation. All rights reserved.
+* Licensed under the MIT license.
+*
+* Windows-specific accessibility utils.
+*/
+
+import React = require('react');
+
+import { AccessibilityNativeUtil as CommonAccessibilityNativeUtil } from '../common/AccessibilityUtil';
+
+export class AccessibilityNativeUtil extends CommonAccessibilityNativeUtil {
+    setAccessibilityFocus(component: React.Component<any, any>) {
+        // No-Op
+    }
+}
+
+export default new AccessibilityNativeUtil();

src/windows/ReactXP.ts

@@ -45,6 +45,9 @@ import { default as UserInterfaceImpl, UserInterface as UserInterfaceType } from
 import { default as UserPresenceImpl, UserPresence as UserPresenceType } from '../native-common/UserPresence';
 import { default as ViewImpl, View as ViewType } from '../native-common/View';
 import { default as WebViewImpl, WebView as WebViewType } from '../native-common/WebView';
+
+import AccessibilityUtil from '../native-common/Accessibilityutil';
+import AccessibilityNativeUtil from './AccessibilityNativeUtil';
 import ViewBase from '../native-common/ViewBase';
 
 // Initialize the Windows default view style. This is required because on RN for Windows, the default
@@ -54,6 +57,12 @@ const _defaultViewStyle = StylesImpl.createViewStyle({
 });
 ViewBase.setDefaultViewStyle(_defaultViewStyle);
 
+
+// Initialize Windows 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. 
+AccessibilityUtil.setAccessibilityNativeUtil(AccessibilityNativeUtil);
+
 // -- STRANGE THINGS GOING ON HERE --
 // See web/ReactXP.tsx for more details.