✨(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>

Author: Ovgodd

CHANGELOG.md

@@ -27,6 +27,7 @@ and this project adheres to
   - ♿️(frontend) keyboard interaction with menu #1244
   - ♿(frontend) improve header accessibility #1270
   - ♿(frontend) improve accessibility for decorative images in editor #1282
+  - #1281
 - ♻️(backend) fallback to email identifier when no name #1298
 - 🐛(backend) allow ASCII characters in user sub field #1295 
 - ⚡️(frontend) improve fallback width calculation #1333

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

src/frontend/apps/impress/src/components/index.ts

@@ -1,4 +1,4 @@
-export * from './AlertModal';
+export * from './modal/AlertModal';
 export * from './Box';
 export * from './BoxButton';
 export * from './Card';
@@ -9,7 +9,7 @@ export * from './Icon';
 export * from './InfiniteScroll';
 export * from './Link';
 export * from './Loading';
-export * from './SideModal';
+export * from './modal/SideModal';
 export * from './separators';
 export * from './Text';
 export * from './TextErrors';

src/frontend/apps/impress/src/components/AlertModal.tsx renamed to src/frontend/apps/impress/src/components/modal/AlertModal.tsx

@@ -2,8 +2,8 @@ import { Button, Modal, ModalSize } from '@openfun/cunningham-react';
 import { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { Box } from './Box';
-import { Text } from './Text';
+import { Box } from '../Box';
+import { Text } from '../Text';
 
 export type AlertModalProps = {
   description: ReactNode;

src/frontend/apps/impress/src/components/modal/ButtonCloseModal.tsx

@@ -0,0 +1,22 @@
+import { Button, type ButtonProps } from '@openfun/cunningham-react';
+import React from 'react';
+
+import { Box } from '@/components';
+
+const ButtonCloseModal = (props: ButtonProps) => {
+  return (
+    <Button
+      type="button"
+      size="small"
+      color="primary-text"
+      icon={
+        <Box as="span" aria-hidden="true" className="material-icons-filled">
+          close
+        </Box>
+      }
+      {...props}
+    />
+  );
+};
+
+export default ButtonCloseModal;

src/frontend/apps/impress/src/components/SideModal.tsx renamed to src/frontend/apps/impress/src/components/modal/SideModal.tsx

@@ -16,6 +16,7 @@ import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
 
 import { Box, Text } from '@/components';
+import ButtonCloseModal from '@/components/modal/ButtonCloseModal';
 import { useEditorStore } from '@/docs/doc-editor';
 import { Doc, useTrans } from '@/docs/doc-management';
 
@@ -131,6 +132,7 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => {
       isOpen
       closeOnClickOutside
       onClose={() => onClose()}
+      hideCloseButton
       rightActions={
         <>
           <Button
@@ -148,16 +150,34 @@ 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>
+          <ButtonCloseModal
+            aria-label={t('Close the download modal')}
+            onClick={() => onClose()}
+            disabled={isExporting}
+          />
+        </Box>
       }
     >
       <Box

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

@@ -10,6 +10,7 @@ import { useRouter } from 'next/router';
 import { Trans, useTranslation } from 'react-i18next';
 
 import { Box, Text, TextErrors } from '@/components';
+import ButtonCloseModal from '@/components/modal/ButtonCloseModal';
 
 import { useRemoveDoc } from '../api/useRemoveDoc';
 import { Doc } from '../types';
@@ -53,11 +54,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 +82,26 @@ 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>
+          <ButtonCloseModal
+            aria-label={t('Close the delete modal')}
+            onClick={() => onClose()}
+          />
+        </Box>
       }
     >
       <Box