react-native-a11y-order 0.1.0

package/react-native-a11y-order.podspec

@@ -0,0 +1,35 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32'
+
+Pod::Spec.new do |s|
+  s.name         = "react-native-a11y-order"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = package["homepage"]
+  s.license      = package["license"]
+  s.authors      = package["author"]
+
+  s.platforms    = { :ios => "11.0" }
+  s.source       = { :git => "https://github.com/ArturKalach/react-native-a11y-order.git", :tag => "#{s.version}" }
+
+  s.source_files = "ios/**/*.{h,m,mm}"
+
+  s.dependency "React-Core"
+
+  # Don't install the dependencies when we run `pod install` in the old architecture.
+  if ENV['RCT_NEW_ARCH_ENABLED'] == '1' then
+    s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1"
+    s.pod_target_xcconfig    = {
+        "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\"",
+        "OTHER_CPLUSPLUSFLAGS" => "-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1",
+        "CLANG_CXX_LANGUAGE_STANDARD" => "c++17"
+    }
+    s.dependency "React-Codegen"
+    s.dependency "RCT-Folly"
+    s.dependency "RCTRequired"
+    s.dependency "RCTTypeSafety"
+    s.dependency "ReactCommon/turbomodule/core"
+  end
+end

package/src/A11yModule/helper.ts

@@ -0,0 +1,26 @@
+import type { RefObject } from 'react';
+import type { View } from 'react-native';
+import { findNodeHandle } from 'react-native';
+
+import { setA11yOrder } from './module';
+
+export type A11yOrderInfo<T> = {
+  tag?: RefObject<View>;
+  views: (T | null)[];
+};
+
+export const setA11yElementsOrder = <T extends React.Component>({
+  tag,
+  views,
+}: A11yOrderInfo<T>) => {
+  if (!tag) return;
+
+  const targetView = findNodeHandle(tag.current as React.Component);
+  if (!targetView) return;
+
+  const tags = views
+    .map((view) => findNodeHandle(view as React.Component))
+    .filter((view) => Boolean(view)) as number[];
+
+  setA11yOrder?.(tags, targetView);
+};

package/src/A11yModule/index.tsx

@@ -0,0 +1,2 @@
+export { setA11yElementsOrder } from './helper';
+export { setA11yOrder } from './module';

package/src/A11yModule/module.ts

@@ -0,0 +1,32 @@
+import { NativeModules, Platform } from 'react-native';
+
+const LINKING_ERROR =
+  `The package 'react-native-a11y-order' doesn't seem to be linked. Make sure: \n\n` +
+  Platform.select({ ios: "- You have run 'pod install'\n", default: '' }) +
+  '- You rebuilt the app after installing the package\n' +
+  '- You are not using Expo Go\n';
+
+// @ts-expect-error
+const isTurboModuleEnabled = global.__turboModuleProxy != null;
+
+const A11yOrderModule = isTurboModuleEnabled
+  ? require('../nativeSpecs/NativeA11yOrder').default
+  : NativeModules.A11yOrder;
+
+const A11yOrder = A11yOrderModule
+  ? A11yOrderModule
+  : new Proxy(
+      {},
+      {
+        get() {
+          throw new Error(LINKING_ERROR);
+        },
+      }
+    );
+
+export function setA11yOrder(
+  tags: number[],
+  targetView?: number
+): Promise<number> {
+  return A11yOrder.setA11yOrder(tags, targetView);
+}

package/src/components/A11yOrder/A11yOrder.tsx

@@ -0,0 +1,28 @@
+import React, { useCallback, useId } from 'react';
+import { View, LayoutChangeEvent } from 'react-native';
+import type { A11yOrderProps } from './A11yOrder.types';
+
+export const A11yOrder: React.FC<A11yOrderProps> = ({
+  a11yOrder,
+  onLayout,
+  ...props
+}) => {
+  const onLayoutHandler = useCallback(
+    (e: LayoutChangeEvent) => {
+      onLayout?.(e);
+      a11yOrder.onLayout();
+    },
+    [a11yOrder, onLayout]
+  );
+
+  const id = useId?.() || 'mock_id'; // ToDo: use native component with tag to nativeTag
+
+  return (
+    <View
+      nativeID={id}
+      {...props}
+      onLayout={onLayoutHandler}
+      ref={a11yOrder.ref}
+    />
+  );
+};

package/src/components/A11yOrder/A11yOrder.types.ts

@@ -0,0 +1,8 @@
+import type { ViewProps, View } from 'react-native';
+
+export type A11yOrderProps = {
+  a11yOrder: {
+    ref: React.RefObject<View>;
+    onLayout: () => void;
+  };
+} & ViewProps;

package/src/components/A11yOrder/index.ts

@@ -0,0 +1 @@
+export { A11yOrder } from './A11yOrder';

package/src/components/index.ts

@@ -0,0 +1 @@
+export { A11yOrder } from './A11yOrder';

package/src/hooks/index.ts

@@ -0,0 +1,3 @@
+export { useA11yOrderManager } from './useA11yOrderManager';
+export { useFocusOrder } from './useFocusOrder';
+export { useDynamicFocusOrder } from './useDynamicFocusOrder';

package/src/hooks/useA11yOrderManager/index.ts

@@ -0,0 +1 @@
+export { useA11yOrderManager } from './useA11yOrderManager';

package/src/hooks/useA11yOrderManager/useA11yOrderManager.ts

@@ -0,0 +1,78 @@
+import { useRef, useCallback, RefObject, useMemo } from 'react';
+import { Platform } from 'react-native';
+import type { View } from 'react-native';
+import { setA11yElementsOrder } from '../../A11yModule';
+
+export const debounce = <T extends Function>(callback: T, timeout = 100) => {
+  let timer: NodeJS.Timeout | null;
+
+  return (...args: any) => {
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
+    timer = setTimeout(() => callback(args), timeout);
+  };
+};
+
+const SECONDS_PER_FRAME = 16;
+const COUNT_OF_FRAMES = 1;
+
+const DEBOUNCE_DELAY = SECONDS_PER_FRAME * COUNT_OF_FRAMES;
+
+export const useA11yOrderManager = <T extends React.Component>(
+  orderRef: RefObject<View>,
+  onlyFor?: Platform['OS']
+) => {
+  const currentRef = useRef<(T | null)[]>([]);
+  const registeredRefs = useRef<(T | null)[]>([]);
+
+  const refWasUpdated = useRef<boolean>(false);
+
+  const setOrder = useCallback(() => {
+    if (!onlyFor || onlyFor === Platform.OS) {
+      setA11yElementsOrder({
+        tag: orderRef,
+        views: registeredRefs.current,
+      });
+    }
+  }, [onlyFor, orderRef]);
+
+  const debounceOrder = useMemo(
+    () => debounce(setOrder, DEBOUNCE_DELAY),
+    [setOrder]
+  );
+
+  const registerOrderRef = useCallback(
+    (order: number) =>
+      (ref: T | null): void => {
+        refWasUpdated.current = true;
+        registeredRefs.current[order] = ref;
+      },
+    []
+  );
+
+  const updateRefList = useCallback(() => {
+    if (!refWasUpdated.current) {
+      return;
+    }
+
+    refWasUpdated.current = false;
+    currentRef.current = registeredRefs.current.filter((v) => v);
+
+    debounceOrder();
+  }, [debounceOrder]);
+
+  const reset = useCallback(() => {
+    currentRef.current = [];
+    registeredRefs.current = [];
+    refWasUpdated.current = false;
+  }, []);
+
+  return {
+    registerOrderRef,
+    updateRefList,
+    reset,
+    setOrder,
+  };
+};

package/src/hooks/useDynamicFocusOrder/index.ts

@@ -0,0 +1,2 @@
+export { useDynamicFocusOrder } from './useDynamicFocusOrder';
+export { UseDynamicFocusOrder } from './useDynamicFocusOrder.types';

package/src/hooks/useDynamicFocusOrder/useDynamicFocusOrder.ts

@@ -0,0 +1,30 @@
+import { useRef, useLayoutEffect } from 'react';
+import type { View, Platform } from 'react-native';
+
+import { useA11yOrderManager } from '../useA11yOrderManager';
+import type { UseDynamicFocusOrder } from './useDynamicFocusOrder.types';
+
+export const useDynamicFocusOrder = <T extends React.Component>(
+  onlyFor?: Platform['OS']
+): UseDynamicFocusOrder<T> => {
+  const a11yOrderRef = useRef<View>(null);
+
+  const {
+    registerOrderRef: registerOrder,
+    updateRefList,
+    reset,
+    setOrder,
+  } = useA11yOrderManager(a11yOrderRef, onlyFor);
+
+  useLayoutEffect(updateRefList);
+
+  return {
+    a11yOrder: {
+      ref: a11yOrderRef,
+      onLayout: updateRefList,
+    },
+    registerOrder,
+    reset,
+    setOrder,
+  };
+};

package/src/hooks/useDynamicFocusOrder/useDynamicFocusOrder.types.ts

@@ -0,0 +1,12 @@
+import type { RefObject, RefCallback } from 'react';
+import type { View } from 'react-native';
+
+export type UseDynamicFocusOrder<T extends React.Component> = {
+  a11yOrder: {
+    ref: RefObject<View>;
+    onLayout: () => void;
+  };
+  registerOrder: (order: number) => RefCallback<T>;
+  reset: () => void;
+  setOrder: () => void;
+};

package/src/hooks/useFocusOrder/index.ts

@@ -0,0 +1 @@
+export { useFocusOrder } from './useFocusOrder';

package/src/hooks/useFocusOrder/useFocusOrder.ts

@@ -0,0 +1,25 @@
+import { useRef } from 'react';
+import type { Platform } from 'react-native';
+import { useDynamicFocusOrder } from '../useDynamicFocusOrder';
+import type { FocusOrderInfo } from './useFocusOrder.types';
+
+export const useFocusOrder = <T extends React.Component>(
+  size: number,
+  onlyFor?: Platform['OS']
+): FocusOrderInfo<T> => {
+  const { a11yOrder, registerOrder, reset, setOrder } =
+    useDynamicFocusOrder(onlyFor);
+
+  const refs = useRef(
+    Array(size)
+      .fill(null)
+      .map((_, i) => registerOrder(i))
+  ).current;
+
+  return {
+    a11yOrder,
+    refs,
+    reset,
+    setOrder,
+  };
+};

package/src/hooks/useFocusOrder/useFocusOrder.types.ts

@@ -0,0 +1,9 @@
+import type { RefCallback } from 'react';
+import type { UseDynamicFocusOrder } from '../useDynamicFocusOrder';
+
+export type FocusOrderInfo<T extends React.Component> = Pick<
+  UseDynamicFocusOrder<T>,
+  'a11yOrder' | 'reset' | 'setOrder'
+> & {
+  refs: RefCallback<T>[];
+};

package/src/index.ts

@@ -0,0 +1,7 @@
+export {
+  useFocusOrder,
+  useDynamicFocusOrder,
+  useA11yOrderManager,
+} from './hooks';
+
+export { A11yOrder } from './components';

package/src/nativeSpecs/NativeA11yOrder.ts

@@ -0,0 +1,8 @@
+import type { TurboModule } from 'react-native';
+import { TurboModuleRegistry } from 'react-native';
+
+export interface Spec extends TurboModule {
+  setA11yOrder: (tags: number[], nativeTag?: number) => void;
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>('A11yOrder');