✨(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 <c.gromoff@gmail.com>

Author: Ovgodd

CHANGELOG.md

@@ -8,14 +8,16 @@ and this project adheres to
 
 ## [Unreleased]
 
-### Added 
+### Added
 
 - ✨(api) add API route to fetch document content #1206
 
 ### Changed
 
 - 🔒️(backend) configure throttle on every viewsets #1343
 - ⬆️ Bump eslint to V9 #1071
+- ♿(frontend) improve accessibility:
+ - #1354
 
 ## [3.6.0] - 2025-09-04
 

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

@@ -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,
@@ -49,6 +61,9 @@ export const SimpleDocItem = ({
  $overflow="auto"
  $width="100%"
  className="--docs--simple-doc-item"
+ role="presentation"
+ onClick={handleActivate}
+ aria-label={`${t('Open document')} ${doc.title || untitledDocument}`}
  >
  <Box
  $direction="row"
@@ -59,6 +74,7 @@ export const SimpleDocItem = ({
  `}
  $padding={`${spacingsTokens['3xs']} 0`}
  data-testid={isPinned ? `doc-pinned-${doc.id}` : undefined}
+ aria-hidden="true"
  >
  {isPinned ? (
  <PinnedDocumentIcon
@@ -97,6 +113,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,87 @@ export const DocSubPageItem = (props: TreeViewNodeProps<Doc>) => {
  }
  };
 
+ useKeyboardActivation(
+ ['Enter', ' '],
+ isActive && !menuOpen,
+ handleActivate,
+ true,
+ );
+
+ // prepare the text for the screen reader
+ 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)'};
+ /* Ensure the outline (handled by TreeView) matches the visual area */
+ .c__tree-view--node {
+ padding: ${spacingsTokens['3xs']};
+ border-radius: 4px;
+ }
 
  .light-doc-item-actions {
- display: ${actionsOpen || !isDesktop ? 'flex' : 'none'};
+ display: flex;
+ opacity: ${isActive || !isDesktop ? 1 : 0};
  position: absolute;
  right: 0;
- background: ${isDesktop
-  ? 'var(--c--theme--colors--greyscale-100)'
-  : 'var(--c--theme--colors--greyscale-000)'};
+ top: 0;
+ height: 100%;
+ z-index: 10;
  }
 
- .c__tree-view--node.isSelected {
- .light-doc-item-actions {
- background: var(--c--theme--colors--greyscale-100);
- }
- }
-
- &:hover {
+ .c__tree-view--node:hover,
+ .c__tree-view--node.isFocused {
  background-color: var(--c--theme--colors--greyscale-100);
- border-radius: 4px;
 
  .light-doc-item-actions {
  display: flex;
- background: var(--c--theme--colors--greyscale-100);
+ opacity: 1;
+ visibility: visible;
+ /* background: var(--c--theme--colors--greyscale-100); */
  }
  }
 
  .row.preview & {
  background-color: inherit;
  }
+
+ /* Ensure actions are visible when hovering the whole item container */
+ &:hover {
+ .light-doc-item-actions {
+ display: flex;
+ opacity: 1;
+ visibility: visible;
+ }
+ }
  `}
  >
- <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();
+ }}
+ tabIndex={-1}
  $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 +193,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>
  );
 };