♿️(frontend) add focus on open to modals

Use autoFocus on primary button when opening modals.

Made-with: Cursor

Author: Ovgodd

CHANGELOG.md

@@ -37,6 +37,7 @@ and this project adheres to
 - 🚸(backend) sort user search results by proximity with the active user #1802
 - 🚸(oidc) ignore case when fallback on email #1880
 - ⚡️(CI) optimize Docker Hub workflow #1919
+- ♿️(frontend) add focus on open to modals #1948
 
 ### Fixed
 

src/frontend/apps/e2e/__tests__/app-impress/doc-grid-move.spec.ts

@@ -380,7 +380,9 @@ test.describe('Doc grid move', () => {
     await verifyDocName(page, titleDoc2);
 
     const docTree = page.getByTestId('doc-tree');
-    await expect(docTree.getByText(titleDoc1)).toBeVisible();
+    await expect(docTree.getByText(titleDoc1)).toBeVisible({
+      timeout: 15000,
+    });
 
     await cleanup();
   });

src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/ModalConfirmDownloadUnsafe.tsx

@@ -24,6 +24,7 @@ export const ModalConfirmDownloadUnsafe = ({
         <>
           <Button
             aria-label={t('Cancel the download')}
+            autoFocus
             variant="secondary"
             onClick={() => onClose()}
           >

src/frontend/apps/impress/src/features/docs/doc-export/components/ModalExport.tsx

@@ -203,6 +203,7 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => {
             aria-label={t('Cancel the download')}
             variant="secondary"
             fullWidth
+            autoFocus
             onClick={() => onClose()}
           >
             {t('Cancel')}

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

@@ -75,7 +75,12 @@ export const AlertNetworkModal = ({ onClose }: AlertNetworkModalProps) => {
       onClose={() => onClose()}
       rightActions={
         <>
-          <Button aria-label={t('OK')} onClick={onClose} color="error">
+          <Button
+            aria-label={t('OK')}
+            onClick={onClose}
+            color="error"
+            autoFocus
+          >
             {t('I understand')}
           </Button>
         </>

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

@@ -38,6 +38,7 @@ export const ModalRemoveDoc = ({
   const { push } = useRouter();
   const { hasChildren } = useDocUtils(doc);
   const cancelButtonRef = useRef<ButtonElement>(null);
+
   const {
     mutate: removeDoc,
     isError,
@@ -60,17 +61,14 @@ export const ModalRemoveDoc = ({
       },
     },
   });
-
+  // react-aria Popover restores focus to its trigger asynchronously
+  // when closing, which races with autoFocus when the modal is opened
+  // from a dropdown. This ensures focus wins after that restoration.
   useEffect(() => {
-    const TIMEOUT_MODAL_MOUNTING = 100;
-    const timeoutId = setTimeout(() => {
-      const buttonElement = cancelButtonRef.current;
-      if (buttonElement) {
-        buttonElement.focus();
-      }
-    }, TIMEOUT_MODAL_MOUNTING);
-
-    return () => clearTimeout(timeoutId);
+    const id = requestAnimationFrame(() => {
+      cancelButtonRef.current?.focus();
+    });
+    return () => cancelAnimationFrame(id);
   }, []);
 
   const keyboardAction = useKeyboardAction();
@@ -100,6 +98,7 @@ export const ModalRemoveDoc = ({
             aria-label={t('Cancel the deletion')}
             variant="secondary"
             fullWidth
+            autoFocus
             onClick={handleClose}
             onKeyDown={handleCloseKeyDown}
           >

src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalConfirmationVersion.tsx

@@ -76,6 +76,7 @@ export const ModalConfirmationVersion = ({
             aria-label={`${t('Cancel')} - ${t('Warning')}`}
             variant="secondary"
             fullWidth
+            autoFocus
             onClick={() => onClose()}
           >
             {t('Cancel')}

src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalSelectVersion.tsx

@@ -132,6 +132,7 @@ export const ModalSelectVersion = ({
                 </Text>
                 <ButtonCloseModal
                   aria-label={t('Close the version history modal')}
+                  autoFocus
                   onClick={onClose}
                   size="nano"
                 />