adds f2 shortcut using a fakenode since it's outside the treeview structure

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

Author: Ovgodd

CHANGELOG.md

@@ -6,6 +6,11 @@ and this project adheres to
 
 ## [Unreleased]
 
+### Fixed
+
+- ♿(frontend) improve accessibility:
+  - ♿️Improve keyboard accessibility for the document tree #1681
+
 ## [4.0.0] - 2025-12-01
 
 ### Added

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

@@ -204,7 +204,6 @@ export const DocSubPageItem = (props: TreeViewNodeProps<Doc>) => {
           $css={css`
             text-align: left;
             min-width: 0;
-            order: 1;
           `}
         >
           <Box

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

@@ -6,7 +6,7 @@ import {
   useTreeContext,
 } from '@gouvfr-lasuite/ui-kit';
 import { useRouter } from 'next/navigation';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
 
@@ -16,6 +16,8 @@ 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';
@@ -32,12 +34,29 @@ 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 { 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,
   );
@@ -85,12 +104,23 @@ export const DocTree = ({ currentDoc }: DocTreeProps) => {
   }, [router, treeContext?.root?.id]);
 
   const handleRootFocus = useCallback(() => {
+    setRootItemFocused(true);
     selectRoot();
   }, [selectRoot]);
 
-  // activate root document with enter or space
+  const handleRootBlur = useCallback(() => {
+    setRootItemFocused(false);
+  }, []);
+
+  // activate root document with enter or space (only when not in actions)
   const handleRootKeyDown = useCallback(
     (e: React.KeyboardEvent) => {
+      // Ignore if focus is in actions
+      const target = e.target as HTMLElement | null;
+      if (target?.closest('.doc-tree-root-item-actions')) {
+        return;
+      }
+
       if (e.key === 'Enter' || e.key === ' ') {
         e.preventDefault();
         selectRoot();
@@ -206,12 +236,14 @@ export const DocTree = ({ currentDoc }: DocTreeProps) => {
         `}
       >
         <Box
+          ref={rootItemRef}
           data-testid="doc-tree-root-item"
           role="treeitem"
           aria-label={`${t('Root document {{title}}', { title: treeContext.root?.title || t('Untitled document') })}`}
           aria-selected={rootIsSelected}
           tabIndex={0}
           onFocus={handleRootFocus}
+          onBlur={handleRootBlur}
           onKeyDown={handleRootKeyDown}
           $css={css`
             padding: ${spacingsTokens['2xs']};
@@ -234,20 +266,25 @@ export const DocTree = ({ currentDoc }: DocTreeProps) => {
             }
 
             .doc-tree-root-item-actions {
-              display: ${rootActionsOpen ? 'flex' : 'none'};
+              display: flex;
               opacity: ${rootActionsOpen ? '1' : '0'};
 
               &:has(.isOpen) {
                 opacity: 1;
               }
             }
             &:hover,
-            &:focus-visible {
+            &:focus-visible,
+            &:focus-within {
               .doc-tree-root-item-actions {
                 display: flex;
                 opacity: 1;
               }
             }
+            /* Retirer le focus visuel du root item quand le focus est sur les actions */
+            &:has(.doc-tree-root-item-actions *:focus) {
+              box-shadow: none !important;
+            }
           `}
         >
           <StyledLink
@@ -282,6 +319,8 @@ export const DocTree = ({ currentDoc }: DocTreeProps) => {
                 isOpen={rootActionsOpen}
                 isRoot={true}
                 onOpenChange={setRootActionsOpen}
+                actionsRef={rootActionsRef}
+                onKeyDownCapture={onRootToolbarKeys}
               />
             </Box>
           </StyledLink>

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

@@ -195,6 +195,7 @@ export const DocTreeItemActions = ({
               onOpenChange?.(!isOpen);
             }}
             aria-label={t('More options')}
+            tabIndex={-1}
             $css={css`
               background: transparent;
               border: none;
@@ -233,6 +234,7 @@ export const DocTreeItemActions = ({
             $variation="secondary"
             aria-label={t('Add a sub page')}
             data-testid="doc-tree-item-actions-add-child"
+            tabIndex={-1}
             $css={css`
               &:focus-visible {
                 outline: 2px solid var(--c--globals--colors--brand-500) !important;