diff --git a/FocusOrder/RNAccessibilityOrder/.watchmanconfig b/FocusOrder/RNAccessibilityOrder/.watchmanconfig deleted file mode 100644 index 9e26dfeeb6e641a33dae4961196235bdb965b21b..0000000000000000000000000000000000000000 --- a/FocusOrder/RNAccessibilityOrder/.watchmanconfig +++ /dev/null @@ -1 +0,0 @@ -{} \ No newline at end of file diff --git a/FocusOrder/RNAccessibilityOrder/AccessibilityWrapper.ios.js b/FocusOrder/RNAccessibilityOrder/AccessibilityWrapper.js similarity index 96% rename from FocusOrder/RNAccessibilityOrder/AccessibilityWrapper.ios.js rename to FocusOrder/RNAccessibilityOrder/AccessibilityWrapper.js index e1741e059ff03ed85caac8b0a7fe27f75a64183b..82d07769986e40e3bc46d5195f44ec6c5fe2ee43 100644 --- a/FocusOrder/RNAccessibilityOrder/AccessibilityWrapper.ios.js +++ b/FocusOrder/RNAccessibilityOrder/AccessibilityWrapper.js @@ -23,7 +23,7 @@ const AccessibilityWrapperPropTypes = { ), }; -class AccessibilityWrapperIOS extends React.Component { +class AccessibilityWrapper extends React.Component { static propTypes = AccessibilityWrapperPropTypes; ref = React.createRef(); @@ -92,6 +92,6 @@ AccessibilityWrapperAndroid.propTypes = AccessibilityWrapperPropTypes; * } */ export default Platform.select({ - ios: AccessibilityWrapperIOS, + ios: AccessibilityWrapper, android: AccessibilityWrapperAndroid, }); diff --git a/FocusOrder/RNAccessibilityOrder/AppAndroid.js b/FocusOrder/RNAccessibilityOrder/AppAndroid.js new file mode 100644 index 0000000000000000000000000000000000000000..d669a04bdddd8c0718cacec3c0e6082549f9f05a --- /dev/null +++ b/FocusOrder/RNAccessibilityOrder/AppAndroid.js @@ -0,0 +1,81 @@ +/** + * Sample React Native App + * https://github.com/facebook/react-native + * + * @format + * @flow strict-local + */ + +import React from 'react'; +import { + StyleSheet, + TouchableOpacity, + View, + Text, + findNodeHandle, +} from 'react-native'; + +import FocusOrder from './FocusOrder'; + +const AppAndroid = () => { + const ref1 = React.useRef(); + const ref2 = React.useRef(); + const ref3 = React.useRef(); + + return ( + <> + + RNAccessibilityOrder + + + { + FocusOrder.setOrder([ + findNodeHandle(ref3.current), + findNodeHandle(ref2.current), + findNodeHandle(ref1.current), + ]); + }}> + Change accessibility focus order + + + + Button 1 + + + Button 2 + + + Button 3 + + + + + ); +}; + +const styles = StyleSheet.create({ + body: { + flex: 1, + paddingHorizontal: 10, + }, + group: { + padding: 10, + }, + header: { + backgroundColor: '#008577', + paddingHorizontal: 20, + paddingVertical: 20, + }, + headerText: { + color: 'white', + }, + button: { + padding: 10, + margin: 10, + backgroundColor: '#aaa', + }, +}); + +export default AppAndroid; diff --git a/FocusOrder/RNAccessibilityOrder/App.js b/FocusOrder/RNAccessibilityOrder/AppIos.js similarity index 70% rename from FocusOrder/RNAccessibilityOrder/App.js rename to FocusOrder/RNAccessibilityOrder/AppIos.js index a4a9c64f6b84f436daa23c91cf45186c703f6bc4..7cf4db6abcbbb1e0019d0516d8f51ced9ea7ffbe 100644 --- a/FocusOrder/RNAccessibilityOrder/App.js +++ b/FocusOrder/RNAccessibilityOrder/AppIos.js @@ -7,23 +7,15 @@ */ import React from 'react'; -import { - SafeAreaView, - StyleSheet, - TouchableOpacity, - View, - Text, - AccessibilityInfo, -} from 'react-native'; +import {StyleSheet, TouchableOpacity, View, Text} from 'react-native'; import AccessibilityWrapper from './AccessibilityWrapper'; -const App = () => { +const AppIos = () => { const ref1 = React.useRef(); const ref2 = React.useRef(); const ref3 = React.useRef(); const [state, setState] = React.useState([ref1, ref2, ref3]); - const [changed, setChanged] = React.useState(false); return ( <> @@ -32,24 +24,20 @@ const App = () => { { - if (!changed) { - setState([ref3, ref2, ref1]); - } else { - setState([ref1, ref2, ref3]); - } - setChanged(!changed); + setState([ref3, ref2, ref1]); }}> Change accessibility focus order - + Button 1 - + Button 2 - + Button 3 @@ -74,6 +62,11 @@ const styles = StyleSheet.create({ headerText: { color: 'white', }, + button: { + padding: 10, + margin: 10, + backgroundColor: '#aaa', + }, }); -export default App; +export default AppIos; diff --git a/FocusOrder/RNAccessibilityOrder/FocusOrder.android.js b/FocusOrder/RNAccessibilityOrder/FocusOrder.android.js new file mode 100644 index 0000000000000000000000000000000000000000..e5c0fd52ea29fccf497bcac49591cfdce7cfbc93 --- /dev/null +++ b/FocusOrder/RNAccessibilityOrder/FocusOrder.android.js @@ -0,0 +1,2 @@ +import {NativeModules} from 'react-native'; +export default NativeModules.FocusOrder; diff --git a/FocusOrder/RNAccessibilityOrder/__tests__/App-test.js b/FocusOrder/RNAccessibilityOrder/__tests__/App-test.js deleted file mode 100644 index 178476699b605584dc503e85537c47dac8b7b611..0000000000000000000000000000000000000000 --- a/FocusOrder/RNAccessibilityOrder/__tests__/App-test.js +++ /dev/null @@ -1,14 +0,0 @@ -/** - * @format - */ - -import 'react-native'; -import React from 'react'; -import App from '../App'; - -// Note: test renderer must be required after react-native. -import renderer from 'react-test-renderer'; - -it('renders correctly', () => { - renderer.create(); -}); diff --git a/FocusOrder/RNAccessibilityOrder/android/app/src/main/java/com/rnaccessibilityorder/FocusOrderModule.java b/FocusOrder/RNAccessibilityOrder/android/app/src/main/java/com/rnaccessibilityorder/FocusOrderModule.java new file mode 100644 index 0000000000000000000000000000000000000000..aa3b369767bb3d40edb12cd23b7e5438c3ec9e3f --- /dev/null +++ b/FocusOrder/RNAccessibilityOrder/android/app/src/main/java/com/rnaccessibilityorder/FocusOrderModule.java @@ -0,0 +1,49 @@ +package com.rnaccessibilityorder; + +import com.facebook.react.bridge.NativeModule; +import com.facebook.react.bridge.ReactApplicationContext; +import com.facebook.react.bridge.ReactContext; +import com.facebook.react.bridge.ReactContextBaseJavaModule; +import com.facebook.react.bridge.ReactMethod; +import com.facebook.react.bridge.ReadableArray; +import com.facebook.react.uimanager.UIManagerModule; + +import android.util.Log; +import android.view.View; + +import java.util.Map; +import java.util.HashMap; +import java.util.ArrayList; + +public class FocusOrderModule extends ReactContextBaseJavaModule { + private static ReactApplicationContext reactContext; + + FocusOrderModule(ReactApplicationContext context) { + super(context); + reactContext = context; + } + + @Override + public String getName() { + return "FocusOrder"; + } + + @ReactMethod + public void setOrder(ReadableArray order) { + Log.w("ACCESSIBILITY_FOCUS", "here"); + final UIManagerModule uiManager = this.reactContext.getNativeModule(UIManagerModule.class); + ArrayList viewList = new ArrayList(); + + for (Object el : order.toArrayList()) { + viewList.add(uiManager.resolveView((int) ((double) el))); + } + + for (int i = 0; i < viewList.size(); i++) { + if (i > 0) { + View current = viewList.get(i); + View prev = viewList.get(i - 1); + current.setAccessibilityTraversalAfter(prev.getId()); + } + } + } +} diff --git a/FocusOrder/RNAccessibilityOrder/android/app/src/main/java/com/rnaccessibilityorder/FocusOrderPackage.java b/FocusOrder/RNAccessibilityOrder/android/app/src/main/java/com/rnaccessibilityorder/FocusOrderPackage.java new file mode 100644 index 0000000000000000000000000000000000000000..a42c0a2485fa42b40c664d67a8119cf769593e7f --- /dev/null +++ b/FocusOrder/RNAccessibilityOrder/android/app/src/main/java/com/rnaccessibilityorder/FocusOrderPackage.java @@ -0,0 +1,29 @@ +package com.rnaccessibilityorder; + +import com.facebook.react.ReactPackage; +import com.facebook.react.bridge.NativeModule; +import com.facebook.react.bridge.ReactApplicationContext; +import com.facebook.react.uimanager.ViewManager; + +import java.util.ArrayList; +import java.util.Collections; +import java.util.List; + +public class FocusOrderPackage implements ReactPackage { + + @Override + public List createViewManagers(ReactApplicationContext reactContext) { + return Collections.emptyList(); + } + + @Override + public List createNativeModules( + ReactApplicationContext reactContext) { + List modules = new ArrayList<>(); + + modules.add(new FocusOrderModule(reactContext)); + + return modules; + } + +} diff --git a/FocusOrder/RNAccessibilityOrder/android/app/src/main/java/com/rnaccessibilityorder/MainApplication.java b/FocusOrder/RNAccessibilityOrder/android/app/src/main/java/com/rnaccessibilityorder/MainApplication.java index 7e0c6c67cfda5c7fa056d0e55e6171c21cea736e..91e2ee0c01c28b163b1f1b20a9ae9f74e7e7135b 100644 --- a/FocusOrder/RNAccessibilityOrder/android/app/src/main/java/com/rnaccessibilityorder/MainApplication.java +++ b/FocusOrder/RNAccessibilityOrder/android/app/src/main/java/com/rnaccessibilityorder/MainApplication.java @@ -25,7 +25,7 @@ public class MainApplication extends Application implements ReactApplication { @SuppressWarnings("UnnecessaryLocalVariable") List packages = new PackageList(this).getPackages(); // Packages that cannot be autolinked yet can be added manually here, for example: - // packages.add(new MyReactNativePackage()); + packages.add(new FocusOrderPackage()); return packages; } diff --git a/FocusOrder/RNAccessibilityOrder/index.js b/FocusOrder/RNAccessibilityOrder/index.js index a850d031de79119ee024e9c2fe22809c31417ab3..bae2bd73fc862ec7d3b6c39fb120ade80eed6d13 100644 --- a/FocusOrder/RNAccessibilityOrder/index.js +++ b/FocusOrder/RNAccessibilityOrder/index.js @@ -2,8 +2,12 @@ * @format */ -import {AppRegistry} from 'react-native'; -import App from './App'; +import {AppRegistry, Platform} from 'react-native'; import {name as appName} from './app.json'; +const App = + Platform.OS === 'ios' + ? require('./AppIos').default + : require('./AppAndroid').default; + AppRegistry.registerComponent(appName, () => App);