✨(frontend) refine focus outline with shadow for visual consistency

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

Signed-off-by: Cyril <[email protected]>

Author: Ovgodd

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

@@ -127,6 +127,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;

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'};