diff --git a/packages/react-interactions/accessibility/src/FocusContain.js b/packages/react-interactions/accessibility/src/FocusContain.js index ae132a48cd37c..100e747a57d38 100644 --- a/packages/react-interactions/accessibility/src/FocusContain.js +++ b/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(); diff --git a/packages/react-interactions/accessibility/src/FocusGroup.js b/packages/react-interactions/accessibility/src/FocusGroup.js index 6b9bf10499494..898ee8a89eb07 100644 --- a/packages/react-interactions/accessibility/src/FocusGroup.js +++ b/packages/react-interactions/accessibility/src/FocusGroup.js @@ -90,7 +90,9 @@ function hasModifierKey(event: KeyboardEvent): boolean { ); } -export function createFocusGroup(scope: ReactScope): Array { +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 { wrap, tabScope: TabScope, allowModifiers, - }): FocusGroupProps { + }: FocusGroupProps): React.Node { const tabScopeRef = useRef(null); return ( { ); } - function Item({children, onKeyDown}): FocusItemProps { + function Item({children, onKeyDown}: FocusItemProps): React.Node { const scopeRef = useRef(null); const keyboard = useKeyboard({ onKeyDown(event: KeyboardEvent): void { diff --git a/packages/react-interactions/accessibility/src/FocusManager.js b/packages/react-interactions/accessibility/src/FocusManager.js index a3083aad85ce0..d38434b2fd80d 100644 --- a/packages/react-interactions/accessibility/src/FocusManager.js +++ b/packages/react-interactions/accessibility/src/FocusManager.js @@ -41,7 +41,7 @@ export function focusNext( event.continuePropagation(); } } else if (focusedElement === lastTabbableElem) { - if (contain) { + if (contain === true) { focusElem(firstTabbableElem); if (event) { event.preventDefault(); @@ -49,8 +49,8 @@ export function focusNext( } else if (event) { event.continuePropagation(); } - } else { - focusElem((tabbableNodes: any)[currentIndex + 1]); + } else if (tabbableNodes) { + focusElem(tabbableNodes[currentIndex + 1]); if (event) { event.preventDefault(); } @@ -75,7 +75,7 @@ export function focusPrevious( event.continuePropagation(); } } else if (focusedElement === firstTabbableElem) { - if (contain) { + if (contain === true) { focusElem(lastTabbableElem); if (event) { event.preventDefault(); @@ -83,8 +83,8 @@ export function focusPrevious( } else if (event) { event.continuePropagation(); } - } else { - focusElem((tabbableNodes: any)[currentIndex - 1]); + } else if (tabbableNodes) { + focusElem(tabbableNodes[currentIndex - 1]); if (event) { event.preventDefault(); } diff --git a/packages/react-interactions/accessibility/src/FocusTable.js b/packages/react-interactions/accessibility/src/FocusTable.js index cb7d7c44d84dc..ebe12652836bc 100644 --- a/packages/react-interactions/accessibility/src/FocusTable.js +++ b/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 { +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 { wrapY, tabScope: TabScope, allowModifiers, - }): FocusTableProps { + }: FocusTableProps): React.Node { const tabScopeRef = useRef(null); return ( { ); } - function Row({children}): FocusRowProps { + function Row({children}: FocusRowProps): React.Node { return {children}; } - 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 { diff --git a/packages/react-interactions/accessibility/src/shared/getTabbableNodes.js b/packages/react-interactions/accessibility/src/shared/getTabbableNodes.js index a786e8a3beb46..1ee49390f2163 100644 --- a/packages/react-interactions/accessibility/src/shared/getTabbableNodes.js +++ b/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, + null | HTMLElement, + null | HTMLElement, + number, + null | HTMLElement, +] { const tabbableNodes = scope.getScopedNodes(); if (tabbableNodes === null || tabbableNodes.length === 0) { return [null, null, null, 0, null];