♿️(frontend) fix subdoc opening and emoji pick focus

ensures subdoc opens and emoji picker focus on input

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

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

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<HTMLDivElement>) => {
+    if (event.key === 'Escape') {
+      onClickOutside();
+    }
+  };
+
   const pickerContent = (
-    <Box $position="absolute" $zIndex={1000} $margin="2rem 0 0 0">
+    <Box
+      $position="absolute"
+      $zIndex={1000}
+      $margin="2rem 0 0 0"
+      onKeyDownCapture={handleKeyDown}
+    >
       <Picker
         data={emojiData}
         locale={i18n.resolvedLanguage}
+        autoFocus
         onClickOutside={onClickOutside}
         onEmojiSelect={onEmojiSelect}
         previewPosition="none"

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/CalloutBlock.tsx

@@ -106,11 +106,6 @@ const CalloutComponent = ({
         <BoxButton
           contentEditable={false}
           onClick={toggleEmojiPicker}
-          onKeyDown={(e) => {
-            if (e.key === 'Escape' && openEmojiPicker) {
-              setOpenEmojiPicker(false);
-            }
-          }}
           $css={css`
             font-size: 1.125rem;
             cursor: ${isEditable ? 'pointer' : 'default'};

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<HTMLDivElement>('.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,
+              }}
             />
           </Overlayer>
         )}