♿️Improve keyboard accessibility for the document tree #1681

Ovgodd · 2025-12-02T12:22:35Z

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 · 2025-12-02T12:28:28Z

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 · 2025-12-02T14:36:49Z

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

                opacity: 1;
              }
            }
+            /* Retirer le focus visuel du root item quand le focus est sur les actions */


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 · 2025-12-02T14:42:00Z

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

+            display: flex;
+          }
+        }
+        /* Retirer le focus visuel du tree item quand le focus est sur les actions */


Comments should be in english.

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

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

adds f2 shortcut to open options menu in sub-documents Signed-off-by: Cyril <c.gromoff@gmail.com>

…treeview struct Signed-off-by: Cyril <c.gromoff@gmail.com>

improves screen reader support with contextual accessibility guidance Signed-off-by: Cyril <c.gromoff@gmail.com>

…iew struct

…e treeview struct

…de the treeview struct

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 · 2025-12-05T14:48:14Z

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

Can be removed as well.

AntoLC · 2025-12-05T14:48:53Z

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

  const handleRootKeyDown = useCallback(
    (e: React.KeyboardEvent) => {
+      // F2: focus first action button
+      if (e.key === 'F2' && !rootActionsOpen) {


Can we assert that in a e2e test ?

AntoLC · 2025-12-05T14:56:53Z

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

        }
      `}
    >
+      {/* Instructions clavier pour les lecteurs d'écran */}


AntoLC · 2025-12-05T15:10:25Z

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

+            $css={css`
+              background: transparent;
+              border: none;
+              padding: 0;
+              cursor: pointer;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+
+              &:focus-visible {
+                outline: 2px solid var(--c--globals--colors--brand-500) !important;
+                outline-offset: -2px;
+                border-radius: var(--c--globals--spacings--st);
+              }
+            `}


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 · 2025-12-05T15:11:38Z

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

            aria-label={t('Add a sub page')}
            data-testid="doc-tree-item-actions-add-child"
+            tabIndex={-1}
+            $css={css`


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

}

Ovgodd requested a review from AntoLC December 2, 2025 12:22

Ovgodd self-assigned this Dec 2, 2025

Ovgodd added the accessibility label Dec 2, 2025

Ovgodd changed the title ~~Fix/a11y doctree options~~ ♿️Improve keyboard accessibility for the document tree Dec 2, 2025

Ovgodd force-pushed the fix/a11y-doctree-options branch from c49c1f7 to f72df6c Compare December 2, 2025 12:25

Ovgodd force-pushed the fix/a11y-doctree-options branch 2 times, most recently from 5f35f48 to 2914ea9 Compare December 2, 2025 12:39

Ovgodd marked this pull request as ready for review December 2, 2025 13:23

Ovgodd force-pushed the fix/a11y-doctree-options branch from 2480747 to 86d98f0 Compare December 2, 2025 13:30

AntoLC reviewed Dec 3, 2025

View reviewed changes

Ovgodd force-pushed the fix/a11y-doctree-options branch from 9504a1c to fa7d602 Compare December 3, 2025 09:48

Ovgodd requested a review from AntoLC December 3, 2025 11:51

✨(frontend) keyboard support in sub-documents with f2 options access

d581c12

adds f2 shortcut to open options menu in sub-documents Signed-off-by: Cyril <c.gromoff@gmail.com>

Ovgodd force-pushed the fix/a11y-doctree-options branch 2 times, most recently from b177dfa to 7d22f33 Compare December 3, 2025 12:07

Ovgodd added 4 commits December 3, 2025 13:09

✨(frontend) adds f2 shortcut using a fakenode since it's outside the …

9318107

…treeview struct Signed-off-by: Cyril <c.gromoff@gmail.com>

✨(frontend) add sr-only instructions with aria-describedby links

46b7075

improves screen reader support with contextual accessibility guidance Signed-off-by: Cyril <c.gromoff@gmail.com>

fixup! adds f2 shortcut using a fakenode since it's outside the treev…

8978063

…iew struct

fixup! fixup! adds f2 shortcut using a fakenode since it's outside th…

cf8e1d5

…e treeview struct

Ovgodd force-pushed the fix/a11y-doctree-options branch from 7d22f33 to cf8e1d5 Compare December 3, 2025 12:09

fixup! ✨(frontend) adds f2 shortcut using a fakenode since it's outsi…

c109288

…de the treeview struct

AntoLC reviewed Dec 5, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

♿️Improve keyboard accessibility for the document tree #1681

♿️Improve keyboard accessibility for the document tree #1681

Uh oh!

Ovgodd commented Dec 2, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Dec 2, 2025 •

edited

Loading

Uh oh!

AntoLC Dec 2, 2025

Uh oh!

AntoLC Dec 2, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

AntoLC left a comment

Uh oh!

AntoLC Dec 5, 2025

Uh oh!

AntoLC Dec 5, 2025

Uh oh!

AntoLC Dec 5, 2025

Uh oh!

AntoLC Dec 5, 2025

Uh oh!

AntoLC Dec 5, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	/* 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 */

	$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 \|\| ''}
	`}

♿️Improve keyboard accessibility for the document tree #1681

Are you sure you want to change the base?

♿️Improve keyboard accessibility for the document tree #1681

Uh oh!

Conversation

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

Uh oh!

Purpose

Proposal

Keyboard Navigation

Changes

Accessibility

Uh oh!

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

Uh oh!

Uh oh!

AntoLC Dec 2, 2025

Choose a reason for hiding this comment

Uh oh!

AntoLC Dec 2, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

AntoLC left a comment

Choose a reason for hiding this comment

Uh oh!

AntoLC Dec 5, 2025

Choose a reason for hiding this comment

Uh oh!

AntoLC Dec 5, 2025

Choose a reason for hiding this comment

Uh oh!

AntoLC Dec 5, 2025

Choose a reason for hiding this comment

Uh oh!

AntoLC Dec 5, 2025

Choose a reason for hiding this comment

Uh oh!

AntoLC Dec 5, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Ovgodd commented Dec 2, 2025 •

edited

Loading

github-actions bot commented Dec 2, 2025 •

edited

Loading