suitenumerique · Ovgodd · Aug 11, 2025 · AntoLC · Aug 12, 2025
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -17,6 +17,7 @@ and this project adheres to
   - #1262
   - #1244
   - #1270
+  - #1281
 
 ### Fixed
 

diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-export.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-export.spec.ts
@@ -29,12 +29,7 @@ test.describe('Doc Export', () => {
       })
       .click();
 
-    await expect(
-      page
-        .locator('div')
-        .filter({ hasText: /^Download$/ })
-        .first(),
-    ).toBeVisible();
+    await expect(page.getByTestId('modal-export-title')).toBeVisible();
     await expect(
       page.getByText('Download your document in a .docx or .pdf format.'),
     ).toBeVisible();
@@ -45,7 +40,7 @@ test.describe('Doc Export', () => {
     await expect(
       page.getByRole('button', { name: 'Close the modal' }),
     ).toBeVisible();
-    await expect(page.getByRole('button', { name: 'Download' })).toBeVisible();
+    await expect(page.getByTestId('modal-download-button')).toBeVisible();
   });
 
   test('it exports the doc with pdf line break', async ({
@@ -122,7 +117,9 @@ test.describe('Doc Export', () => {
     const fileChooser = await fileChooserPromise;
     await fileChooser.setFiles(path.join(__dirname, 'assets/test.svg'));
 
-    const image = page.getByRole('img', { name: 'test.svg' });
+    const image = page
+      .locator('.--docs--editor-container img.bn-visual-media')
+      .first();
 
     await expect(image).toBeVisible();
 
@@ -136,23 +133,13 @@ test.describe('Doc Export', () => {
     await page.getByRole('combobox', { name: 'Format' }).click();
     await page.getByRole('option', { name: 'Docx' }).click();
 
-    await expect(
-      page.getByRole('button', {
-        name: 'Download',
-        exact: true,
-      }),
-    ).toBeVisible();
+    await expect(page.getByTestId('modal-download-button')).toBeVisible();
 
     const downloadPromise = page.waitForEvent('download', (download) => {
       return download.suggestedFilename().includes(`${randomDoc}.docx`);
     });
 
-    void page
-      .getByRole('button', {
-        name: 'Download',
-        exact: true,
-      })
-      .click();
+    void page.getByTestId('modal-download-button').click();
 
     const download = await downloadPromise;
     expect(download.suggestedFilename()).toBe(`${randomDoc}.docx`);
@@ -182,7 +169,9 @@ test.describe('Doc Export', () => {
     const fileChooser = await fileChooserPromise;
     await fileChooser.setFiles(path.join(__dirname, 'assets/test.svg'));
 
-    const image = page.getByRole('img', { name: 'test.svg' });
+    const image = page
+      .locator('.--docs--editor-container img.bn-visual-media')
+      .first();
 
     await expect(image).toBeVisible();
 
@@ -216,11 +205,7 @@ test.describe('Doc Export', () => {
 
     await new Promise((resolve) => setTimeout(resolve, 1000));
 
-    await expect(
-      page.getByRole('button', {
-        name: 'Download',
-      }),
-    ).toBeVisible();
+    await expect(page.getByTestId('modal-download-button')).toBeVisible();
 
     const responseCorsPromise = page.waitForResponse(
       (response) =>
@@ -231,11 +216,7 @@ test.describe('Doc Export', () => {
       return download.suggestedFilename().includes(`${randomDoc}.pdf`);
     });
 
-    void page
-      .getByRole('button', {
-        name: 'Download',
-      })
-      .click();
+    void page.getByTestId('modal-download-button').click();
 
     const responseCors = await responseCorsPromise;
     expect(responseCors.ok()).toBe(true);
@@ -277,21 +258,13 @@ test.describe('Doc Export', () => {
       })
       .click();
 
-    await expect(
-      page.getByRole('button', {
-        name: 'Download',
-      }),
-    ).toBeVisible();
+    await expect(page.getByTestId('modal-download-button')).toBeVisible();
 
     const downloadPromise = page.waitForEvent('download', (download) => {
       return download.suggestedFilename().includes(`${randomDoc}.pdf`);
     });
 
-    void page
-      .getByRole('button', {
-        name: 'Download',
-      })
-      .click();
+    void page.getByTestId('modal-download-button').click();
 
     const download = await downloadPromise;
     expect(download.suggestedFilename()).toBe(`${randomDoc}.pdf`);
@@ -328,23 +301,13 @@ test.describe('Doc Export', () => {
       })
       .click();
 
-    await expect(
-      page.getByRole('button', {
-        name: 'Download',
-        exact: true,
-      }),
-    ).toBeVisible();
+    await expect(page.getByTestId('modal-download-button')).toBeVisible();
 
     const downloadPromise = page.waitForEvent('download', (download) => {
       return download.suggestedFilename().includes(`${randomDoc}.pdf`);
     });
 
-    void page
-      .getByRole('button', {
-        name: 'Download',
-        exact: true,
-      })
-      .click();
+    void page.getByTestId('modal-download-button').click();
 
     const download = await downloadPromise;
     expect(download.suggestedFilename()).toBe(`${randomDoc}.pdf`);
@@ -391,23 +354,13 @@ test.describe('Doc Export', () => {
       })
       .click();
 
-    await expect(
-      page.getByRole('button', {
-        name: 'Download',
-        exact: true,
-      }),
-    ).toBeVisible();
+    await expect(page.getByTestId('modal-download-button')).toBeVisible();
 
     const downloadPromise = page.waitForEvent('download', (download) => {
       return download.suggestedFilename().includes(`${randomDoc}.pdf`);
     });
 
-    void page
-      .getByRole('button', {
-        name: 'Download',
-        exact: true,
-      })
-      .click();
+    void page.getByTestId('modal-download-button').click();
 
     const download = await downloadPromise;
     expect(download.suggestedFilename()).toBe(`${randomDoc}.pdf`);
@@ -470,12 +423,7 @@ test.describe('Doc Export', () => {
       return download.suggestedFilename().includes(`${randomDocFrench}.pdf`);
     });
 
-    void page
-      .getByRole('button', {
-        name: 'Télécharger',
-        exact: true,
-      })
-      .click();
+    void page.getByTestId('modal-download-button').click();
 
     const download = await downloadPromise;
     expect(download.suggestedFilename()).toBe(`${randomDocFrench}.pdf`);
@@ -538,12 +486,7 @@ test.describe('Doc Export', () => {
       })
       .click();
 
-    void page
-      .getByRole('button', {
-        name: 'Download',
-        exact: true,
-      })
-      .click();
+    void page.getByTestId('modal-download-button').click();
 
     const download = await downloadPromise;
     expect(download.suggestedFilename()).toBe(`${docChild}.pdf`);

diff --git a/src/frontend/apps/e2e/__tests__/app-impress/home.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/home.spec.ts
@@ -72,6 +72,7 @@ test.describe('Home page', () => {
     await page.waitForLoadState('domcontentloaded');
 
     // Wait a bit more for the responsive store to be initialized
+    // eslint-disable-next-line playwright/no-wait-for-timeout
     await page.waitForTimeout(500);
 
     // Check header content

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
@@ -131,6 +131,7 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => {
       isOpen
       closeOnClickOutside
       onClose={() => onClose()}
+      hideCloseButton
       rightActions={
         <>
           <Button
@@ -148,16 +149,45 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => {
             fullWidth
             onClick={() => void onSubmit()}
             disabled={isExporting}
+            data-testid="modal-download-button"
           >
             {t('Download')}
           </Button>
         </>
       }
       size={ModalSize.MEDIUM}
       title={
-        <Text $size="h6" $variation="1000" $align="flex-start">
-          {t('Download')}
-        </Text>
+        <Box
+          $direction="row"
+          $justify="space-between"
+          $align="center"
+          $width="100%"
+        >
+          <Text
+            $size="h6"
+            $variation="1000"
+            $align="flex-start"
+            data-testid="modal-export-title"
+          >
+            {t('Download')}
+          </Text>
+          <Button
+            aria-label={t('Close the download modal')}
+            size="small"
+            color="primary-text"
+            onClick={() => onClose()}
+            disabled={isExporting}
+            icon={
+              <Box
+                as="span"
+                aria-hidden="true"
+                className="material-icons-filled"
+              >
+                close
+              </Box>
+            }
+          />
+        </Box>
       }
     >
       <Box

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
@@ -9,7 +9,7 @@ import { usePathname } from 'next/navigation';
 import { useRouter } from 'next/router';
 import { Trans, useTranslation } from 'react-i18next';
 
-import { Box, Text, TextErrors } from '@/components';
+import { Box, Icon, Text, TextErrors } from '@/components';
 
 import { useRemoveDoc } from '../api/useRemoveDoc';
 import { Doc } from '../types';
@@ -53,11 +53,12 @@ export const ModalRemoveDoc = ({
     <Modal
       isOpen
       closeOnClickOutside
+      hideCloseButton
       onClose={() => onClose()}
       rightActions={
         <>
           <Button
-            aria-label={t('Close the modal')}
+            aria-label={t('Close the delete modal')}
             color="secondary"
             fullWidth
             onClick={() => onClose()}
@@ -80,15 +81,29 @@ export const ModalRemoveDoc = ({
       }
       size={ModalSize.MEDIUM}
       title={
-        <Text
-          $size="h6"
-          as="h6"
-          $margin={{ all: '0' }}
-          $align="flex-start"
-          $variation="1000"
+        <Box
+          $direction="row"
+          $justify="space-between"
+          $align="center"
+          $width="100%"
         >
-          {t('Delete a doc')}
-        </Text>
+          <Text
+            $size="h6"
+            as="h6"
+            $margin={{ all: '0' }}
+            $align="flex-start"
+            $variation="1000"
+          >
+            {t('Delete a doc')}
+          </Text>
+          <Button
+            aria-label={t('Close the delete modal')}
+            size="small"
+            color="primary-text"
+            onClick={() => onClose()}
+            icon={<Icon iconName="close" />}
+          />
+        </Box>
       }
     >
       <Box

diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareAccessRequest.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareAccessRequest.tsx
@@ -100,6 +100,7 @@ const DocShareAccessRequestItem = ({ doc, accessRequest }: Props) => {
                     docId: doc.id,
                   })
                 }
+                aria-label={t('Close the access request modal')}
               >
                 <Icon iconName="close" $variation="600" $size="16px" />
               </BoxButton>

diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModal.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModal.tsx
@@ -1,4 +1,4 @@
-import { Modal, ModalSize } from '@openfun/cunningham-react';
+import { Button, Modal, ModalSize } from '@openfun/cunningham-react';
 import { useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { createGlobalStyle, css } from 'styled-components';
@@ -137,12 +137,29 @@ export const DocShareModal = ({ doc, onClose, isRootDoc = true }: Props) => {
         aria-label={t('Share modal')}
         size={isDesktop ? ModalSize.LARGE : ModalSize.FULL}
         onClose={onClose}
-        title={<Box $align="flex-start">{t('Share the document')}</Box>}
+        title={
+          <Box $direction="row" $justify="space-between" $align="center">
+            <Box $align="flex-start">{t('Share the document')}</Box>
+            <Button
+              aria-label={t('Close the modal')}
+              size="small"
+              color="primary-text"
+              onClick={onClose}
+              icon={
+                <Box aria-hidden="true" className="material-icons-filled">
+                  close
+                </Box>
+              }
+            />
+          </Box>
+        }
+        hideCloseButton
       >
         <ShareModalStyle />
         <Box
           aria-label={t('Share modal')}
-          $height={canViewAccesses ? modalContentHeight : 'auto'}
+          $height="auto"
+          $maxHeight={canViewAccesses ? modalContentHeight : 'none'}
           $overflow="hidden"
           className="--docs--doc-share-modal noPadding "
           $justify="space-between"

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
@@ -118,6 +118,7 @@ export const ModalSelectVersion = ({
                   onClick={onClose}
                   size="nano"
                   color="primary-text"
+                  aria-label={t('Close the version history modal')}
                   icon={<Icon iconName="close" />}
                 />
               </Box>
-Original file line number
+Diff line change
@@ Expand Up / @@ -17,6 +17,7 @@ and this project adheres to @@
       - #1262
       - #1244
       - #1270
+      - #1281
     ### Fixed
@@ Expand Down @@