@jmruthers/pace-core 0.6.10 → 0.6.11

package/src/components/DataTable/hooks/useKeyboardNavigation.ts

@@ -35,9 +35,27 @@ export interface KeyboardNavigationState {
   isNavigating: boolean;
 }
 
-export interface UseKeyboardNavigationReturn {
+/** Keyboard event handlers returned for a cell (onKeyDown, onFocus, onBlur). */
+export interface CellKeyboardHandlers {
+  onKeyDown: (event: React.KeyboardEvent) => void;
+  onFocus: (event: React.FocusEvent) => void;
+  onBlur: (event: React.FocusEvent) => void;
+}
+
+/** Keyboard event handlers returned for a header (onKeyDown, onFocus). */
+export interface HeaderKeyboardHandlers {
+  onKeyDown: (event: React.KeyboardEvent) => void;
+  onFocus: (event: React.FocusEvent) => void;
+}
+
+/** Current navigation state only. */
+export interface KeyboardNavigationStateView {
   /** Current navigation state */
   state: KeyboardNavigationState;
+}
+
+/** Focus movement methods (cell/row/table). */
+export interface KeyboardNavigationFocusMovement {
   /** Focus a specific cell */
   focusCell: (rowIndex: number, columnIndex: number) => void;
   /** Move focus to next cell */
@@ -56,19 +74,20 @@ export interface UseKeyboardNavigationReturn {
   focusTableStart: () => void;
   /** Move focus to last row */
   focusTableEnd: () => void;
+}
+
+/** Cell/header handler factories and tabindex. */
+export interface KeyboardNavigationCellHandlers {
   /** Get tabindex for a cell */
   getCellTabIndex: (rowIndex: number, columnIndex: number) => number;
   /** Get keyboard event handlers for a cell */
-  getCellKeyboardHandlers: (rowIndex: number, columnIndex: number) => {
-    onKeyDown: (event: React.KeyboardEvent) => void;
-    onFocus: (event: React.FocusEvent) => void;
-    onBlur: (event: React.FocusEvent) => void;
-  };
+  getCellKeyboardHandlers: (rowIndex: number, columnIndex: number) => CellKeyboardHandlers;
   /** Get keyboard event handlers for headers */
-  getHeaderKeyboardHandlers: (columnIndex: number, onSort?: () => void) => {
-    onKeyDown: (event: React.KeyboardEvent) => void;
-    onFocus: (event: React.FocusEvent) => void;
-  };
+  getHeaderKeyboardHandlers: (columnIndex: number, onSort?: () => void) => HeaderKeyboardHandlers;
+}
+
+/** Focus store/restore and reset. */
+export interface KeyboardNavigationFocusPersistence {
   /** Reset focus state */
   resetFocus: () => void;
   /** Store focus for restoration */
@@ -77,337 +96,334 @@ export interface UseKeyboardNavigationReturn {
   restoreFocus: () => void;
 }
 
-/**
- * Hook for managing keyboard navigation in DataTable
- */
-export function useKeyboardNavigation(
+/** Return type of useKeyboardNavigation (composed from focused interfaces). */
+export type UseKeyboardNavigationReturn = KeyboardNavigationStateView &
+  KeyboardNavigationFocusMovement &
+  KeyboardNavigationCellHandlers &
+  KeyboardNavigationFocusPersistence;
+
+/** Return type of useKeyboardNavigationState (internal). */
+export interface UseKeyboardNavigationStateReturn {
+  state: KeyboardNavigationState;
+  setState: React.Dispatch<React.SetStateAction<KeyboardNavigationState>>;
+  storedFocusRef: React.MutableRefObject<{ rowIndex: number; columnIndex: number } | null>;
+  navigationTimeoutRef: React.MutableRefObject<NodeJS.Timeout | undefined>;
+  getCellElement: (rowIndex: number, columnIndex: number) => HTMLElement | null;
+  getHeaderElement: (columnIndex: number) => HTMLElement | null;
+  focusCell: (rowIndex: number, columnIndex: number) => void;
+  focusNext: () => void;
+  focusPrevious: () => void;
+  focusUp: () => void;
+  focusDown: () => void;
+  focusRowStart: () => void;
+  focusRowEnd: () => void;
+  focusTableStart: () => void;
+  focusTableEnd: () => void;
+  getCellTabIndex: (rowIndex: number, columnIndex: number) => number;
+}
+
+/** State and focus movement for keyboard navigation. Kept under max-lines-per-function. */
+function useKeyboardNavigationState(
   rowCount: number,
   columnCount: number,
-  options: KeyboardNavigationOptions = {}
-): UseKeyboardNavigationReturn {
+  options: KeyboardNavigationOptions
+): UseKeyboardNavigationStateReturn {
   const {
     enabled = true,
     announceNavigation = true,
-    supportsColumnReorder = false,
-    supportsColumnResize = false,
     onFocusChange,
     tableRef: externalTableRef,
   } = options;
 
-  // Navigation state
   const [state, setState] = useState<KeyboardNavigationState>({
     focusedRowIndex: 0,
     focusedColumnIndex: 0,
     isNavigating: false,
   });
 
-  // Refs for focus management
   const internalTableRef = useRef<HTMLTableElement>(null);
   const tableRef = externalTableRef || internalTableRef;
   const storedFocusRef = useRef<{ rowIndex: number; columnIndex: number } | null>(null);
   const navigationTimeoutRef = useRef<NodeJS.Timeout>(undefined);
 
-  // Helper to get cell element
   const getCellElement = useCallback((rowIndex: number, columnIndex: number): HTMLElement | null => {
     if (!tableRef.current) return null;
-    
     const tbody = tableRef.current.querySelector('tbody');
     if (!tbody) return null;
-    
     const rows = tbody.querySelectorAll('tr[role="row"]');
     const row = rows[rowIndex];
     if (!row) return null;
-    
     const cells = row.querySelectorAll('td[role="cell"], th[role="columnheader"]');
-    return cells[columnIndex] as HTMLElement || null;
+    return (cells[columnIndex] as HTMLElement) || null;
   }, [tableRef]);
 
-  // Helper to get header element
   const getHeaderElement = useCallback((columnIndex: number): HTMLElement | null => {
     if (!tableRef.current) return null;
-    
     const thead = tableRef.current.querySelector('thead');
     if (!thead) return null;
-    
     const headerRow = thead.querySelector('tr[role="row"]');
     if (!headerRow) return null;
-    
     const headers = headerRow.querySelectorAll('th[role="columnheader"]');
-    return headers[columnIndex] as HTMLElement || null;
+    return (headers[columnIndex] as HTMLElement) || null;
   }, [tableRef]);
 
-  // Focus a specific cell
   const focusCell = useCallback((rowIndex: number, columnIndex: number) => {
     if (!enabled) return;
-    
-    // Clamp values to valid range
     const clampedRowIndex = Math.max(0, Math.min(rowIndex, rowCount - 1));
     const clampedColumnIndex = Math.max(0, Math.min(columnIndex, columnCount - 1));
-    
-    setState(prev => ({
+    setState((prev) => ({
       ...prev,
       focusedRowIndex: clampedRowIndex,
       focusedColumnIndex: clampedColumnIndex,
       isNavigating: true,
     }));
-    
-    // Focus the actual element
     const cellElement = getCellElement(clampedRowIndex, clampedColumnIndex);
-    if (cellElement) {
-      cellElement.focus();
-    }
-    
-    // Notify callback
+    if (cellElement) cellElement.focus();
     onFocusChange?.(clampedRowIndex, clampedColumnIndex);
-    
-    // Announce navigation if enabled
-    if (announceNavigation) {
-      announce(`Row ${clampedRowIndex + 1}, Column ${clampedColumnIndex + 1}`);
-    }
+    if (announceNavigation) announce(`Row ${clampedRowIndex + 1}, Column ${clampedColumnIndex + 1}`);
   }, [enabled, rowCount, columnCount, getCellElement, onFocusChange, announceNavigation]);
 
-  // Navigation functions
   const focusNext = useCallback(() => {
     const { focusedRowIndex, focusedColumnIndex } = state;
-    if (focusedColumnIndex < columnCount - 1) {
-      focusCell(focusedRowIndex, focusedColumnIndex + 1);
-    } else if (focusedRowIndex < rowCount - 1) {
-      focusCell(focusedRowIndex + 1, 0);
-    }
+    if (focusedColumnIndex < columnCount - 1) focusCell(focusedRowIndex, focusedColumnIndex + 1);
+    else if (focusedRowIndex < rowCount - 1) focusCell(focusedRowIndex + 1, 0);
   }, [state, columnCount, rowCount, focusCell]);
 
   const focusPrevious = useCallback(() => {
     const { focusedRowIndex, focusedColumnIndex } = state;
-    if (focusedColumnIndex > 0) {
-      focusCell(focusedRowIndex, focusedColumnIndex - 1);
-    } else if (focusedRowIndex > 0) {
-      focusCell(focusedRowIndex - 1, columnCount - 1);
-    }
+    if (focusedColumnIndex > 0) focusCell(focusedRowIndex, focusedColumnIndex - 1);
+    else if (focusedRowIndex > 0) focusCell(focusedRowIndex - 1, columnCount - 1);
   }, [state, columnCount, focusCell]);
 
   const focusUp = useCallback(() => {
     const { focusedRowIndex, focusedColumnIndex } = state;
-    if (focusedRowIndex > 0) {
-      focusCell(focusedRowIndex - 1, focusedColumnIndex);
-    }
+    if (focusedRowIndex > 0) focusCell(focusedRowIndex - 1, focusedColumnIndex);
   }, [state, focusCell]);
 
   const focusDown = useCallback(() => {
     const { focusedRowIndex, focusedColumnIndex } = state;
-    if (focusedRowIndex < rowCount - 1) {
-      focusCell(focusedRowIndex + 1, focusedColumnIndex);
-    }
+    if (focusedRowIndex < rowCount - 1) focusCell(focusedRowIndex + 1, focusedColumnIndex);
   }, [state, rowCount, focusCell]);
 
   const focusRowStart = useCallback(() => {
-    const { focusedRowIndex } = state;
-    focusCell(focusedRowIndex, 0);
-  }, [state, focusCell]);
+    focusCell(state.focusedRowIndex, 0);
+  }, [state.focusedRowIndex, focusCell]);
 
   const focusRowEnd = useCallback(() => {
-    const { focusedRowIndex } = state;
-    focusCell(focusedRowIndex, columnCount - 1);
-  }, [state, columnCount, focusCell]);
+    focusCell(state.focusedRowIndex, columnCount - 1);
+  }, [state.focusedRowIndex, columnCount, focusCell]);
 
-  const focusTableStart = useCallback(() => {
-    focusCell(0, 0);
-  }, [focusCell]);
-
-  const focusTableEnd = useCallback(() => {
-    focusCell(rowCount - 1, columnCount - 1);
-  }, [rowCount, columnCount, focusCell]);
-
-  // Get tabindex for roving tabindex pattern
-  const getCellTabIndex = useCallback((rowIndex: number, columnIndex: number): number => {
-    if (!enabled) return -1;
-    
-    // Only the focused cell should be tabbable
-    return (state.focusedRowIndex === rowIndex && state.focusedColumnIndex === columnIndex) ? 0 : -1;
-  }, [enabled, state.focusedRowIndex, state.focusedColumnIndex]);
-
-  // Cell keyboard handlers
-  const getCellKeyboardHandlers = useCallback((rowIndex: number, columnIndex: number) => {
-    const onKeyDown = (event: React.KeyboardEvent) => {
-      if (!enabled) return;
-      
-      switch (event.key) {
-        case 'ArrowRight':
-          event.preventDefault();
-          if (event.ctrlKey || event.metaKey) {
-            focusRowEnd();
-          } else {
-            focusNext();
-          }
-          break;
-          
-        case 'ArrowLeft':
-          event.preventDefault();
-          if (event.ctrlKey || event.metaKey) {
-            focusRowStart();
-          } else {
-            focusPrevious();
-          }
-          break;
-          
-        case 'ArrowDown':
-          event.preventDefault();
-          if (event.ctrlKey || event.metaKey) {
-            focusTableEnd();
-          } else {
-            focusDown();
-          }
-          break;
-          
-        case 'ArrowUp':
-          event.preventDefault();
-          if (event.ctrlKey || event.metaKey) {
-            focusTableStart();
-          } else {
-            focusUp();
-          }
-          break;
-          
-        case 'Home':
-          event.preventDefault();
-          if (event.ctrlKey || event.metaKey) {
-            focusTableStart();
-          } else {
-            focusRowStart();
-          }
-          break;
-          
-        case 'End':
-          event.preventDefault();
-          if (event.ctrlKey || event.metaKey) {
-            focusTableEnd();
-          } else {
-            focusRowEnd();
-          }
-          break;
-          
-        case 'Tab':
-          // Let Tab work normally for accessibility
-          break;
-          
-        default:
-          // Don't prevent default for other keys
-          break;
-      }
-    };
+  const focusTableStart = useCallback(() => focusCell(0, 0), [focusCell]);
+  const focusTableEnd = useCallback(
+    () => focusCell(rowCount - 1, columnCount - 1),
+    [rowCount, columnCount, focusCell]
+  );
+
+  const getCellTabIndex = useCallback(
+    (rowIndex: number, columnIndex: number): number =>
+      !enabled ? -1 : (state.focusedRowIndex === rowIndex && state.focusedColumnIndex === columnIndex ? 0 : -1),
+    [enabled, state.focusedRowIndex, state.focusedColumnIndex]
+  );
 
-    const onFocus = (_event: React.FocusEvent) => {
-      setState(prev => ({
-        ...prev,
-        focusedRowIndex: rowIndex,
-        focusedColumnIndex: columnIndex,
-        isNavigating: true,
-      }));
-      
-      onFocusChange?.(rowIndex, columnIndex);
+  useEffect(() => {
+    return () => {
+      // Read ref at cleanup time to clear whatever timeout is current
+      // eslint-disable-next-line react-hooks/exhaustive-deps -- intentional: ref holds timeout ID, not a node
+      const timeoutId = navigationTimeoutRef.current;
+      if (timeoutId) clearTimeout(timeoutId);
     };
+  }, []);
+
+  return {
+    state,
+    setState,
+    storedFocusRef,
+    navigationTimeoutRef,
+    getCellElement,
+    getHeaderElement,
+    focusCell,
+    focusNext,
+    focusPrevious,
+    focusUp,
+    focusDown,
+    focusRowStart,
+    focusRowEnd,
+    focusTableStart,
+    focusTableEnd,
+    getCellTabIndex,
+  };
+}
 
-    const onBlur = (_event: React.FocusEvent) => {
-      // Clear navigation state after a delay to allow for focus transitions
-      if (navigationTimeoutRef.current) {
-        clearTimeout(navigationTimeoutRef.current);
-      }
-      
-      navigationTimeoutRef.current = setTimeout(() => {
-        setState(prev => ({
+/** Builds cell/header keyboard handlers and focus store/restore. Kept under max-lines-per-function. */
+function useKeyboardNavigationHandlers(
+  stateResult: UseKeyboardNavigationStateReturn,
+  params: {
+    rowCount: number;
+    columnCount: number;
+    enabled: boolean;
+    announceNavigation: boolean;
+    supportsColumnReorder: boolean;
+    supportsColumnResize: boolean;
+    onFocusChange?: (rowIndex: number, columnIndex: number) => void;
+  }
+) {
+  const {
+    state,
+    setState,
+    storedFocusRef,
+    navigationTimeoutRef,
+    getHeaderElement,
+    focusCell,
+    focusNext,
+    focusPrevious,
+    focusUp,
+    focusDown,
+    focusRowStart,
+    focusRowEnd,
+    focusTableStart,
+    focusTableEnd,
+  } = stateResult;
+  const {
+    columnCount,
+    enabled,
+    supportsColumnReorder,
+    supportsColumnResize,
+    onFocusChange,
+  } = params;
+
+  const getCellKeyboardHandlers = useCallback(
+    (rowIndex: number, columnIndex: number) => {
+      const onKeyDown = (event: React.KeyboardEvent) => {
+        if (!enabled) return;
+        switch (event.key) {
+          case 'ArrowRight':
+            event.preventDefault();
+            (event.ctrlKey || event.metaKey ? focusRowEnd : focusNext)();
+            break;
+          case 'ArrowLeft':
+            event.preventDefault();
+            (event.ctrlKey || event.metaKey ? focusRowStart : focusPrevious)();
+            break;
+          case 'ArrowDown':
+            event.preventDefault();
+            (event.ctrlKey || event.metaKey ? focusTableEnd : focusDown)();
+            break;
+          case 'ArrowUp':
+            event.preventDefault();
+            (event.ctrlKey || event.metaKey ? focusTableStart : focusUp)();
+            break;
+          case 'Home':
+            event.preventDefault();
+            (event.ctrlKey || event.metaKey ? focusTableStart : focusRowStart)();
+            break;
+          case 'End':
+            event.preventDefault();
+            (event.ctrlKey || event.metaKey ? focusTableEnd : focusRowEnd)();
+            break;
+          case 'Tab':
+            break;
+          default:
+            break;
+        }
+      };
+      const onFocus = (_event: React.FocusEvent) => {
+        setState((prev) => ({
           ...prev,
-          isNavigating: false,
+          focusedRowIndex: rowIndex,
+          focusedColumnIndex: columnIndex,
+          isNavigating: true,
         }));
-      }, 100);
-    };
+        onFocusChange?.(rowIndex, columnIndex);
+      };
+      const onBlur = (_event: React.FocusEvent) => {
+        if (navigationTimeoutRef.current) clearTimeout(navigationTimeoutRef.current);
+        navigationTimeoutRef.current = setTimeout(
+          () => setState((prev) => ({ ...prev, isNavigating: false })),
+          100
+        );
+      };
+      return { onKeyDown, onFocus, onBlur };
+    },
+    [
+      enabled,
+      focusNext,
+      focusPrevious,
+      focusUp,
+      focusDown,
+      focusRowStart,
+      focusRowEnd,
+      focusTableStart,
+      focusTableEnd,
+      onFocusChange,
+      setState,
+      navigationTimeoutRef,
+    ]
+  );
 
-    return { onKeyDown, onFocus, onBlur };
-  }, [enabled, focusNext, focusPrevious, focusUp, focusDown, focusRowStart, focusRowEnd, focusTableStart, focusTableEnd, onFocusChange]);
-
-  // Header keyboard handlers
-  const getHeaderKeyboardHandlers = useCallback((columnIndex: number, onSort?: () => void) => {
-    const onKeyDown = (event: React.KeyboardEvent) => {
-      if (!enabled) return;
-      
-      switch (event.key) {
-        case 'Enter':
-        case ' ':
-          event.preventDefault();
-          onSort?.();
-          break;
-          
-        case 'ArrowRight':
-          event.preventDefault();
-          const nextHeader = getHeaderElement(columnIndex + 1);
-          if (nextHeader) {
-            nextHeader.focus();
-          }
-          break;
-          
-        case 'ArrowLeft':
-          event.preventDefault();
-          const prevHeader = getHeaderElement(columnIndex - 1);
-          if (prevHeader) {
-            prevHeader.focus();
-          }
-          break;
-          
-        case 'Home':
-          event.preventDefault();
-          const firstHeader = getHeaderElement(0);
-          if (firstHeader) {
-            firstHeader.focus();
-          }
-          break;
-          
-        case 'End':
-          event.preventDefault();
-          const lastHeader = getHeaderElement(columnCount - 1);
-          if (lastHeader) {
-            lastHeader.focus();
-          }
-          break;
-          
-        // Disable unsupported keyboard operations
-        case 'r':
-          if (!supportsColumnReorder && (event.ctrlKey || event.metaKey)) {
+  const getHeaderKeyboardHandlers = useCallback(
+    (columnIndex: number, onSort?: () => void) => {
+      const onKeyDown = (event: React.KeyboardEvent) => {
+        if (!enabled) return;
+        switch (event.key) {
+          case 'Enter':
+          case ' ':
             event.preventDefault();
-            announce('Column reordering is not supported');
-          }
-          break;
-          
-        case '=':
-        case '+':
-        case '-':
-          if (!supportsColumnResize && (event.ctrlKey || event.metaKey)) {
+            onSort?.();
+            break;
+          case 'ArrowRight':
             event.preventDefault();
-            announce('Column resizing is not supported');
-          }
-          break;
-      }
-    };
-
-    const onFocus = (_event: React.FocusEvent) => {
-      // Headers don't participate in cell navigation state
-    };
-
-    return { onKeyDown, onFocus };
-  }, [enabled, getHeaderElement, columnCount, supportsColumnReorder, supportsColumnResize]);
+            getHeaderElement(columnIndex + 1)?.focus();
+            break;
+          case 'ArrowLeft':
+            event.preventDefault();
+            getHeaderElement(columnIndex - 1)?.focus();
+            break;
+          case 'Home':
+            event.preventDefault();
+            getHeaderElement(0)?.focus();
+            break;
+          case 'End':
+            event.preventDefault();
+            getHeaderElement(columnCount - 1)?.focus();
+            break;
+          case 'r':
+            if (!supportsColumnReorder && (event.ctrlKey || event.metaKey)) {
+              event.preventDefault();
+              announce('Column reordering is not supported');
+            }
+            break;
+          case '=':
+          case '+':
+          case '-':
+            if (!supportsColumnResize && (event.ctrlKey || event.metaKey)) {
+              event.preventDefault();
+              announce('Column resizing is not supported');
+            }
+            break;
+          default:
+            break;
+        }
+      };
+      const onFocus = (_event: React.FocusEvent) => {};
+      return { onKeyDown, onFocus };
+    },
+    [enabled, getHeaderElement, columnCount, supportsColumnReorder, supportsColumnResize]
+  );
 
-  // Focus management functions
   const resetFocus = useCallback(() => {
     setState({
       focusedRowIndex: 0,
       focusedColumnIndex: 0,
       isNavigating: false,
     });
-  }, []);
+  }, [setState]);
 
   const storeFocus = useCallback(() => {
     storedFocusRef.current = {
       rowIndex: state.focusedRowIndex,
       columnIndex: state.focusedColumnIndex,
     };
-  }, [state.focusedRowIndex, state.focusedColumnIndex]);
+  }, [storedFocusRef, state.focusedRowIndex, state.focusedColumnIndex]);
 
   const restoreFocus = useCallback(() => {
     if (storedFocusRef.current) {
@@ -415,29 +431,9 @@ export function useKeyboardNavigation(
       focusCell(rowIndex, columnIndex);
       storedFocusRef.current = null;
     }
-  }, [focusCell]);
-
-  // Cleanup on unmount
-  useEffect(() => {
-    return () => {
-      if (navigationTimeoutRef.current) {
-        clearTimeout(navigationTimeoutRef.current);
-      }
-    };
-  }, []);
+  }, [focusCell, storedFocusRef]);
 
   return {
-    state,
-    focusCell,
-    focusNext,
-    focusPrevious,
-    focusUp,
-    focusDown,
-    focusRowStart,
-    focusRowEnd,
-    focusTableStart,
-    focusTableEnd,
-    getCellTabIndex,
     getCellKeyboardHandlers,
     getHeaderKeyboardHandlers,
     resetFocus,
@@ -445,3 +441,47 @@ export function useKeyboardNavigation(
     restoreFocus,
   };
 }
+
+/**
+ * Hook for managing keyboard navigation in DataTable
+ */
+export function useKeyboardNavigation(
+  rowCount: number,
+  columnCount: number,
+  options: KeyboardNavigationOptions = {}
+): UseKeyboardNavigationReturn {
+  const stateResult = useKeyboardNavigationState(rowCount, columnCount, {
+    enabled: options.enabled ?? true,
+    announceNavigation: options.announceNavigation ?? true,
+    onFocusChange: options.onFocusChange,
+    tableRef: options.tableRef,
+  });
+  const handlers = useKeyboardNavigationHandlers(stateResult, {
+    rowCount,
+    columnCount,
+    enabled: options.enabled ?? true,
+    announceNavigation: options.announceNavigation ?? true,
+    supportsColumnReorder: options.supportsColumnReorder ?? false,
+    supportsColumnResize: options.supportsColumnResize ?? false,
+    onFocusChange: options.onFocusChange,
+  });
+
+  return {
+    state: stateResult.state,
+    focusCell: stateResult.focusCell,
+    focusNext: stateResult.focusNext,
+    focusPrevious: stateResult.focusPrevious,
+    focusUp: stateResult.focusUp,
+    focusDown: stateResult.focusDown,
+    focusRowStart: stateResult.focusRowStart,
+    focusRowEnd: stateResult.focusRowEnd,
+    focusTableStart: stateResult.focusTableStart,
+    focusTableEnd: stateResult.focusTableEnd,
+    getCellTabIndex: stateResult.getCellTabIndex,
+    getCellKeyboardHandlers: handlers.getCellKeyboardHandlers,
+    getHeaderKeyboardHandlers: handlers.getHeaderKeyboardHandlers,
+    resetFocus: handlers.resetFocus,
+    storeFocus: handlers.storeFocus,
+    restoreFocus: handlers.restoreFocus,
+  };
+}