diff --git a/CHANGELOG.md b/CHANGELOG.md index 89f1caf9..07673931 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,11 @@ and this project adheres to - ✅(e2e) fix e2e test for other browsers #1799 +### Changed + +- ♿(frontend) improve accessibility: + - ♿️(frontend) fix subdoc opening and emoji pick focus #1745 + ## [4.4.0] - 2026-01-13 ### Added diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/EmojiPicker.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/EmojiPicker.tsx index c9246f65..8861d517 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/EmojiPicker.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/EmojiPicker.tsx @@ -20,11 +20,23 @@ export const EmojiPicker = ({ }: EmojiPickerProps) => { const { i18n } = useTranslation(); + const handleKeyDown = (event: React.KeyboardEvent) => { + if (event.key === 'Escape') { + onClickOutside(); + } + }; + const pickerContent = ( - + { - if (e.key === 'Escape' && openEmojiPicker) { - setOpenEmojiPicker(false); - } - }} $css={css` font-size: 1.125rem; cursor: ${isEditable ? 'pointer' : 'default'}; diff --git a/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTree.tsx b/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTree.tsx index 4d4ac31f..08fe8005 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTree.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTree.tsx @@ -128,6 +128,27 @@ export const DocTree = ({ currentDoc }: DocTreeProps) => { } }, []); + const handleRowKeyDown = useCallback((e: React.KeyboardEvent) => { + if (e.key !== 'Enter') { + return; + } + + const target = e.target as HTMLElement | null; + if ( + !target || + !( + target.classList.contains('c__tree-view--row') || + target.classList.contains('c__tree-view--node') + ) + ) { + return; + } + + e.currentTarget + .querySelector('.c__tree-view--node') + ?.click(); + }, []); + /** * This effect is used to reset the tree when a new document * that is not part of the current tree is loaded. @@ -357,6 +378,9 @@ export const DocTree = ({ currentDoc }: DocTreeProps) => { }} rootNodeId={treeContext.root.id} renderNode={DocSubPageItem} + rowProps={{ + onKeyDown: handleRowKeyDown, + }} /> )}