fixup! ✨(frontend) make components accessible to screen readers

Author: Ovgodd

src/frontend/apps/impress/src/features/docs/doc-management/components/SimpleDocItem.tsx

@@ -1,4 +1,5 @@
 import { DateTime } from 'luxon';
+import { useRouter } from 'next/navigation';
 import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
 
@@ -26,17 +27,28 @@ type SimpleDocItemProps = {
   doc: Doc;
   isPinned?: boolean;
   showAccesses?: boolean;
+  onActivate?: () => void;
 };
 
 export const SimpleDocItem = ({
   doc,
   isPinned = false,
   showAccesses = false,
+  onActivate,
 }: SimpleDocItemProps) => {
   const { t } = useTranslation();
   const { spacingsTokens, colorsTokens } = useCunninghamTheme();
   const { isDesktop } = useResponsiveStore();
   const { untitledDocument } = useTrans();
+  const router = useRouter();
+
+  const handleActivate = () => {
+    if (onActivate) {
+      onActivate();
+    } else {
+      router.push(`/docs/${doc.id}`);
+    }
+  };
 
   const { emoji, titleWithoutEmoji: displayTitle } = getEmojiAndTitle(
     doc.title || untitledDocument,
@@ -50,6 +62,8 @@ export const SimpleDocItem = ({
       $width="100%"
       className="--docs--simple-doc-item"
       role="presentation"
+      onClick={handleActivate}
+      aria-label={`${t('Open document')} ${doc.title || untitledDocument}`}
     >
       <Box
         $direction="row"
@@ -90,7 +104,6 @@ export const SimpleDocItem = ({
           $variation="1000"
           $weight="500"
           $css={ItemTextCss}
-          aria-describedby="doc-title"
         >
           {displayTitle}
         </Text>

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

@@ -110,7 +110,7 @@ export const DocSubPageItem = (props: TreeViewNodeProps<Doc>) => {
   const isExpanded = node.isOpen;
   const isSelected = isSelectedNow;
 
-  const ariaLabel = `${docTitle}${hasChildren ? `, ${isExpanded ? t('expanded') : t('collapsed')}` : ''}${isSelected ? `, ${t('selected')}` : ''}`;
+  const ariaLabel = docTitle;
 
   return (
     <Box
@@ -216,7 +216,7 @@ export const DocSubPageItem = (props: TreeViewNodeProps<Doc>) => {
         $direction="row"
         $align="center"
         className="light-doc-item-actions"
-        role="group"
+        role="toolbar"
         aria-label={`${t('Actions for')} ${docTitle}`}
       >
         <DocTreeItemActions

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

@@ -5,7 +5,6 @@ import {
   useResponsive,
   useTreeContext,
 } from '@gouvfr-lasuite/ui-kit';
-import { useRouter } from 'next/navigation';
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
@@ -16,6 +15,7 @@ import { Doc, SimpleDocItem } from '@/docs/doc-management';
 
 import { KEY_DOC_TREE, useDocTree } from '../api/useDocTree';
 import { useMoveDoc } from '../api/useMove';
+import { useRootTreeItem } from '../hooks/useRootTreeItem';
 import { findIndexInTree } from '../utils';
 
 import { DocSubPageItem } from './DocSubPageItem';
@@ -27,9 +27,7 @@ type DocTreeProps = {
 
 export const DocTree = ({ currentDoc }: DocTreeProps) => {
   const { spacingsTokens } = useCunninghamTheme();
-  const [rootActionsOpen, setRootActionsOpen] = useState(false);
   const treeContext = useTreeContext<Doc | null>();
-  const router = useRouter();
   const { isDesktop } = useResponsive();
   const [treeRoot, setTreeRoot] = useState<HTMLElement | null>(null);
   const { t } = useTranslation();
@@ -39,11 +37,20 @@ export const DocTree = ({ currentDoc }: DocTreeProps) => {
   );
 
   const { mutate: moveDoc } = useMoveDoc();
-
+  const {
+    rootIsSelected,
+    rootActionsOpen,
+    setRootActionsOpen,
+    rootActionsRef,
+    onRootToolbarKeys,
+    handleRootFocus,
+    handleRootKeyDown,
+    handleRootClick,
+    handleRootActivate,
+    handleCreateSuccess,
+  } = useRootTreeItem();
   const { data: tree, isFetching } = useDocTree(
-    {
-      docId: currentDoc.id,
-    },
+    { docId: currentDoc.id },
     {
       enabled: !!!treeContext?.root?.id,
       queryKey: [KEY_DOC_TREE, { id: currentDoc.id }],
@@ -58,15 +65,13 @@ export const DocTree = ({ currentDoc }: DocTreeProps) => {
     });
     treeContext?.treeData.handleMove(result);
   };
-
   /**
    * This function resets the tree states.
    */
   const resetStateTree = useCallback(() => {
     if (!treeContext?.root?.id) {
       return;
     }
-
     treeContext?.setRoot(null);
     setInitialOpenState(undefined);
   }, [treeContext]);
@@ -79,7 +84,6 @@ export const DocTree = ({ currentDoc }: DocTreeProps) => {
     if (!treeContext?.root?.id) {
       return;
     }
-
     const index = findIndexInTree(treeContext.treeData.nodes, currentDoc.id);
     if (index === -1 && currentDoc.id !== treeContext.root?.id) {
       resetStateTree();
@@ -94,7 +98,6 @@ export const DocTree = ({ currentDoc }: DocTreeProps) => {
     return () => {
       resetStateTree();
     };
-
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -142,13 +145,13 @@ export const DocTree = ({ currentDoc }: DocTreeProps) => {
     }
   }, [currentDoc, treeContext]);
 
+  /**
+   * This is the main return of the component.
+   */
   if (!treeContext || !treeContext.root) {
     return null;
   }
 
-  const rootIsSelected =
-    treeContext.treeData.selectedNode?.id === treeContext.root.id;
-
   return (
     <Box
       ref={setTreeRoot}
@@ -178,6 +181,9 @@ export const DocTree = ({ currentDoc }: DocTreeProps) => {
           role="treeitem"
           aria-label={`${t('Root document')}: ${treeContext.root?.title || t('Untitled document')}`}
           aria-selected={rootIsSelected}
+          tabIndex={0}
+          onFocus={handleRootFocus}
+          onKeyDown={handleRootKeyDown}
           $css={css`
             padding: ${spacingsTokens['2xs']};
             border-radius: 4px;
@@ -211,32 +217,24 @@ export const DocTree = ({ currentDoc }: DocTreeProps) => {
               width: 100%;
             `}
             href={`/docs/${treeContext.root.id}`}
-            onClick={(e) => {
-              e.stopPropagation();
-              e.preventDefault();
-              treeContext.treeData.setSelectedNode(
-                treeContext.root ?? undefined,
-              );
-              router.push(`/docs/${treeContext?.root?.id}`);
-            }}
+            onClick={handleRootClick}
             aria-label={`${t('Open root document')}: ${treeContext.root?.title || t('Untitled document')}`}
+            tabIndex={-1} // évite le double tabstop
           >
             <Box $direction="row" $align="center" $width="100%">
-              <SimpleDocItem doc={treeContext.root} showAccesses={true} />
+              <SimpleDocItem
+                doc={treeContext.root}
+                showAccesses={true}
+                onActivate={handleRootActivate}
+              />
               <DocTreeItemActions
                 doc={treeContext.root}
-                onCreateSuccess={(createdDoc) => {
-                  const newDoc = {
-                    ...createdDoc,
-                    children: [],
-                    childrenCount: 0,
-                    parentId: treeContext.root?.id ?? undefined,
-                  };
-                  treeContext?.treeData.addChild(null, newDoc);
-                }}
+                onCreateSuccess={handleCreateSuccess}
                 isOpen={rootActionsOpen}
                 isRoot={true}
                 onOpenChange={setRootActionsOpen}
+                actionsRef={rootActionsRef}
+                onKeyDownCapture={onRootToolbarKeys}
               />
             </Box>
           </StyledLink>

src/frontend/apps/impress/src/features/docs/doc-tree/hooks/useActionableMode.ts

@@ -1,10 +1,8 @@
-import { TreeDataItem } from '@gouvfr-lasuite/ui-kit';
 import { useEffect, useRef } from 'react';
-import type { NodeRendererProps } from 'react-arborist';
 
 import { SELECTORS } from '../dom-selectors';
 
-type FocusableNode<T> = NodeRendererProps<TreeDataItem<T>>['node'] & {
+export type ActionableNodeLike = {
   isFocused?: boolean;
   focus?: () => void;
 };
@@ -14,8 +12,8 @@ type FocusableNode<T> = NodeRendererProps<TreeDataItem<T>>['node'] & {
  *
  * Disables navigation when dropdown menu is open to prevent conflicts.
  */
-export const useActionableMode = <T>(
-  node: FocusableNode<T>,
+export const useActionableMode = (
+  node: ActionableNodeLike,
   isMenuOpen?: boolean,
 ) => {
   const actionsRef = useRef<HTMLDivElement>(null);
@@ -32,7 +30,7 @@ export const useActionableMode = <T>(
         return;
       }
 
-      if (e.key === 'F2' || e.key === 'Enter') {
+      if (e.key === 'F2') {
         const isAlreadyInActions = actionsRef.current?.contains(
           document.activeElement,
         );

src/frontend/apps/impress/src/features/docs/doc-tree/hooks/useRootTreeItem.ts

@@ -0,0 +1,105 @@
+// useRootTreeItem.ts
+import { useTreeContext } from '@gouvfr-lasuite/ui-kit';
+import { useRouter } from 'next/navigation';
+import { RefObject, useCallback, useState } from 'react';
+
+import type { Doc } from '@/docs/doc-management';
+
+import { useActionableMode } from '../hooks/useActionableMode';
+import type { ActionableNodeLike } from '../hooks/useActionableMode';
+
+export function useRootTreeItem() {
+  const treeContext = useTreeContext<Doc | null>();
+  const router = useRouter();
+  const [rootActionsOpen, setRootActionsOpen] = useState(false);
+
+  const rootIsSelected =
+    !!treeContext?.root?.id &&
+    treeContext?.treeData.selectedNode?.id === treeContext.root.id;
+
+  /**
+   * This is a fake node used to reuse the useActionableMode hook on the root.
+   */
+  const fakeRootNode: ActionableNodeLike = {
+    isFocused: rootIsSelected,
+    focus: () => {
+      const root = treeContext?.root;
+      if (root) {
+        treeContext?.treeData.setSelectedNode(root);
+      }
+    },
+  };
+
+  const { actionsRef: rootActionsRef, onKeyDownCapture: onRootToolbarKeys } =
+    useActionableMode(fakeRootNode, rootActionsOpen);
+
+  const selectRoot = useCallback(() => {
+    if (treeContext?.root) {
+      treeContext.treeData.setSelectedNode(treeContext.root);
+    }
+  }, [treeContext]);
+
+  const navigateToRoot = useCallback(() => {
+    const id = treeContext?.root?.id;
+    if (id) {
+      router.push(`/docs/${id}`);
+    }
+  }, [router, treeContext?.root?.id]);
+
+  const handleRootFocus = useCallback(() => {
+    selectRoot();
+  }, [selectRoot]);
+
+  const handleRootKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        selectRoot();
+        navigateToRoot();
+      }
+    },
+    [selectRoot, navigateToRoot],
+  );
+
+  const handleRootClick = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      e.preventDefault();
+      selectRoot();
+      navigateToRoot();
+    },
+    [selectRoot, navigateToRoot],
+  );
+
+  const handleRootActivate = useCallback(() => {
+    selectRoot();
+    navigateToRoot();
+  }, [selectRoot, navigateToRoot]);
+
+  const handleCreateSuccess = useCallback(
+    (createdDoc: Doc) => {
+      const newDoc = {
+        ...createdDoc,
+        children: [],
+        childrenCount: 0,
+        parentId: treeContext?.root?.id ?? undefined,
+      };
+      treeContext?.treeData.addChild(null, newDoc);
+    },
+    [treeContext],
+  );
+
+  return {
+    rootIsSelected,
+    rootActionsOpen,
+    setRootActionsOpen,
+    rootActionsRef: rootActionsRef as RefObject<HTMLDivElement>,
+    onRootToolbarKeys,
+
+    handleRootFocus,
+    handleRootKeyDown,
+    handleRootClick,
+    handleRootActivate,
+    handleCreateSuccess,
+  };
+}