✨(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 <c.gromoff@gmail.com>

Author: Ovgodd

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

@@ -121,6 +121,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;
@@ -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'};