♿️(frontend) restore focus in docToolBox after modals

Use focus store to return focus to toolbar buttons.

src/frontend/apps/impress/src/features/docs/doc-header/components/BoutonShare.tsx

@@ -6,6 +6,7 @@ import { css } from 'styled-components';
 
 import { Box, Icon } from '@/components';
 import { Doc } from '@/docs/doc-management';
+import { useFocusStore } from '@/stores';
 
 interface BoutonShareProps {
   displayNbAccess: boolean;
@@ -23,6 +24,7 @@ export const BoutonShare = ({
   open,
 }: BoutonShareProps) => {
   const { t } = useTranslation();
+  const addLastFocus = useFocusStore((state) => state.addLastFocus);
   const treeContext = useTreeContext<Doc>();
 
   /**
@@ -63,7 +65,10 @@ export const BoutonShare = ({
               disabled={isDisabled}
             />
           }
-          onClick={open}
+          onClick={(e) => {
+            addLastFocus(e.currentTarget as HTMLElement);
+            open();
+          }}
           size="medium"
           disabled={isDisabled}
         >
@@ -77,7 +82,10 @@ export const BoutonShare = ({
     <Button
       color="brand"
       variant="tertiary"
-      onClick={open}
+      onClick={(e) => {
+        addLastFocus(e.currentTarget as HTMLElement);
+        open();
+      }}
       size="medium"
       disabled={isDisabled}
     >

src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx

@@ -44,7 +44,7 @@ import {
   KEY_LIST_DOC_VERSIONS,
   ModalSelectVersion,
 } from '@/docs/doc-versioning';
-import { useResponsiveStore } from '@/stores';
+import { useFocusStore, useResponsiveStore } from '@/stores';
 
 import { useCopyCurrentEditorToClipboard } from '../hooks/useCopyCurrentEditorToClipboard';
 
@@ -70,6 +70,7 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
   const selectHistoryModal = useModal();
   const modalShare = useModal();
 
+  const { addLastFocus, restoreFocus } = useFocusStore();
   const { isSmallMobile, isMobile } = useResponsiveStore();
   const copyDocLink = useCopyDocLink(doc.id);
   const { mutate: duplicateDoc } = useDuplicateDoc({
@@ -224,7 +225,8 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
             icon={
               <Icon iconName="download" $color="inherit" aria-hidden={true} />
             }
-            onClick={() => {
+            onClick={(e) => {
+              addLastFocus(e.currentTarget as HTMLElement);
               setIsModalExportOpen(true);
             }}
             size={isSmallMobile ? 'small' : 'medium'}
@@ -249,17 +251,29 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
 
       {modalShare.isOpen && (
         <DocShareModal
-          onClose={() => modalShare.close()}
+          onClose={() => {
+            modalShare.close();
+            restoreFocus();
+          }}
           doc={doc}
           isRootDoc={treeContext?.root?.id === doc.id}
         />
       )}
       {isModalExportOpen && ModalExport && (
-        <ModalExport onClose={() => setIsModalExportOpen(false)} doc={doc} />
+        <ModalExport
+          onClose={() => {
+            setIsModalExportOpen(false);
+            restoreFocus();
+          }}
+          doc={doc}
+        />
       )}
       {isModalRemoveOpen && (
         <ModalRemoveDoc
-          onClose={() => setIsModalRemoveOpen(false)}
+          onClose={() => {
+            setIsModalRemoveOpen(false);
+            restoreFocus();
+          }}
           doc={doc}
           onSuccess={() => {
             const isTopParent = doc.id === treeContext?.root?.id;
@@ -281,7 +295,10 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
       )}
       {selectHistoryModal.isOpen && (
         <ModalSelectVersion
-          onClose={() => selectHistoryModal.close()}
+          onClose={() => {
+            selectHistoryModal.close();
+            restoreFocus();
+          }}
           doc={doc}
         />
       )}