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

Ovgodd · 2025-09-08T15:13:14Z

Purpose

Enable keyboard accessibility for opening documents and subdocuments via the Enter key. This improves usability and accessibility for users navigating with the keyboard.

Proposal

Enable opening of a document when pressing Enter
Enable opening of a subdocument when pressing Enter
Navigation within the submenu (options, actions, etc.) will be handled in a separate PR

github-actions · 2025-09-09T11:07:23Z

Size Change: +620 B (+0.02%)

Total Size: 3.66 MB

Filename	Size	Change
`apps/impress/out/_next/static/370acbe7/_buildManifest.js`	0 B	-889 B (removed)	🏆
`apps/impress/out/_next/static/chunks/8495.js`	49.8 kB	+634 B (+1.29%)
`apps/impress/out/_next/static/73ce9e73/_buildManifest.js`	889 B	+889 B (new file)	🆕

_{compressed-size-action}

AntoLC

As seen together, some display errors to fix.

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

AntoLC

There is still differences with what is in production, the action buttons are on the top of the div now, the option button has lost the "cursor pointer":

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

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

AntoLC

Not sure why, after a certain depth, the text is not on the left side, adding text-align:left; seems to fix this issue.

AntoLC · 2025-09-15T15:07:56Z

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

      $width="100%"
      className="--docs--simple-doc-item"
+      role="presentation"
+      aria-label={`${t('Open document')} ${doc.title || untitledDocument}`}


Suggested change

aria-label={`${t('Open document')} ${doc.title || untitledDocument}`}

aria-label={`${t('Open document {{title}}', {title: doc.title || untitledDocument})}

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

AntoLC · 2025-09-15T15:09:48Z

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

+          $align="center"
+          className="light-doc-item-actions"
+          role="toolbar"
+          aria-label={`${t('Actions for')} ${docTitle}`}


Suggested change

aria-label={`${t('Actions for')} ${docTitle}`}

aria-label={`${t('Actions for {{title}}', {title: ${docTitle}`})}

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

AntoLC · 2025-09-15T15:14:09Z

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

Folder hooks should be out of folder components.

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

AntoLC

Looks good, work great !

AntoLC · 2025-09-16T08:09:57Z

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

+        action();
+      }
+    };
+    const treeEl = document.querySelector<HTMLElement>('.c__tree-view');


.c__tree-view could be a prop of this hook, it will then be a nice totally generic hook that you could reuse in different part of the app, that could live in src/hook, wdyt ?

Suggested change

const treeEl = document.querySelector<HTMLElement>('.c__tree-view');

const elSelected = document.querySelector<HTMLElement>(selector);

Great idea! Can't believe I didn't think of that sooner.

src/frontend/apps/impress/src/features/docs/doc-tree/components/dom-selectors.ts

added keyboard support to open docs and subdocs using the enter key Signed-off-by: Cyril <[email protected]>

aligns focus state with app style by adding background shadow to outline Signed-off-by: Cyril <[email protected]>

Ovgodd self-assigned this Sep 8, 2025

Ovgodd added frontend accessibility labels Sep 8, 2025

Ovgodd force-pushed the fix/keyboard-activate-doc branch 5 times, most recently from d60dd31 to 884a5a0 Compare September 9, 2025 05:43

Ovgodd requested a review from AntoLC September 9, 2025 07:24

Ovgodd marked this pull request as ready for review September 9, 2025 07:24

Ovgodd force-pushed the fix/keyboard-activate-doc branch from 884a5a0 to a64085f Compare September 9, 2025 11:03

Ovgodd force-pushed the fix/keyboard-activate-doc branch 6 times, most recently from 2746c9e to 58c0b5d Compare September 10, 2025 07:38

Ovgodd marked this pull request as draft September 10, 2025 07:51

Ovgodd force-pushed the fix/keyboard-activate-doc branch 4 times, most recently from 4bbfebe to cab4f61 Compare September 10, 2025 08:52

Ovgodd marked this pull request as ready for review September 10, 2025 09:11

AntoLC reviewed Sep 11, 2025

View reviewed changes

src/frontend/apps/impress/src/features/docs/doc-management/components/SimpleDocItem.tsx Outdated Show resolved Hide resolved

Ovgodd requested a review from AntoLC September 15, 2025 06:15

Ovgodd force-pushed the fix/keyboard-activate-doc branch from f5323cf to 773b150 Compare September 15, 2025 06:17

AntoLC reviewed Sep 15, 2025

View reviewed changes

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

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

AntoLC reviewed Sep 15, 2025

View reviewed changes

src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTree.tsx Outdated Show resolved Hide resolved

Ovgodd force-pushed the fix/keyboard-activate-doc branch from 92fbf03 to 104e14f Compare September 15, 2025 13:06

Ovgodd force-pushed the fix/keyboard-activate-doc branch from 104e14f to dd6c64c Compare September 15, 2025 13:15

Ovgodd requested a review from AntoLC September 15, 2025 13:22

Ovgodd force-pushed the fix/keyboard-activate-doc branch 2 times, most recently from 1697f78 to 85e27c5 Compare September 15, 2025 14:53

AntoLC reviewed Sep 15, 2025

View reviewed changes

Ovgodd force-pushed the fix/keyboard-activate-doc branch from dd030a2 to ee66426 Compare September 16, 2025 06:41

Ovgodd requested a review from AntoLC September 16, 2025 06:41

AntoLC approved these changes Sep 16, 2025

View reviewed changes

AntoLC reviewed Sep 16, 2025

View reviewed changes

src/frontend/apps/impress/src/features/docs/doc-tree/components/dom-selectors.ts Outdated Show resolved Hide resolved

Ovgodd force-pushed the fix/keyboard-activate-doc branch 2 times, most recently from e9fe0a8 to f1a9252 Compare September 16, 2025 08:26

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

942c90c

added keyboard support to open docs and subdocs using the enter key Signed-off-by: Cyril <[email protected]>

Ovgodd force-pushed the fix/keyboard-activate-doc branch 2 times, most recently from 3381269 to e290543 Compare September 16, 2025 08:45

✨(frontend) refine focus outline with shadow for visual consistency

69e7235

aligns focus state with app style by adding background shadow to outline Signed-off-by: Cyril <[email protected]>

Ovgodd force-pushed the fix/keyboard-activate-doc branch from e290543 to 69e7235 Compare September 16, 2025 08:56

Ovgodd merged commit 69e7235 into main Sep 16, 2025
21 of 22 checks passed

Ovgodd deleted the fix/keyboard-activate-doc branch September 16, 2025 09:38

AntoLC mentioned this pull request Oct 14, 2025

🔖(minor) release 3.8.0 #1483

Merged

	aria-label={`${t('Open document')} ${doc.title \|\| untitledDocument}`}
	aria-label={`${t('Open document {{title}}', {title: doc.title \|\| untitledDocument})}

	aria-label={`${t('Actions for')} ${docTitle}`}
	aria-label={`${t('Actions for {{title}}', {title: ${docTitle}`})}

	const treeEl = document.querySelector<HTMLElement>('.c__tree-view');
	const elSelected = document.querySelector<HTMLElement>(selector);

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

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

Uh oh!

Conversation

Ovgodd commented Sep 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Purpose

Proposal

Uh oh!

github-actions bot commented Sep 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

AntoLC left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

AntoLC left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

AntoLC left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

AntoLC Sep 15, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

AntoLC Sep 15, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

AntoLC Sep 15, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

AntoLC left a comment

Choose a reason for hiding this comment

Uh oh!

AntoLC Sep 16, 2025

Choose a reason for hiding this comment

Uh oh!

Ovgodd Sep 16, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Ovgodd commented Sep 8, 2025 •

edited

Loading

github-actions bot commented Sep 9, 2025 •

edited

Loading

AntoLC left a comment •

edited

Loading

AntoLC left a comment •

edited

Loading