studio/docs
Archived
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

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

Signed-off-by: Cyril <c.gromoff@gmail.com>
This commit is contained in:
Cyril
2025-09-15 16:47:07 +02:00
parent 942c90c29f
commit 69e7235f75
2 changed files with 23 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -19,9 +19,10 @@ import { DocIcon } from '@/features/docs/doc-management/components/DocIcon';
import { useLeftPanelStore } from '@/features/left-panel'; import { useLeftPanelStore } from '@/features/left-panel';
import { useResponsiveStore } from '@/stores'; import { useResponsiveStore } from '@/stores';
import { useKeyboardActivation } from '../hooks/useKeyboardActivation';
import SubPageIcon from './../assets/sub-page-logo.svg'; import SubPageIcon from './../assets/sub-page-logo.svg';
import { DocTreeItemActions } from './DocTreeItemActions'; import { DocTreeItemActions } from './DocTreeItemActions';
import { useKeyboardActivation } from '../hooks/useKeyboardActivation';
const ItemTextCss = css` const ItemTextCss = css`
overflow: hidden; overflow: hidden;
@@ -127,6 +128,11 @@ export const DocSubPageItem = (props: TreeViewNodeProps<Doc>) => {
background: var(--c--theme--colors--greyscale-100); 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 { &:hover {
background-color: var(--c--theme--colors--greyscale-100); background-color: var(--c--theme--colors--greyscale-100);
border-radius: 4px; border-radius: 4px;

17
src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTree.tsx
View File

@@ -181,6 +181,15 @@ export const DocTree = ({ currentDoc }: DocTreeProps) => {
role="tree" role="tree"
aria-label={t('Document tree')} aria-label={t('Document tree')}
$css={css` $css={css`
/* Remove outline from TreeViewItem wrapper elements */
.c__tree-view--row {
outline: none !important;
&:focus-visible {
outline: none !important;
}
}
.c__tree-view--container { .c__tree-view--container {
z-index: 1; z-index: 1;
margin-top: -10px; margin-top: -10px;
@@ -200,7 +209,7 @@ export const DocTree = ({ currentDoc }: DocTreeProps) => {
<Box <Box
data-testid="doc-tree-root-item" data-testid="doc-tree-root-item"
role="treeitem" 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} aria-selected={rootIsSelected}
tabIndex={0} tabIndex={0}
onFocus={handleRootFocus} onFocus={handleRootFocus}
@@ -217,6 +226,12 @@ export const DocTree = ({ currentDoc }: DocTreeProps) => {
background-color: var(--c--theme--colors--greyscale-100); 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 { .doc-tree-root-item-actions {
display: 'flex'; display: 'flex';
opacity: ${rootActionsOpen ? '1' : '0'}; opacity: ${rootActionsOpen ? '1' : '0'};