From 69e7235f756b3c1d961b039414e274fcbbcf8fcf Mon Sep 17 00:00:00 2001
From: Cyril <c.gromoff@gmail.com>
Date: Mon, 15 Sep 2025 16:47:07 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20refine=20focus=20outline?=
 =?UTF-8?q?=20with=20shadow=20for=20visual=20consistency?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

aligns focus state with app style by adding background shadow to outline

Signed-off-by: Cyril <c.gromoff@gmail.com>
---
 .../docs/doc-tree/components/DocSubPageItem.tsx |  8 +++++++-
 .../docs/doc-tree/components/DocTree.tsx        | 17 ++++++++++++++++-
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx b/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx
index a08c0754..0b0ee038 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx
@@ -19,9 +19,10 @@ import { DocIcon } from '@/features/docs/doc-management/components/DocIcon';
 import { useLeftPanelStore } from '@/features/left-panel';
 import { useResponsiveStore } from '@/stores';
 
+import { useKeyboardActivation } from '../hooks/useKeyboardActivation';
+
 import SubPageIcon from './../assets/sub-page-logo.svg';
 import { DocTreeItemActions } from './DocTreeItemActions';
-import { useKeyboardActivation } from '../hooks/useKeyboardActivation';
 
 const ItemTextCss = css`
   overflow: hidden;
@@ -127,6 +128,11 @@ export const DocSubPageItem = (props: TreeViewNodeProps<Doc>) => {
             background: var(--c--theme--colors--greyscale-100);
           }
         }
+        .c__tree-view--node.isFocused {
+          outline: none !important;
+          box-shadow: 0 0 0 2px var(--c--theme--colors--primary-500) !important;
+          border-radius: 4px;
+        }
         &:hover {
           background-color: var(--c--theme--colors--greyscale-100);
           border-radius: 4px;
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 7b01dd8c..7c9ca041 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
@@ -181,6 +181,15 @@ export const DocTree = ({ currentDoc }: DocTreeProps) => {
       role="tree"
       aria-label={t('Document tree')}
       $css={css`
+        /* Remove outline from TreeViewItem wrapper elements */
+        .c__tree-view--row {
+          outline: none !important;
+
+          &:focus-visible {
+            outline: none !important;
+          }
+        }
+
         .c__tree-view--container {
           z-index: 1;
           margin-top: -10px;
@@ -200,7 +209,7 @@ export const DocTree = ({ currentDoc }: DocTreeProps) => {
         <Box
           data-testid="doc-tree-root-item"
           role="treeitem"
-          aria-label={`${t('Root document')}: ${treeContext.root?.title || t('Untitled document')}`}
+          aria-label={`${t('Root document {{title}}', { title: treeContext.root?.title || t('Untitled document') })}`}
           aria-selected={rootIsSelected}
           tabIndex={0}
           onFocus={handleRootFocus}
@@ -217,6 +226,12 @@ export const DocTree = ({ currentDoc }: DocTreeProps) => {
               background-color: var(--c--theme--colors--greyscale-100);
             }
 
+            &:focus-visible {
+              outline: none !important;
+              box-shadow: 0 0 0 2px var(--c--theme--colors--primary-500) !important;
+              border-radius: 4px;
+            }
+
             .doc-tree-root-item-actions {
               display: 'flex';
               opacity: ${rootActionsOpen ? '1' : '0'};