♿️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: +709 B (+0.02%)

Total Size: 4.11 MB

Filename	Size	Change
apps/impress/out/_next/static/19adfceb/_buildManifest.js	0 B	-906 B (removed)	🏆
apps/impress/out/_next/static/a2a7207e/_buildManifest.js	904 B	+904 B (new file)	🆕

_{compressed-size-action}

[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).

[Ovgodd]

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).

Ohhh it’s a really nice catch, I don’t know how I missed that the first F2 actually opens the emoji picker.

When I built this feature I only thought about the emoji picker later, so this is actually perfect, because we do need to be able to access it with the keyboard.

For your suggestion on the ui-kit side (moving {...props.attrs} below the onKeyDown in TreeView.tsx), I agree that the clean solution is to handle F2 directly in the row via onKeyDown instead of relying on workarounds here.

If I may, I propose to make some little fixup anyway ? because we have an accessibility audit coming very soon, and updating the ui-kit + bumping it in this on docs will probably take a bit of time ?

• first F2 moves focus (visually as well) to the emoji button when available
• second F2 moves focus to the document actions
• the SR announcement is updated to describe this behavior

Once the ui-kit exposes onKeyDown properly on the tree row, I’d be happy to follow up with another PR to remove this workaround and align the behavior with the upstream TreeView.