♿️Improve keyboard accessibility for the document tree

[Ovgodd]

Purpose

Improve keyboard accessibility for the document tree by implementing F2 navigation to access action buttons (three dots menu and add child button) for both root items and sub-pages.

issues : 1160

Enregistrement.de.l.ecran.2025-12-02.131853.mp4

Proposal

Keyboard Navigation

Key	Context	Action
Tab	Document tree	Navigate between documents (root → sub-pages)
F2	Focused document	Move focus to first action button (three dots)
Enter	Focused document	Open the document
Enter	Action button	Activate button (open menu / create child)
Arrow Left/Right	Action buttons	Navigate between buttons
Escape	Action buttons	Return focus to document

Changes

• Use ref to handle focus
• Display actions when document is focused (like hover)
• Hide document focus outline when focus is on actions

Accessibility

• ✅ Actions are visible when document is focused (keyboard users see them)
• ✅ Actions are not in tab order (reduces tab stops)
• ✅ F2 is the standard key for accessing toolbars (ARIA best practices)
• ✅ Arrow keys for navigation within toolbar (ARIA roving tabindex pattern)
• ✅ Escape returns to main content (standard pattern)
• ✅ Screen reader announces keyboard shortcuts (F2, arrows, Enter) when entering the tree

[github-actions]

Size Change: +687 B (+0.02%)

Total Size: 4.11 MB

Filename	Size	Change
apps/impress/out/_next/static/2f9e90ce/_buildManifest.js	0 B	-906 B (removed)	🏆
apps/impress/out/_next/static/53b6db14/_buildManifest.js	905 B	+905 B (new file)	🆕

_{compressed-size-action}

[AntoLC]

Suggested change

	/* Retirer le focus visuel du root item quand le focus est sur les actions */
	/* Remove visual focus from the root item when focus is on the actions */

[AntoLC]

Comments should be in english.

[AntoLC]

I found the problem about the double f2, it is intercepted by treeitem.

It positions the focus on the emojipicker ^^ If you do f2 then enter, the picker open.

I suppose it is not the best that :
https://github.com/suitenumerique/ui-kit/blob/0b6f80100a85641c8227b4a61720722ec12691e2/src/components/tree-view/TreeView.tsx#L351-L359
From here: suitenumerique/ui-kit@c40f7f6

We need a way to pass props easily to this part, if we can have the hand on props.attr we should be able to add our own onKeyDown, but for that we need to move this line (l378 {...props.attrs}) to the line under onKeyDown (l390).(https://github.com/suitenumerique/ui-kit/blob/0b6f80100a85641c8227b4a61720722ec12691e2/src/components/tree-view/TreeView.tsx#L378-L379).

[AntoLC]

Can be removed as well.

[AntoLC]

Can we assert that in a e2e test ?

[AntoLC]

English

[AntoLC]

BoxButton has already all that:

docs/src/frontend/apps/impress/src/components/BoxButton.tsx

Lines 38 to 53 in c109288

	$css={css`
	cursor: ${props.disabled ? 'not-allowed' : 'pointer'};
	border: none;
	outline: none;
	font-family: inherit;
	color: ${props.disabled &&
	`var(--c--contextuals--content--semantic--disabled--primary)`};
	&:focus-visible {
	transition: none;
	outline: 2px solid
	var(--c--contextuals--content--semantic--${theme}--${variation});
	border-radius: 1px;
	outline-offset: var(--c--globals--spacings--st);
	}
	${$css || ''}
	`}

[AntoLC]

Same BoxButton has already that, you just need to set the correct theme and variation props:

docs/src/frontend/apps/impress/src/components/BoxButton.tsx

Lines 45 to 51 in c109288

	&:focus-visible {
	transition: none;
	outline: 2px solid
	var(--c--contextuals--content--semantic--${theme}--${variation});
	border-radius: 1px;
	outline-offset: var(--c--globals--spacings--st);
	}