Merge pull request #27847 from kubabutkiewicz/ts-migration/Accessibil…

…ity-lib

[No QA] [TS migration] Migrate 'Accessibility' lib to TypeScript

src/libs/Accessibility/index.js → src/libs/Accessibility/index.ts

@@ -1,25 +1,28 @@
 import {useEffect, useState, useCallback} from 'react';
-import {AccessibilityInfo} from 'react-native';
-import _ from 'underscore';
+import {AccessibilityInfo, LayoutChangeEvent} from 'react-native';
 import moveAccessibilityFocus from './moveAccessibilityFocus';
 
-const useScreenReaderStatus = () => {
+type HitSlop = {x: number; y: number};
+
+const useScreenReaderStatus = (): boolean => {
     const [isScreenReaderEnabled, setIsScreenReaderEnabled] = useState(false);
     useEffect(() => {
         const subscription = AccessibilityInfo.addEventListener('screenReaderChanged', setIsScreenReaderEnabled);
 
-        return subscription && subscription.remove;
+        return () => {
+            subscription?.remove();
+        };
     }, []);
 
     return isScreenReaderEnabled;
 };
 
-const getHitSlopForSize = ({x, y}) => {
+const getHitSlopForSize = ({x, y}: HitSlop) => {
     /* according to https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/
     the minimum tappable area is 44x44 points */
     const minimumSize = 44;
-    const hitSlopVertical = _.max([minimumSize - x, 0]) / 2;
-    const hitSlopHorizontal = _.max([minimumSize - y, 0]) / 2;
+    const hitSlopVertical = Math.max(minimumSize - x, 0) / 2;
+    const hitSlopHorizontal = Math.max(minimumSize - y, 0) / 2;
     return {
         top: hitSlopVertical,
         bottom: hitSlopVertical,
@@ -31,7 +34,7 @@ const getHitSlopForSize = ({x, y}) => {
 const useAutoHitSlop = () => {
     const [frameSize, setFrameSize] = useState({x: 0, y: 0});
     const onLayout = useCallback(
-        (event) => {
+        (event: LayoutChangeEvent) => {
             const {layout} = event.nativeEvent;
             if (layout.width !== frameSize.x && layout.height !== frameSize.y) {
                 setFrameSize({x: layout.width, y: layout.height});

src/libs/Accessibility/moveAccessibilityFocus/index.native.js → src/libs/Accessibility/moveAccessibilityFocus/index.native.ts

@@ -1,9 +1,11 @@
 import {AccessibilityInfo} from 'react-native';
+import MoveAccessibilityFocus from './types';
 
-const moveAccessibilityFocus = (ref) => {
+const moveAccessibilityFocus: MoveAccessibilityFocus = (ref) => {
     if (!ref) {
         return;
     }
+
     AccessibilityInfo.sendAccessibilityEvent(ref, 'focus');
 };
 

src/libs/Accessibility/moveAccessibilityFocus/index.ts

@@ -0,0 +1,10 @@
+import MoveAccessibilityFocus from './types';
+
+const moveAccessibilityFocus: MoveAccessibilityFocus = (ref) => {
+    if (!ref?.current) {
+        return;
+    }
+    ref.current.focus();
+};
+
+export default moveAccessibilityFocus;

src/libs/Accessibility/moveAccessibilityFocus/types.ts

@@ -0,0 +1,6 @@
+import {ElementRef, RefObject} from 'react';
+import {HostComponent} from 'react-native';
+
+type MoveAccessibilityFocus = (ref?: ElementRef<HostComponent<unknown>> & RefObject<HTMLOrSVGElement>) => void;
+
+export default MoveAccessibilityFocus;