✨(frontend) add keyboard navigation for subdocs with focus activation

enter/space now trigger only on real focus add useTreeItemKeyboardActivate hook

Signed-off-by: Cyril <[email protected]>

Author: Ovgodd

src/frontend/apps/impress/src/components/dropdown-menu/hook/useActionableMode.ts

@@ -0,0 +1,97 @@
+import { TreeDataItem } from '@gouvfr-lasuite/ui-kit';
+import { useEffect, useRef } from 'react';
+import type { NodeRendererProps } from 'react-arborist';
+
+type FocusableNode<T> = NodeRendererProps<TreeDataItem<T>>['node'] & {
+  isFocused?: boolean;
+  focus?: () => void;
+};
+
+/**
+ * Hook to manage keyboard navigation for actionable items in a tree view.
+ *
+ * Provides two modes:
+ * 1. Activation: F2/Enter moves focus to first actionable element
+ * 2. Navigation: Arrow keys navigate between actions, Escape returns to tree node
+ *
+ * Disables navigation when dropdown menu is open to prevent conflicts.
+ */
+export const useActionableMode = <T>(
+  node: FocusableNode<T>,
+  isMenuOpen?: boolean,
+) => {
+  const actionsRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!node?.isFocused) {
+      return;
+    }
+
+    const toActions = (e: KeyboardEvent) => {
+      if (e.key === 'F2' || e.key === 'Enter') {
+        const isAlreadyInActions = actionsRef.current?.contains(
+          document.activeElement,
+        );
+
+        if (isAlreadyInActions) {
+          return;
+        }
+
+        e.preventDefault();
+
+        const focusables = actionsRef.current?.querySelectorAll<HTMLElement>(
+          'button, [role="button"], a[href], input, [tabindex]:not([tabindex="-1"])',
+        );
+
+        const first = focusables?.[0];
+
+        first?.focus();
+      }
+    };
+
+    document.addEventListener('keydown', toActions, true);
+
+    return () => {
+      document.removeEventListener('keydown', toActions, true);
+    };
+  }, [node?.isFocused]);
+
+  const onKeyDownCapture = (e: React.KeyboardEvent) => {
+    if (isMenuOpen) {
+      return;
+    }
+
+    if (e.key === 'Escape') {
+      e.stopPropagation();
+      node?.focus?.();
+    }
+
+    if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+      e.preventDefault();
+      e.stopPropagation();
+
+      const focusables = actionsRef.current?.querySelectorAll<HTMLElement>(
+        'button, [role="button"], a[href], input, [tabindex]:not([tabindex="-1"])',
+      );
+
+      if (!focusables || focusables.length === 0) {
+        return;
+      }
+
+      const currentIndex = Array.from(focusables).findIndex(
+        (el) => el === document.activeElement,
+      );
+
+      let nextIndex: number;
+      if (e.key === 'ArrowLeft') {
+        nextIndex = currentIndex > 0 ? currentIndex - 1 : focusables.length - 1;
+      } else {
+        nextIndex = currentIndex < focusables.length - 1 ? currentIndex + 1 : 0;
+      }
+
+      focusables[nextIndex]?.focus();
+    }
+  };
+
+  return { actionsRef, onKeyDownCapture };
+};

src/frontend/apps/impress/src/components/dropdown-menu/hook/useDocTreeItemHandlers.ts

@@ -0,0 +1,74 @@
+import { useCallback } from 'react';
+
+interface UseDocTreeItemHandlersProps {
+  isOpen?: boolean;
+  onOpenChange?: (isOpen: boolean) => void;
+  createChildDoc: (params: { parentId: string }) => void;
+  docId: string;
+}
+
+export const useDocTreeItemHandlers = ({
+  isOpen,
+  onOpenChange,
+  createChildDoc,
+  docId,
+}: UseDocTreeItemHandlersProps) => {
+  const preventDefaultAndStopPropagation = useCallback(
+    (e: React.MouseEvent | React.KeyboardEvent) => {
+      e.stopPropagation();
+      e.preventDefault();
+    },
+    [],
+  );
+
+  const isValidKeyEvent = useCallback((e: React.KeyboardEvent) => {
+    return e.key === 'Enter' || e.key === ' ';
+  }, []);
+
+  const handleMoreOptionsClick = useCallback(
+    (e: React.MouseEvent) => {
+      preventDefaultAndStopPropagation(e);
+      onOpenChange?.(!isOpen);
+    },
+    [isOpen, onOpenChange, preventDefaultAndStopPropagation],
+  );
+
+  const handleMoreOptionsKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (isValidKeyEvent(e)) {
+        preventDefaultAndStopPropagation(e);
+        onOpenChange?.(!isOpen);
+      }
+    },
+    [isOpen, onOpenChange, preventDefaultAndStopPropagation, isValidKeyEvent],
+  );
+
+  const handleAddChildClick = useCallback(
+    (e: React.MouseEvent) => {
+      preventDefaultAndStopPropagation(e);
+      void createChildDoc({
+        parentId: docId,
+      });
+    },
+    [createChildDoc, docId, preventDefaultAndStopPropagation],
+  );
+
+  const handleAddChildKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (isValidKeyEvent(e)) {
+        preventDefaultAndStopPropagation(e);
+        void createChildDoc({
+          parentId: docId,
+        });
+      }
+    },
+    [createChildDoc, docId, preventDefaultAndStopPropagation, isValidKeyEvent],
+  );
+
+  return {
+    handleMoreOptionsClick,
+    handleMoreOptionsKeyDown,
+    handleAddChildClick,
+    handleAddChildKeyDown,
+  };
+};

src/frontend/apps/impress/src/components/dropdown-menu/hook/useDropdownFocusManagement.ts

@@ -0,0 +1,92 @@
+import { useEffect } from 'react';
+
+interface UseDropdownFocusManagementProps {
+  isOpen: boolean;
+  docId: string;
+  actionsRef?: React.RefObject<HTMLDivElement>;
+}
+
+export const useDropdownFocusManagement = ({
+  isOpen,
+  docId,
+  actionsRef,
+}: UseDropdownFocusManagementProps) => {
+  // Focus management for dropdown menu opening
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    const timer = setTimeout(() => {
+      // Try to find menu in actions container first
+      const menuElement = actionsRef?.current
+        ?.closest('.--docs--doc-tree-item-actions')
+        ?.querySelector('[role="menu"]');
+
+      if (menuElement) {
+        const firstMenuItem = menuElement.querySelector<HTMLElement>(
+          '[role="menuitem"], button, [tabindex]:not([tabindex="-1"])',
+        );
+        if (firstMenuItem) {
+          firstMenuItem.focus();
+          return;
+        }
+      }
+
+      // Fallback: find any menu in document
+      const allMenus = document.querySelectorAll('[role="menu"]');
+      const lastMenu = allMenus[allMenus.length - 1];
+      if (lastMenu) {
+        const firstMenuItem = lastMenu.querySelector<HTMLElement>(
+          '[role="menuitem"], button, [tabindex]:not([tabindex="-1"])',
+        );
+        if (firstMenuItem) {
+          firstMenuItem.focus();
+        }
+      }
+    }, 100);
+
+    return () => clearTimeout(timer);
+  }, [isOpen, actionsRef]);
+
+  // Focus management for returning to sub-document when menu closes
+  useEffect(() => {
+    if (isOpen) {
+      return;
+    }
+
+    const timer = setTimeout(() => {
+      // Try to find sub-document by closest ancestor
+      let subPageItem = actionsRef?.current?.closest('.--docs-sub-page-item');
+
+      // If not found, try to find by data-testid
+      if (!subPageItem) {
+        const testIdElement = document.querySelector(
+          `[data-testid="doc-sub-page-item-${docId}"]`,
+        );
+        subPageItem =
+          testIdElement?.closest('.--docs-sub-page-item') ||
+          testIdElement?.parentElement?.closest('.--docs-sub-page-item');
+      }
+
+      // Focus the sub-document if found
+      if (subPageItem) {
+        const focusableElement = subPageItem.querySelector<HTMLElement>(
+          '[data-testid^="doc-sub-page-item-"]',
+        );
+
+        if (focusableElement) {
+          focusableElement.focus();
+        } else {
+          (subPageItem as HTMLElement).focus();
+        }
+        return;
+      }
+
+      // Fallback: focus actions container
+      actionsRef?.current?.focus();
+    }, 100);
+
+    return () => clearTimeout(timer);
+  }, [isOpen, actionsRef, docId]);
+};

src/frontend/apps/impress/src/components/dropdown-menu/hook/useTreeItemKeyboardActivate.tsx

@@ -0,0 +1,26 @@
+import { useEffect } from 'react';
+
+/**
+ * While the node has keyboard focus, run `activate()` on Enter / Space.
+ * Gives tree-items the same "open on Enter" behaviour that clicks already have.
+ */
+export const useTreeItemKeyboardActivate = (
+  focused: boolean,
+  activate: () => void,
+) => {
+  useEffect(() => {
+    if (!focused) {
+      return;
+    }
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        activate();
+      }
+    };
+
+    document.addEventListener('keydown', onKeyDown, true);
+    return () => document.removeEventListener('keydown', onKeyDown, true);
+  }, [focused, activate]);
+};