✨(frontend) make delete buttons nvda-accessible

add aria-labels and include close button in title prop so NVDA announces actions

Signed-off-by: Cyril <c.gromoff@gmail.com>

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 ({
@@ -136,23 +131,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`);
@@ -218,11 +203,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) =>
@@ -233,11 +214,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);
@@ -279,21 +256,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`);
@@ -329,23 +298,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 +350,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`);
@@ -469,12 +418,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`);
@@ -536,12 +480,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`);

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

@@ -155,7 +155,9 @@ test.describe('Doc Header', () => {
 
     await page.getByRole('button', { name: 'Share' }).click();
 
-    const shareModal = page.getByLabel('Share modal');
+    const shareModal = page.getByRole('dialog', {
+      name: 'Share modal content',
+    });
     await expect(shareModal).toBeVisible();
     await expect(page.getByText('Share the document')).toBeVisible();
 
@@ -581,7 +583,10 @@ test.describe('Documents Header mobile', () => {
     await page.getByLabel('Open the document options').click();
     await page.getByLabel('Share').click();
 
-    await expect(page.getByLabel('Share modal')).toBeVisible();
+    const shareModal = page.getByRole('dialog', {
+      name: 'Share modal content',
+    });
+    await expect(shareModal).toBeVisible();
     await page.getByRole('button', { name: 'close' }).click();
     await expect(page.getByLabel('Share modal')).toBeHidden();
   });

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