From 7cf144e0de7f4b4836a9b05578562e4e78c639df Mon Sep 17 00:00:00 2001
From: Cyril <c.gromoff@gmail.com>
Date: Mon, 16 Mar 2026 13:55:03 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BF=EF=B8=8F(frontend)=20fix=20modal=20ar?=
 =?UTF-8?q?ia-label=20object=20Object?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add aria-label on modals with JSX title to avoid returning object Object
---
 CHANGELOG.md                                             | 1 +
 .../apps/e2e/__tests__/app-impress/doc-version.spec.ts   | 4 ++--
 .../apps/impress/src/components/modal/AlertModal.tsx     | 2 +-
 .../BlockNoteToolBar/ModalConfirmDownloadUnsafe.tsx      | 9 +++------
 .../features/docs/doc-export/components/ModalExport.tsx  | 2 +-
 .../features/docs/doc-header/components/AlertNetwork.tsx | 7 ++-----
 .../docs/doc-management/components/ModalRemoveDoc.tsx    | 2 +-
 .../docs/doc-search/components/DocSearchModal.tsx        | 1 -
 .../components/ModalConfirmationVersion.tsx              | 2 +-
 .../doc-versioning/components/ModalSelectVersion.tsx     | 3 +--
 .../features/docs/docs-grid/components/DocMoveModal.tsx  | 1 -
 11 files changed, 13 insertions(+), 21 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a0fa37f3..60c732c6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,6 +16,7 @@ and this project adheres to
 - 🙈(docker) add **/.next to .dockerignore #2034
 - ♿️(frontend) fix share modal heading hierarchy #2007
 - ♿️(frontend) fix Copy link toast accessibility for screen readers #2029
+- ♿️(frontend) fix modal aria-label and name #2014
 
 ## [v4.8.1] - 2026-03-17
 
diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-version.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-version.spec.ts
index 38604672..799f0b73 100644
--- a/src/frontend/apps/e2e/__tests__/app-impress/doc-version.spec.ts
+++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-version.spec.ts
@@ -23,7 +23,7 @@ test.describe('Doc Version', () => {
     await page.getByRole('menuitem', { name: 'Version history' }).click();
     await expect(page.getByText('History', { exact: true })).toBeVisible();
 
-    const modal = page.getByLabel('version history modal');
+    const modal = page.getByRole('dialog', { name: 'Version history' });
     const panel = modal.getByLabel('version list');
     await expect(panel).toBeVisible();
     await expect(modal.getByText('No versions')).toBeVisible();
@@ -155,7 +155,7 @@ test.describe('Doc Version', () => {
     await page.getByLabel('Open the document options').click();
     await page.getByRole('menuitem', { name: 'Version history' }).click();
 
-    const modal = page.getByLabel('version history modal');
+    const modal = page.getByRole('dialog', { name: 'Version history' });
     const panel = modal.getByLabel('version list');
     await expect(panel).toBeVisible();
 
diff --git a/src/frontend/apps/impress/src/components/modal/AlertModal.tsx b/src/frontend/apps/impress/src/components/modal/AlertModal.tsx
index 0c1366d9..26a2ac80 100644
--- a/src/frontend/apps/impress/src/components/modal/AlertModal.tsx
+++ b/src/frontend/apps/impress/src/components/modal/AlertModal.tsx
@@ -56,7 +56,7 @@ export const AlertModal = ({
       isOpen={isOpen}
       size={ModalSize.MEDIUM}
       onClose={onClose}
-      aria-describedby="alert-modal-title"
+      aria-label={title}
       title={
         <Text
           $size="h6"
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/ModalConfirmDownloadUnsafe.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/ModalConfirmDownloadUnsafe.tsx
index 1998ad83..197463f0 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/ModalConfirmDownloadUnsafe.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/ModalConfirmDownloadUnsafe.tsx
@@ -19,7 +19,7 @@ export const ModalConfirmDownloadUnsafe = ({
       isOpen
       closeOnClickOutside
       onClose={() => onClose()}
-      aria-describedby="modal-confirm-download-unsafe-title"
+      aria-label={t('Warning')}
       rightActions={
         <>
           <Button
@@ -48,7 +48,7 @@ export const ModalConfirmDownloadUnsafe = ({
       size={ModalSize.SMALL}
       title={
         <Text
-          as="h1"
+          as="h2"
           id="modal-confirm-download-unsafe-title"
           $gap="0.7rem"
           $size="h6"
@@ -61,10 +61,7 @@ export const ModalConfirmDownloadUnsafe = ({
         </Text>
       }
     >
-      <Box
-        aria-label={t('Modal confirmation to download the attachment')}
-        className="--docs--modal-confirm-download-unsafe"
-      >
+      <Box className="--docs--modal-confirm-download-unsafe">
         <Box>
           <Box $direction="column" $gap="0.35rem" $margin={{ top: 'sm' }}>
             <Text $variation="secondary">
diff --git a/src/frontend/apps/impress/src/features/docs/doc-export/components/ModalExport.tsx b/src/frontend/apps/impress/src/features/docs/doc-export/components/ModalExport.tsx
index 985aceea..301a919d 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-export/components/ModalExport.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-export/components/ModalExport.tsx
@@ -196,6 +196,7 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => {
       closeOnClickOutside
       onClose={() => onClose()}
       hideCloseButton
+      aria-label={t('Export')}
       aria-describedby="modal-export-title"
       rightActions={
         <>
@@ -247,7 +248,6 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => {
     >
       <Box
         $margin={{ bottom: 'xl' }}
-        aria-label={t('Content modal to export the document')}
         $gap="1rem"
         className="--docs--modal-export-content"
       >
diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/AlertNetwork.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/AlertNetwork.tsx
index d7dc0409..a0837fee 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-header/components/AlertNetwork.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/AlertNetwork.tsx
@@ -73,6 +73,7 @@ export const AlertNetworkModal = ({ onClose }: AlertNetworkModalProps) => {
       isOpen
       closeOnClickOutside
       onClose={() => onClose()}
+      aria-label={t("Why you can't edit the document?")}
       rightActions={
         <>
           <Button
@@ -92,11 +93,7 @@ export const AlertNetworkModal = ({ onClose }: AlertNetworkModalProps) => {
         </Text>
       }
     >
-      <Box
-        aria-label={t('Content modal to explain why the user cannot edit')}
-        className="--docs--modal-alert-network"
-        $margin={{ top: 'md' }}
-      >
+      <Box className="--docs--modal-alert-network" $margin={{ top: 'md' }}>
         <Text $size="sm" $variation="secondary">
           {t(
             'Others are editing this document. Unfortunately your network blocks WebSockets, the technology enabling real-time co-editing.',
diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/components/ModalRemoveDoc.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/components/ModalRemoveDoc.tsx
index fe5063ee..e529d653 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-management/components/ModalRemoveDoc.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-management/components/ModalRemoveDoc.tsx
@@ -90,7 +90,7 @@ export const ModalRemoveDoc = ({
       closeOnClickOutside
       hideCloseButton
       onClose={handleClose}
-      aria-describedby="modal-remove-doc-title"
+      aria-label={t('Delete a doc')}
       rightActions={
         <>
           <Button
diff --git a/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchModal.tsx b/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchModal.tsx
index f4cf0b1d..090eb744 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchModal.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchModal.tsx
@@ -62,7 +62,6 @@ const DocSearchModalGlobal = ({
       aria-describedby="doc-search-modal-title"
     >
       <Box
-        aria-label={t('Search modal')}
         $direction="column"
         $justify="space-between"
         className="--docs--doc-search-modal"
diff --git a/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalConfirmationVersion.tsx b/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalConfirmationVersion.tsx
index c5d3b1ae..a0002661 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalConfirmationVersion.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalConfirmationVersion.tsx
@@ -69,7 +69,7 @@ export const ModalConfirmationVersion = ({
       isOpen
       closeOnClickOutside
       onClose={() => onClose()}
-      aria-describedby="modal-confirmation-version-title"
+      aria-label={t('Warning')}
       rightActions={
         <>
           <Button
diff --git a/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalSelectVersion.tsx b/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalSelectVersion.tsx
index 8df6cbd6..8000a3f8 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalSelectVersion.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalSelectVersion.tsx
@@ -60,11 +60,10 @@ export const ModalSelectVersion = ({
         closeOnClickOutside={true}
         size={ModalSize.EXTRA_LARGE}
         onClose={onClose}
-        aria-describedby="modal-select-version-title"
+        aria-label={t('Version history')}
       >
         <NoPaddingStyle />
         <Box
-          aria-label="version history modal"
           className="--docs--modal-select-version noPadding"
           $direction="row"
           $height="100%"
diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocMoveModal.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocMoveModal.tsx
index f258bd87..ee43f5c1 100644
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocMoveModal.tsx
+++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocMoveModal.tsx
@@ -196,7 +196,6 @@ export const DocMoveModal = ({
         }
       >
         <Box
-          aria-label={t('Move modal')}
           $direction="column"
           $justify="space-between"
           className="--docs--doc-move-modal"