✨(frontend) enable enter key to open documents and subdocuments

added keyboard support to open docs and subdocs using the enter key

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

Author: Ovgodd

CHANGELOG.md

@@ -23,6 +23,7 @@ and this project adheres to
 - ⬆️ Bump eslint to V9 #1071
 - ♿(frontend) improve accessibility:
   - ♿(frontend) fix major accessibility issues reported by wave and axe #1344
+  - #1354
   - #1341
 - ♻️(tilt) use helm dev-backend chart
 

src/frontend/apps/e2e/__tests__/app-impress/doc-tree.spec.ts

@@ -252,6 +252,46 @@ test.describe('Doc Tree', () => {
       page.getByRole('menuitem', { name: 'Move to my docs' }),
     ).toHaveAttribute('aria-disabled', 'true');
   });
+
+  test('keyboard navigation with Enter key opens documents', async ({
+    page,
+    browserName,
+  }) => {
+    // Create a parent document
+    const [docParent] = await createDoc(
+      page,
+      'doc-tree-keyboard-nav',
+      browserName,
+      1,
+    );
+    await verifyDocName(page, docParent);
+
+    // Create a sub-document
+    const { name: docChild } = await createRootSubPage(
+      page,
+      browserName,
+      'doc-tree-keyboard-child',
+    );
+
+    const docTree = page.getByTestId('doc-tree');
+    await expect(docTree).toBeVisible();
+
+    // Test keyboard navigation on root document
+    const rootItem = page.getByTestId('doc-tree-root-item');
+    await expect(rootItem).toBeVisible();
+
+    // Focus on the root item and press Enter
+    await rootItem.focus();
+    await expect(rootItem).toBeFocused();
+    await page.keyboard.press('Enter');
+
+    // Verify we navigated to the root document
+    await verifyDocName(page, docParent);
+    await expect(page).toHaveURL(/\/docs\/[^/]+\/?$/);
+
+    // Now test keyboard navigation on sub-document
+    await expect(docTree.getByText(docChild)).toBeVisible();
+  });
 });
 
 test.describe('Doc Tree: Inheritance', () => {

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

@@ -26,6 +26,7 @@ type SimpleDocItemProps = {
   doc: Doc;
   isPinned?: boolean;
   showAccesses?: boolean;
+  onActivate?: () => void;
 };
 
 export const SimpleDocItem = ({
@@ -49,6 +50,8 @@ export const SimpleDocItem = ({
       $overflow="auto"
       $width="100%"
       className="--docs--simple-doc-item"
+      role="presentation"
+      aria-label={`${t('Open document')} ${doc.title || untitledDocument}`}
     >
       <Box
         $direction="row"
@@ -59,6 +62,7 @@ export const SimpleDocItem = ({
         `}
         $padding={`${spacingsTokens['3xs']} 0`}
         data-testid={isPinned ? `doc-pinned-${doc.id}` : undefined}
+        aria-hidden="true"
       >
         {isPinned ? (
           <PinnedDocumentIcon
@@ -96,6 +100,7 @@ export const SimpleDocItem = ({
             $align="center"
             $gap={spacingsTokens['3xs']}
             $margin={{ top: '-2px' }}
+            aria-hidden="true"
           >
             <Text $variation="600" $size="xs">
               {DateTime.fromISO(doc.updated_at).toRelative()}

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

@@ -5,9 +5,10 @@ import {
 } from '@gouvfr-lasuite/ui-kit';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
 
-import { Box, Icon, Text } from '@/components';
+import { Box, BoxButton, Icon, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
 import {
   Doc,
@@ -20,6 +21,7 @@ import { useResponsiveStore } from '@/stores';
 
 import SubPageIcon from './../assets/sub-page-logo.svg';
 import { DocTreeItemActions } from './DocTreeItemActions';
+import { useKeyboardActivation } from './hooks/useKeyboardActivation';
 
 const ItemTextCss = css`
   overflow: hidden;
@@ -38,14 +40,23 @@ export const DocSubPageItem = (props: TreeViewNodeProps<Doc>) => {
   const { node } = props;
   const { spacingsTokens } = useCunninghamTheme();
   const { isDesktop } = useResponsiveStore();
-  const [actionsOpen, setActionsOpen] = useState(false);
+  const { t } = useTranslation();
+
+  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();
 
   const { emoji, titleWithoutEmoji } = getEmojiAndTitle(doc.title || '');
   const displayTitle = titleWithoutEmoji || untitledDocument;
 
+  const handleActivate = () => {
+    treeContext?.treeData.setSelectedNode(doc);
+    router.push(`/docs/${doc.id}`);
+  };
+
   const afterCreate = (createdDoc: Doc) => {
     const actualChildren = node.data.children ?? [];
 
@@ -76,62 +87,66 @@ export const DocSubPageItem = (props: TreeViewNodeProps<Doc>) => {
     }
   };
 
+  useKeyboardActivation(
+    ['Enter', ' '],
+    isActive && !menuOpen,
+    handleActivate,
+    true,
+  );
+
+  const docTitle = doc.title || untitledDocument;
+  const hasChildren = (doc.children?.length || 0) > 0;
+  const isExpanded = node.isOpen;
+  const isSelected = isSelectedNow;
+  const ariaLabel = docTitle;
+
   return (
     <Box
       className="--docs-sub-page-item"
       draggable={doc.abilities.move && isDesktop}
       $position="relative"
+      role="treeitem"
+      aria-label={ariaLabel}
+      aria-selected={isSelected}
+      aria-expanded={hasChildren ? isExpanded : undefined}
       $css={css`
-        background-color: ${actionsOpen
-          ? 'var(--c--theme--colors--greyscale-100)'
-          : 'var(--c--theme--colors--greyscale-000)'};
-
-        .light-doc-item-actions {
-          display: ${actionsOpen || !isDesktop ? 'flex' : 'none'};
-          position: absolute;
-          right: 0;
-          background: ${isDesktop
-            ? 'var(--c--theme--colors--greyscale-100)'
-            : 'var(--c--theme--colors--greyscale-000)'};
-        }
-
-        .c__tree-view--node.isSelected {
-          .light-doc-item-actions {
-            background: var(--c--theme--colors--greyscale-100);
-          }
+        .c__tree-view--node {
+          padding: ${spacingsTokens['3xs']};
+          border-radius: 4px;
         }
 
-        &:hover {
+        .c__tree-view--node:hover {
           background-color: var(--c--theme--colors--greyscale-100);
-          border-radius: 4px;
+        }
 
-          .light-doc-item-actions {
-            display: flex;
-            background: var(--c--theme--colors--greyscale-100);
-          }
+        .light-doc-item-actions {
+          display: flex;
+          opacity: ${isActive || !isDesktop ? 1 : 0};
+          position: absolute;
+          right: 0;
+          top: 0;
+          height: 100%;
+          z-index: 10;
         }
 
         .row.preview & {
           background-color: inherit;
         }
       `}
     >
-      <TreeViewItem
-        {...props}
-        onClick={() => {
-          treeContext?.treeData.setSelectedNode(props.node.data.value as Doc);
-          router.push(`/docs/${props.node.data.value.id}`);
-        }}
-      >
-        <Box
-          data-testid={`doc-sub-page-item-${props.node.data.value.id}`}
+      <TreeViewItem {...props} onClick={handleActivate}>
+        <BoxButton
+          onClick={(e) => {
+            e.stopPropagation();
+            handleActivate();
+          }}
           $width="100%"
           $direction="row"
           $gap={spacingsTokens['xs']}
-          role="button"
-          tabIndex={0}
           $align="center"
           $minHeight="24px"
+          data-testid={`doc-sub-page-item-${doc.id}`}
+          aria-label={`${t('Open document')} ${docTitle}`}
         >
           <Box $width="16px" $height="16px">
             <DocIcon emoji={emoji} defaultIcon={<SubPageIcon />} $size="sm" />
@@ -157,25 +172,28 @@ export const DocSubPageItem = (props: TreeViewNodeProps<Doc>) => {
                 iconName="group"
                 $size="16px"
                 $variation="400"
+                aria-hidden="true"
               />
             )}
           </Box>
-
-          <Box
-            $direction="row"
-            $align="center"
-            className="light-doc-item-actions"
-          >
-            <DocTreeItemActions
-              doc={doc}
-              isOpen={actionsOpen}
-              onOpenChange={setActionsOpen}
-              parentId={node.data.parentKey}
-              onCreateSuccess={afterCreate}
-            />
-          </Box>
-        </Box>
+        </BoxButton>
       </TreeViewItem>
+
+      <Box
+        $direction="row"
+        $align="center"
+        className="light-doc-item-actions"
+        role="toolbar"
+        aria-label={`${t('Actions for')} ${docTitle}`}
+      >
+        <DocTreeItemActions
+          doc={doc}
+          isOpen={menuOpen}
+          onOpenChange={setMenuOpen}
+          parentId={node.data.parentKey}
+          onCreateSuccess={afterCreate}
+        />
+      </Box>
     </Box>
   );
 };