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

CHANGELOG.md

@@ -46,6 +46,11 @@ and this project adheres to
 - 🐛(frontend) fix children not display when first resize #1753
 - 🐛(frontend) fix clickable main content regression #1773
 
+### Changed
+
+- ♿(frontend) improve accessibility:
+  - ♿️(frontend) fix subdoc opening and emoji pick focus #1745
+
 ## [4.2.0] - 2025-12-17
 
 ### 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

@@ -101,11 +101,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/DocSubPageItem.tsx

@@ -18,6 +18,7 @@ import {
   useTrans,
 } from '@/docs/doc-management';
 import { useLeftPanelStore } from '@/features/left-panel';
+import { useKeyboardActivation } from '@/hooks/useKeyboardActivation';
 import { useResponsiveStore } from '@/stores';
 
 import SubPageIcon from './../assets/sub-page-logo.svg';
@@ -97,6 +98,7 @@ export const DocSubPageItem = (props: TreeViewNodeProps<Doc>) => {
   const isDisabled = !!doc.deleted_at;
   const actionsRef = useRef<HTMLDivElement>(null);
   const buttonOptionRef = useRef<HTMLDivElement | null>(null);
+  const isActive = node.isFocused;
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
     // F2: focus first action button
@@ -108,6 +110,14 @@ export const DocSubPageItem = (props: TreeViewNodeProps<Doc>) => {
     }
   };
 
+  useKeyboardActivation(
+    ['Enter'],
+    isActive && !menuOpen,
+    handleActivate,
+    true,
+    '.c__tree-view',
+  );
+
   const handleActionsOpenChange = (isOpen: boolean) => {
     setMenuOpen(isOpen);
 

src/frontend/apps/impress/src/hooks/index.ts

@@ -1 +1,2 @@
 export * from './useKeyboardAction';
+export * from './useKeyboardActivation';

src/frontend/apps/impress/src/hooks/useKeyboardActivation.ts

@@ -0,0 +1,41 @@
+import { useEffect } from 'react';
+
+export const useKeyboardActivation = (
+  keys: string[],
+  enabled: boolean,
+  action: () => void,
+  capture = false,
+  selector: string,
+) => {
+  useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (keys.includes(e.key)) {
+        // Ignore if focus is on interactive elements (emoji picker button, actions menu, etc.)
+        const target = e.target as HTMLElement | null;
+        if (
+          target?.closest('.--docs--doc-icon') ||
+          target?.closest('.light-doc-item-actions') ||
+          target?.closest('button') ||
+          target?.closest('[role="menu"]') ||
+          target?.closest('[role="menuitem"]')
+        ) {
+          return;
+        }
+
+        e.preventDefault();
+        action();
+      }
+    };
+    const treeEl = document.querySelector<HTMLElement>(selector);
+    if (!treeEl) {
+      return;
+    }
+    treeEl.addEventListener('keydown', onKeyDown, capture);
+    return () => {
+      treeEl.removeEventListener('keydown', onKeyDown, capture);
+    };
+  }, [keys, enabled, action, capture, selector]);
+};

src/frontend/yarn.lock

@@ -12518,7 +12518,7 @@ qified@^0.5.2:
   dependencies:
     hookified "^1.13.0"
 
-qs@6.14.1, qs@^6.11.2, qs@^6.14.0:
+qs@^6.11.2, qs@^6.14.0:
   version "6.14.1"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.14.1.tgz#a41d85b9d3902f31d27861790506294881871159"
   integrity sha512-4EK3+xJl8Ts67nLYNwqw/dsFVnCf+qR7RgXSK9jEEm9unao3njwMDdmsdvoKBKHzxd7tCYz5e5M+SnMjdtXGQQ==