⚡️(frontend) improve accessibility of selected document's sub-menu

adds focus-visible and focus-within to make the sub-menu accessible

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

Author: Ovgodd

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

@@ -87,13 +87,19 @@ export const DocSubPageItem = (props: TreeViewNodeProps<Doc>) => {
             : 'var(--c--theme--colors--greyscale-000)'};
         }
 
+        &:focus-within .light-doc-item-actions {
+          display: flex;
+          background: var(--c--theme--colors--greyscale-100);
+        }
+
         .c__tree-view--node.isSelected {
           .light-doc-item-actions {
             background: var(--c--theme--colors--greyscale-100);
           }
         }
 
-        &:hover {
+        &:hover,
+        &:focus-within {
           background-color: var(--c--theme--colors--greyscale-100);
           border-radius: 4px;
 

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

@@ -189,7 +189,8 @@ export const DocTree = ({ currentDoc }: DocTreeProps) => {
                 opacity: 1;
               }
             }
-            &:hover {
+            &:hover,
+            &:focus-within {
               .doc-tree-root-item-actions {
                 opacity: 1;
               }

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

@@ -150,6 +150,25 @@ export const DocTreeItemActions = ({
         $align="center"
         className="--docs--doc-tree-item-actions"
         $gap="4px"
+        $css={css`
+          &:focus-within {
+            opacity: 1;
+            visibility: visible;
+          }
+          button:focus-visible,
+          [role='button']:focus-visible {
+            outline: 2px solid var(--c--theme--colors--primary-500);
+            outline-offset: 2px;
+            background-color: var(--c--theme--colors--greyscale-050);
+            border-radius: 4px;
+          }
+          .icon-button:focus-visible {
+            outline: 2px solid var(--c--theme--colors--primary-500);
+            outline-offset: 2px;
+            background-color: var(--c--theme--colors--greyscale-050);
+            border-radius: 4px;
+          }
+        `}
       >
         <DropdownMenu
           options={options}
@@ -166,6 +185,17 @@ export const DocTreeItemActions = ({
             variant="filled"
             $theme="primary"
             $variation="600"
+            className="icon-button"
+            tabIndex={0}
+            role="button"
+            aria-label={t('More options')}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                e.stopPropagation();
+                onOpenChange?.(!isOpen);
+              }
+            }}
           />
         </DropdownMenu>
         {doc.abilities.children_create && (
@@ -179,6 +209,7 @@ export const DocTreeItemActions = ({
               });
             }}
             color="primary"
+            aria-label={t('Add child document')}
           >
             <Icon
               variant="filled"