⚡️(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

CHANGELOG.md

@@ -15,6 +15,8 @@ and this project adheres to
   - #1235
   - #1255
   - #1262
+  - #1261
+
 
 ## [3.5.0] - 2025-07-31
 

src/frontend/apps/e2e/__tests__/app-impress/utils-sub-pages.ts

@@ -63,5 +63,6 @@ export const clickOnAddRootSubPage = async (page: Page) => {
   const rootItem = page.getByTestId('doc-tree-root-item');
   await expect(rootItem).toBeVisible();
   await rootItem.hover();
-  await rootItem.getByRole('button', { name: 'add_box' }).click();
+
+  await rootItem.getByTestId('add-child-doc').click();
 };

src/frontend/apps/impress/src/features/docs/doc-management/components/SimpleDocItem.tsx

@@ -59,12 +59,14 @@ export const SimpleDocItem = ({
             aria-hidden="true"
             aria-label={t('Pin document icon')}
             color={colorsTokens['primary-500']}
+            aria-hidden="true"
           />
         ) : (
           <SimpleFileIcon
             aria-hidden="true"
             aria-label={t('Simple document icon')}
             color={colorsTokens['primary-500']}
+            aria-hidden="true"
           />
         )}
       </Box>

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,10 +185,22 @@ 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 && (
           <BoxButton
+            data-testid="add-child-doc"
             onClick={(e) => {
               e.stopPropagation();
               e.preventDefault();
@@ -179,6 +210,7 @@ export const DocTreeItemActions = ({
               });
             }}
             color="primary"
+            aria-label={t('Add child document')}
           >
             <Icon
               variant="filled"

src/frontend/apps/impress/src/i18n/translations.json

@@ -270,6 +270,8 @@
       "Move": "Verschieben",
       "Move document": "Dokument verschieben",
       "Move to my docs": "In \"Meine Dokumente\" verschieben",
+      "More options": "Weitere Optionen",
+      "Add child document": "Unterdokument hinzufügen",
       "My docs": "Meine Dokumente",
       "Name": "Name",
       "New doc": "Neues Dokument",
@@ -377,7 +379,8 @@
       "Shared with {{count}} users_many": "Shared with {{count}} users",
       "Shared with {{count}} users_one": "Shared with {{count}} user",
       "Shared with {{count}} users_other": "Shared with {{count}} users",
-      "Updated": "Updated"
+      "Updated": "Updated",
+      "Add child document": "Add child document"
     }
   },
   "es": {
@@ -560,6 +563,8 @@
       "You are the sole owner of this group, make another member the group owner before you can change your own role or be removed from your document.": "Eres el único propietario de este grupo, haz que otro miembro sea el propietario del grupo para poder cambiar tu propio rol o ser eliminado del documento.",
       "Your current document will revert to this version.": "Tu documento actual se revertirá a esta versión.",
       "Your {{format}} was downloaded succesfully": "Su {{format}} se ha descargado correctamente",
+      "More options": "Más opciones",
+      "Add child document": "Añadir documento hijo",
       "home-content-open-source-part1": "Docs está construido sobre <2>Django Rest Framework</2> y <6>Next.js</6>. También utilizamos <9>Yjs</9> y <13>BlockNote.js</13>, dos proyectos que estamos orgullosos de patrocinar.",
       "home-content-open-source-part2": "Puede autoalojar fácilmente Docs (consulte nuestra <2>documentación</2> de instalación).<br/>Docs utiliza una <7>licencia</7> (MIT) adecuada para la innovación y las empresas.<br/>Se aceptan contribuciones (consulte nuestra hoja de ruta <13>aquí</13>).",
       "home-content-open-source-part3": "Docs es el resultado de un esfuerzo conjunto llevado a cabo por los gobiernos francés 🇫🇷🥖 <1>(DINUM)</1> y alemán 🇩🇪🥨 <5>(ZenDiS)</5>."
@@ -694,6 +699,8 @@
       "Move": "Déplacer",
       "Move document": "Déplacer le document",
       "Move to my docs": "Déplacer vers mes docs",
+      "More options": "Plus d'options",
+      "Add child document": "Ajouter un document enfant",
       "My docs": "Mes documents",
       "Name": "Nom",
       "New doc": "Nouveau doc",
@@ -1122,6 +1129,8 @@
       "You are the sole owner of this group, make another member the group owner before you can change your own role or be removed from your document.": "U bent de enige eigenaar van deze groep, maak een ander lid de groepseigenaar voordat u uw eigen rol kunt wijzigen of kan worden verwijderd van het document.",
       "Your current document will revert to this version.": "Uw huidige document wordt teruggezet naar deze versie.",
       "Your {{format}} was downloaded succesfully": "Jouw {{format}} is succesvol gedownload",
+      "More options": "Meer opties",
+      "Add child document": "Onderliggend document toevoegen",
       "home-content-open-source-part1": "Docs is gebouwd op <2>Django Rest Framework</2> en <6>Next.js</6>. We gebruiken ook <9>Yjs</9> en <13>BlockNote.js</13>, twee projecten die we met trots sponsoren.",
       "home-content-open-source-part2": "U kunt Docs eenvoudig zelf hosten (zie onze <2>installatiedocumentatie</2>).<br/>Docs gebruikt een <7>licentie</7> (MIT) die is afgestemd op innovatie en ondernemingen.<br/>Bijdragen zijn welkom (zie onze routekaart <13>hier</13>).",
       "home-content-open-source-part3": "Docs is het resultaat van een gezamenlijke inspanning geleid door de Franse 🇫🇷🥖 <1>(DINUM)</1> en Duitse 🇩🇪🥨 <5>(ZenDiS)</5> overheden."