[react-interactions] Refine a11y component flow types (#17032)

Author: trueadm

packages/react-interactions/accessibility/src/FocusContain.js

@@ -30,12 +30,12 @@ export default function FocusContain({
   children,
   disabled,
   tabScope: TabScope,
-}: FocusContainProps) {
+}: FocusContainProps): React.Node {
   const scopeRef = useRef(null);
   // This ensures tabbing works through the React tree (including Portals and Suspense nodes)
   const keyboard = useKeyboard({
     onKeyDown(event: KeyboardEvent): void {
-      if (disabled || event.key !== 'Tab') {
+      if (disabled === true || event.key !== 'Tab') {
         event.continuePropagation();
         return;
       }
@@ -51,7 +51,7 @@ export default function FocusContain({
   });
   const focusWithin = useFocusWithin({
     onBlurWithin: function(event) {
-      if (disabled) {
+      if (disabled === true) {
         event.continuePropagation();
         return;
       }
@@ -66,7 +66,7 @@ export default function FocusContain({
   useLayoutEffect(
     () => {
       const scope = scopeRef.current;
-      if (scope && !disabled) {
+      if (scope !== null && disabled !== true) {
         const elems = scope.getScopedNodes();
         if (elems && elems.indexOf(document.activeElement) === -1) {
           elems[0].focus();

packages/react-interactions/accessibility/src/FocusGroup.js

@@ -90,7 +90,9 @@ function hasModifierKey(event: KeyboardEvent): boolean {
   );
 }
 
-export function createFocusGroup(scope: ReactScope): Array<React.Component> {
+export function createFocusGroup(
+  scope: ReactScope,
+): [(FocusGroupProps) => React.Node, (FocusItemProps) => React.Node] {
   const TableScope = React.unstable_createScope(scope.fn);
 
   function Group({
@@ -99,7 +101,7 @@ export function createFocusGroup(scope: ReactScope): Array<React.Component> {
     wrap,
     tabScope: TabScope,
     allowModifiers,
-  }): FocusGroupProps {
+  }: FocusGroupProps): React.Node {
     const tabScopeRef = useRef(null);
     return (
       <TableScope
@@ -117,7 +119,7 @@ export function createFocusGroup(scope: ReactScope): Array<React.Component> {
     );
   }
 
-  function Item({children, onKeyDown}): FocusItemProps {
+  function Item({children, onKeyDown}: FocusItemProps): React.Node {
     const scopeRef = useRef(null);
     const keyboard = useKeyboard({
       onKeyDown(event: KeyboardEvent): void {

packages/react-interactions/accessibility/src/FocusManager.js

@@ -41,16 +41,16 @@ export function focusNext(
       event.continuePropagation();
     }
   } else if (focusedElement === lastTabbableElem) {
-    if (contain) {
+    if (contain === true) {
       focusElem(firstTabbableElem);
       if (event) {
         event.preventDefault();
       }
     } else if (event) {
       event.continuePropagation();
     }
-  } else {
-    focusElem((tabbableNodes: any)[currentIndex + 1]);
+  } else if (tabbableNodes) {
+    focusElem(tabbableNodes[currentIndex + 1]);
     if (event) {
       event.preventDefault();
     }
@@ -75,16 +75,16 @@ export function focusPrevious(
       event.continuePropagation();
     }
   } else if (focusedElement === firstTabbableElem) {
-    if (contain) {
+    if (contain === true) {
       focusElem(lastTabbableElem);
       if (event) {
         event.preventDefault();
       }
     } else if (event) {
       event.continuePropagation();
     }
-  } else {
-    focusElem((tabbableNodes: any)[currentIndex - 1]);
+  } else if (tabbableNodes) {
+    focusElem(tabbableNodes[currentIndex - 1]);
     if (event) {
       event.preventDefault();
     }

packages/react-interactions/accessibility/src/FocusTable.js

@@ -38,28 +38,6 @@ type FocusTableProps = {|
 
 const {useRef} = React;
 
-export function focusFirstCellOnTable(table: ReactScopeMethods): void {
-  const rows = table.getChildren();
-  if (rows !== null) {
-    const firstRow = rows[0];
-    if (firstRow !== null) {
-      const cells = firstRow.getChildren();
-      if (cells !== null) {
-        const firstCell = cells[0];
-        if (firstCell !== null) {
-          const tabbableNodes = firstCell.getScopedNodes();
-          if (tabbableNodes !== null) {
-            const firstElem = tabbableNodes[0];
-            if (firstElem !== null) {
-              firstElem.focus();
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
 function focusScope(cell: ReactScopeMethods, event?: KeyboardEvent): void {
   const tabbableNodes = cell.getScopedNodes();
   if (tabbableNodes !== null && tabbableNodes.length > 0) {
@@ -178,7 +156,13 @@ function hasModifierKey(event: KeyboardEvent): boolean {
   );
 }
 
-export function createFocusTable(scope: ReactScope): Array<React.Component> {
+export function createFocusTable(
+  scope: ReactScope,
+): [
+  (FocusTableProps) => React.Node,
+  (FocusRowProps) => React.Node,
+  (FocusCellProps) => React.Node,
+] {
   const TableScope = React.unstable_createScope(scope.fn);
 
   function Table({
@@ -188,7 +172,7 @@ export function createFocusTable(scope: ReactScope): Array<React.Component> {
     wrapY,
     tabScope: TabScope,
     allowModifiers,
-  }): FocusTableProps {
+  }: FocusTableProps): React.Node {
     const tabScopeRef = useRef(null);
     return (
       <TableScope
@@ -207,11 +191,11 @@ export function createFocusTable(scope: ReactScope): Array<React.Component> {
     );
   }
 
-  function Row({children}): FocusRowProps {
+  function Row({children}: FocusRowProps): React.Node {
     return <TableScope type="row">{children}</TableScope>;
   }
 
-  function Cell({children, onKeyDown, colSpan}): FocusCellProps {
+  function Cell({children, onKeyDown, colSpan}: FocusCellProps): React.Node {
     const scopeRef = useRef(null);
     const keyboard = useKeyboard({
       onKeyDown(event: KeyboardEvent): void {

packages/react-interactions/accessibility/src/shared/getTabbableNodes.js

@@ -9,7 +9,15 @@
 
 import type {ReactScopeMethods} from 'shared/ReactTypes';
 
-export default function getTabbableNodes(scope: ReactScopeMethods) {
+export default function getTabbableNodes(
+  scope: ReactScopeMethods,
+): [
+  null | Array<HTMLElement>,
+  null | HTMLElement,
+  null | HTMLElement,
+  number,
+  null | HTMLElement,
+] {
   const tabbableNodes = scope.getScopedNodes();
   if (tabbableNodes === null || tabbableNodes.length === 0) {
     return [null, null, null, 0, null];