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

Ovgodd · Ovgodd · commit 53ceb7ad8d02 · 2025-08-13T13:03:13.000+02:00
adds focus style to make the sub-menu accessible unify dropdownmenu

Signed-off-by: Cyril &lt;c.gromoff@gmail.com&gt;
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -23,6 +23,8 @@ and this project adheres to
 - 🐛(makefile) Windows compatibility fix for Docker volume mounting #1264
 - 🐛(minio) fix user permission error with Minio and Windows #1264
 
+  - #1261
+
 
 ## [3.5.0] - 2025-07-31
 
diff --git a/src/frontend/apps/e2e/__tests__/app-impress/utils-sub-pages.ts b/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();
 };
diff --git a/src/frontend/apps/impress/src/components/dropdown-menu/DropdownMenu.tsx b/src/frontend/apps/impress/src/components/dropdown-menu/DropdownMenu.tsx
@@ -2,6 +2,7 @@ import { HorizontalSeparator } from '@gouvfr-lasuite/ui-kit';
 import {
   Fragment,
   PropsWithChildren,
+  ReactNode,
   useCallback,
   useEffect,
   useRef,
@@ -15,7 +16,7 @@ import { useCunninghamTheme } from '@/cunningham';
 import { useDropdownKeyboardNav } from './hook/useDropdownKeyboardNav';
 
 export type DropdownMenuOption = {
-  icon?: string;
+  icon?: string | ReactNode;
   label: string;
   testId?: string;
   value?: string;
@@ -79,14 +80,28 @@ export const DropdownMenu = ({
 
   // Focus selected menu item when menu opens
   useEffect(() => {
-    if (isOpen && menuItemRefs.current.length > 0) {
-      const selectedIndex = options.findIndex((option) => option.isSelected);
-      if (selectedIndex !== -1) {
-        setFocusedIndex(selectedIndex);
-        setTimeout(() => {
-          menuItemRefs.current[selectedIndex]?.focus();
-        }, 0);
-      }
+    if (!isOpen || menuItemRefs.current.length === 0) {
+      return;
+    }
+
+    const selectedIndex = options.findIndex((option) => option.isSelected);
+    if (selectedIndex !== -1) {
+      setFocusedIndex(selectedIndex);
+      setTimeout(() => {
+        menuItemRefs.current[selectedIndex]?.focus();
+      }, 0);
+      return;
+    }
+
+    // Fallback: focus first enabled/visible option
+    const firstEnabledIndex = options.findIndex(
+      (opt) => opt.show !== false && !opt.disabled,
+    );
+    if (firstEnabledIndex !== -1) {
+      setFocusedIndex(firstEnabledIndex);
+      setTimeout(() => {
+        menuItemRefs.current[firstEnabledIndex]?.focus();
+      }, 0);
     }
   }, [isOpen, options]);
 
@@ -153,7 +168,6 @@ export const DropdownMenu = ({
             return;
           }
           const isDisabled = option.disabled !== undefined && option.disabled;
-          const isFocused = index === focusedIndex;
 
           return (
             <Fragment key={option.label}>
@@ -204,32 +218,26 @@ export const DropdownMenu = ({
                   }
 
                   &:focus-visible {
-                    outline: 2px solid var(--c--theme--colors--primary-500);
-                    outline-offset: -2px;
                     background-color: var(--c--theme--colors--greyscale-050);
                   }
-
-                  ${isFocused &&
-                  css`
-                    outline: 2px solid var(--c--theme--colors--primary-500);
-                    outline-offset: -2px;
-                    background-color: var(--c--theme--colors--greyscale-050);
-                  `}
                 `}
               >
                 <Box
                   $direction="row"
                   $align="center"
                   $gap={spacingsTokens['base']}
                 >
-                  {option.icon && (
-                    <Icon
-                      $size="20px"
-                      $theme="greyscale"
-                      $variation={isDisabled ? '400' : '1000'}
-                      iconName={option.icon}
-                    />
-                  )}
+                  {option.icon &&
+                    (typeof option.icon === 'string' ? (
+                      <Icon
+                        $size="20px"
+                        $theme="greyscale"
+                        $variation={isDisabled ? '400' : '1000'}
+                        iconName={option.icon}
+                      />
+                    ) : (
+                      option.icon
+                    ))}
                   <Text $variation={isDisabled ? '400' : '1000'}>
                     {option.label}
                   </Text>
diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/components/SimpleDocItem.tsx b/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>
diff --git a/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx b/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;
 
diff --git a/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTree.tsx b/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;
               }
diff --git a/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTreeItemActions.tsx b/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"
diff --git a/src/frontend/apps/impress/src/i18n/translations.json b/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",
@@ -381,7 +383,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": {
@@ -566,6 +569,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>."
@@ -702,6 +707,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",
@@ -1133,6 +1140,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."

Original file line number	Diff line number	Diff line change
`@@ -87,13 +87,19 @@ export const DocSubPageItem = (props: TreeViewNodeProps<Doc>) => {`
`87`	`87`	`: 'var(--c--theme--colors--greyscale-000)'};`
`88`	`88`	`}`
`89`	`89`
	`90`	`+ &:focus-within .light-doc-item-actions {`
	`91`	`+ display: flex;`
	`92`	`+ background: var(--c--theme--colors--greyscale-100);`
	`93`	`+ }`
	`94`	`+`
`90`	`95`	`.c__tree-view--node.isSelected {`
`91`	`96`	`.light-doc-item-actions {`
`92`	`97`	`background: var(--c--theme--colors--greyscale-100);`
`93`	`98`	`}`
`94`	`99`	`}`
`95`	`100`
`96`		`- &:hover {`
	`101`	`+ &:hover,`
	`102`	`+ &:focus-within {`
`97`	`103`	`background-color: var(--c--theme--colors--greyscale-100);`
`98`	`104`	`border-radius: 4px;`
`99`	`105`
Original file line number	Diff line number	Diff line change
`@@ -189,7 +189,8 @@ export const DocTree = ({ currentDoc }: DocTreeProps) => {`
`189`	`189`	`opacity: 1;`
`190`	`190`	`}`
`191`	`191`	`}`
`192`		`- &:hover {`
	`192`	`+ &:hover,`
	`193`	`+ &:focus-within {`
`193`	`194`	`.doc-tree-root-item-actions {`
`194`	`195`	`opacity: 1;`
`195`	`196`	`}`