fixup! adds f2 shortcut using a fakenode since it's outside the treeview struct

Author: Ovgodd

src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx

@@ -5,7 +5,7 @@ import {
   useTreeContext,
 } from '@gouvfr-lasuite/ui-kit';
 import { useRouter } from 'next/navigation';
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
 
@@ -20,9 +20,6 @@ import {
 import { useLeftPanelStore } from '@/features/left-panel';
 import { useResponsiveStore } from '@/stores';
 
-import { useActionableMode } from '../hooks/useActionableMode';
-import { useKeyboardActivation } from '../hooks/useKeyboardActivation';
-
 import SubPageIcon from './../assets/sub-page-logo.svg';
 import { DocTreeItemActions } from './DocTreeItemActions';
 
@@ -47,7 +44,6 @@ export const DocSubPageItem = (props: TreeViewNodeProps<Doc>) => {
 
   const [menuOpen, setMenuOpen] = useState(false);
   const isSelectedNow = treeContext?.treeData.selectedNode?.id === doc.id;
-  const isActive = node.isFocused || menuOpen || isSelectedNow;
 
   const router = useRouter();
   const { togglePanel } = useLeftPanelStore();
@@ -93,21 +89,24 @@ export const DocSubPageItem = (props: TreeViewNodeProps<Doc>) => {
     }
   };
 
-  useKeyboardActivation(
-    ['Enter'],
-    isActive && !menuOpen,
-    handleActivate,
-    true,
-    '.c__tree-view',
-  );
-
   const docTitle = doc.title || untitledDocument;
   const hasChildren = (doc.children?.length || 0) > 0;
   const isExpanded = node.isOpen;
   const isSelected = isSelectedNow;
   const ariaLabel = docTitle;
   const isDisabled = !!doc.deleted_at;
-  const { actionsRef, onKeyDownCapture } = useActionableMode(node, menuOpen);
+  const actionsRef = useRef<HTMLDivElement>(null);
+  const buttonOptionRef = useRef<HTMLButtonElement | null>(null);
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    // F2: focus first action button
+    const shoulOpenActions = !menuOpen && node.isFocused;
+    if (e.key === 'F2' && shoulOpenActions) {
+      buttonOptionRef.current?.focus();
+      e.stopPropagation();
+      return;
+    }
+  };
 
   return (
     <Box
@@ -119,7 +118,7 @@ export const DocSubPageItem = (props: TreeViewNodeProps<Doc>) => {
       aria-selected={isSelected}
       aria-expanded={hasChildren ? isExpanded : undefined}
       aria-disabled={isDisabled}
-      onKeyDownCapture={onKeyDownCapture}
+      onKeyDown={handleKeyDown}
       $css={css`
         background-color: var(--c--globals--colors--gray-000);
         .light-doc-item-actions {
@@ -186,7 +185,7 @@ export const DocSubPageItem = (props: TreeViewNodeProps<Doc>) => {
             parentId={node.data.parentKey}
             onCreateSuccess={afterCreate}
             actionsRef={actionsRef}
-            onKeyDownCapture={onKeyDownCapture}
+            buttonOptionRef={buttonOptionRef}
           />
         </Box>
         <BoxButton

src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTree.tsx

@@ -16,8 +16,6 @@ import { Doc, SimpleDocItem } from '@/docs/doc-management';
 
 import { KEY_DOC_TREE, useDocTree } from '../api/useDocTree';
 import { useMoveDoc } from '../api/useMove';
-import { useActionableMode } from '../hooks/useActionableMode';
-import type { ActionableNodeLike } from '../hooks/useActionableMode';
 import { findIndexInTree } from '../utils';
 
 import { DocSubPageItem } from './DocSubPageItem';
@@ -34,29 +32,15 @@ export const DocTree = ({ currentDoc }: DocTreeProps) => {
   const treeContext = useTreeContext<Doc | null>();
   const router = useRouter();
   const [rootActionsOpen, setRootActionsOpen] = useState(false);
-  const [rootItemFocused, setRootItemFocused] = useState(false);
   const rootIsSelected =
     !!treeContext?.root?.id &&
     treeContext?.treeData.selectedNode?.id === treeContext.root.id;
   const rootItemRef = useRef<HTMLDivElement>(null);
+  const rootActionsRef = useRef<HTMLDivElement>(null);
+  const rootButtonOptionRef = useRef<HTMLButtonElement | null>(null);
 
   const { t } = useTranslation();
 
-  /**
-   * Fake node to reuse useActionableMode hook for the root item.
-   * This allows F2 keyboard navigation and Escape handling on the root item
-   * without duplicating the logic from DocSubPageItem.
-   */
-  const fakeRootNode: ActionableNodeLike = {
-    isFocused: rootItemFocused,
-    focus: () => {
-      rootItemRef.current?.focus();
-    },
-  };
-
-  const { actionsRef: rootActionsRef, onKeyDownCapture: onRootToolbarKeys } =
-    useActionableMode(fakeRootNode, rootActionsOpen);
-
   const [initialOpenState, setInitialOpenState] = useState<OpenMap | undefined>(
     undefined,
   );
@@ -104,17 +88,19 @@ export const DocTree = ({ currentDoc }: DocTreeProps) => {
   }, [router, treeContext?.root?.id]);
 
   const handleRootFocus = useCallback(() => {
-    setRootItemFocused(true);
     selectRoot();
   }, [selectRoot]);
 
-  const handleRootBlur = useCallback(() => {
-    setRootItemFocused(false);
-  }, []);
-
-  // activate root document with enter or space (only when not in actions)
+  // Handle keyboard navigation for root item
   const handleRootKeyDown = useCallback(
     (e: React.KeyboardEvent) => {
+      // F2: focus first action button
+      if (e.key === 'F2' && !rootActionsOpen) {
+        e.preventDefault();
+        rootButtonOptionRef.current?.focus();
+        return;
+      }
+
       // Ignore if focus is in actions
       const target = e.target as HTMLElement | null;
       if (target?.closest('.doc-tree-root-item-actions')) {
@@ -127,7 +113,7 @@ export const DocTree = ({ currentDoc }: DocTreeProps) => {
         navigateToRoot();
       }
     },
-    [selectRoot, navigateToRoot],
+    [selectRoot, navigateToRoot, rootActionsOpen],
   );
 
   /**
@@ -250,7 +236,6 @@ export const DocTree = ({ currentDoc }: DocTreeProps) => {
           aria-selected={rootIsSelected}
           tabIndex={0}
           onFocus={handleRootFocus}
-          onBlur={handleRootBlur}
           onKeyDown={handleRootKeyDown}
           $css={css`
             padding: ${spacingsTokens['2xs']};
@@ -327,7 +312,7 @@ export const DocTree = ({ currentDoc }: DocTreeProps) => {
                 isRoot={true}
                 onOpenChange={setRootActionsOpen}
                 actionsRef={rootActionsRef}
-                onKeyDownCapture={onRootToolbarKeys}
+                buttonOptionRef={rootButtonOptionRef}
               />
             </Box>
           </StyledLink>

src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTreeItemActions.tsx

@@ -33,7 +33,7 @@ type DocTreeItemActionsProps = {
   onOpenChange?: (isOpen: boolean) => void;
   parentId?: string | null;
   actionsRef?: React.RefObject<HTMLDivElement | null>;
-  onKeyDownCapture?: (e: React.KeyboardEvent) => void;
+  buttonOptionRef?: React.RefObject<HTMLButtonElement | null>;
 };
 
 export const DocTreeItemActions = ({
@@ -44,10 +44,12 @@ export const DocTreeItemActions = ({
   onOpenChange,
   parentId,
   actionsRef,
-  onKeyDownCapture,
+  buttonOptionRef,
 }: DocTreeItemActionsProps) => {
   const internalActionsRef = useRef<HTMLDivElement | null>(null);
   const targetActionsRef = actionsRef ?? internalActionsRef;
+  const internalButtonRef = useRef<HTMLButtonElement | null>(null);
+  const targetButtonRef = buttonOptionRef ?? internalButtonRef;
   const router = useRouter();
   const { t } = useTranslation();
   const deleteModal = useModal();
@@ -174,7 +176,6 @@ export const DocTreeItemActions = ({
     <Box className="doc-tree-root-item-actions actions">
       <Box
         ref={targetActionsRef}
-        onKeyDownCapture={onKeyDownCapture}
         $direction="row"
         $align="center"
         className="--docs--doc-tree-item-actions"
@@ -188,6 +189,7 @@ export const DocTreeItemActions = ({
         >
           <Box
             as="button"
+            ref={targetButtonRef}
             type="button"
             onClick={(e) => {
               e.stopPropagation();