⚡️(frontend) improve accessibility of selected document's sub-menu

[Ovgodd]

Purpose

This pull request improves the accessibility of the document tree by allowing keyboard users to:

• See the action menu (e.g. “more options” and “create sub-document” buttons) when navigating with Tab.
• Open a sub-document by pressing Enter when the corresponding tree item is focused.

issue : 1160

createsubdoc.mp4

Sub-document navigation is accessible, we can now navigate and open sub-docs using the keyboard.

Implementation note:
A small useTreeItemKeyboardActivate hook listens for Enter or Space only when the current node has focus (node.isFocused). This compensates for a limitation in react-arborist, which doesn't trigger any "activate" behavior on keyboard events.

For the action buttons (like ... or +) that appear when a tree item is focused:
By default, react-arborist uses a "roving tabindex", so these buttons are not reachable with Tab.
To fix this and make them keyboard-accessible:
I added a hook useActionableMode and some algo.

Proposal

• Add :focus-within on the tree item wrapper to show the contextual action menu when a child receives focus.
• Add :focus-visible outlines on buttons inside the menu to improve visible feedback.
• Add aria-label attributes to make icon-only buttons screen reader accessible (e.g. “More options”, “Add chil document”).
• Add keyboard support for the icon buttons using onKeyDown to handle Enter and Space.

[AntoLC]

✨(frontend) add keyboard navigation for subdocs with focus activation
This commit should have a e2e test attached, to clearly understand what is the purpose of it.

[AntoLC]

It make it a bit complex to follow what is going on here.

I think it would be more clear with 2 dedicated components, and in these components the interactions that belong to them.

For this one, it could be ButtonAddChildDoc:

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

Lines 223 to 244 in 154abdd

	<BoxButton
	as="button"
	tabIndex={0}
	data-testid="add-child-doc"
	onClick={handleAddChildClick}
	onKeyDown={handleAddChildKeyDown}
	color="primary"
	aria-label={
	t('Add child document to') +
	` ${doc.title || t('Untitled document')}`
	}
	$hasTransition={false}
	>
	<Icon
	variant="filled"
	$variation="800"
	$theme="primary"
	iconName="add_box"
	aria-hidden="true"
	/>
	</BoxButton>
	)}

For this one, it could be ButtonMoreOptions:

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

Lines 205 to 220 in 154abdd

	<Icon
	onClick={handleMoreOptionsClick}
	iconName="more_horiz"
	variant="filled"
	$theme="primary"
	$variation="600"
	className="icon-button"
	tabIndex={0}
	role="button"
	aria-label={
	t('More options for') + ` ${doc.title || t('Untitled document')}`
	}
	aria-haspopup="true"
	aria-expanded={isOpen}
	onKeyDown={handleMoreOptionsKeyDown}
	/>

[Ovgodd]

I agree 100%

[AntoLC]

I think you should rebase, you have made a interesting commit here: 5181bba

We should leverage what was made in this commit instead of creating the same logic again.

[Ovgodd]

This is a good idea yes.

[Ovgodd]

Hey! I’ve refactored the keyboard logic a bit to make it cleaner and avoid duplication.

• useDropdownKeyboardNav still handles the focus and keyboard navigation within dropdown menus, nothing changed there. It just uses a small shared helper now to handle the selection when pressing Enter or Space.
• useTreeItemKeyboardActivate, which is just about triggering an action when a tree item is focused and Enter/Space is pressed, now reuses that same helper directly.

This way we avoid duplicating the same event listener and cleanup logic, and each hook remains focused on its own specific use case.

Let me know if that sounds good to you !

[Ovgodd]

✨(frontend) add keyboard navigation for subdocs with focus activation This commit should have a e2e test attached, to clearly understand what is the purpose of it.

Ok, I see what you mean. Do you suggest moving the test files from the other commit to this one, or at least the test file that refers to this change?

[AntoLC]

When there is a subdocs, I cannot unfold the doc with keyboard.

Enregistrement.de.l.ecran.2025-08-12.125242.mp4

[AntoLC]

Could we improve the outline visually ?

[AntoLC]

I still don't see a test that show the keyboard interaction on the tree menu. #1261 (review)

Last thing, I can see that we have 2 components DropdownMenu, one coming from ui-kit, and another from src/components, they have different accessibility behaviors, could we unify this behavior ?

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

Lines 1 to 6 in 584d8f4

	import {
	DropdownMenu,
	DropdownMenuOption,
	useTreeContext,
	} from '@gouvfr-lasuite/ui-kit';
	import { useModal } from '@openfun/cunningham-react';

[Ovgodd]

When there is a subdocs, I cannot unfold the doc with keyboard.

Fix !

subdocnav.mp4