✨(frontend) improve modal a11y: structure, labels, and title

added aria-label, structured text in p, and added title for better accessibility

Signed-off-by: Cyril <[email protected]>

Author: Ovgodd

CHANGELOG.md

@@ -8,9 +8,12 @@ and this project adheres to
 
 ## [Unreleased]
 
-### Added 
+### Added
 
 - ✨(api) add API route to fetch document content #1206
+- ♿(frontend) improve accessibility:
+  - #1349
+  - #1271
 
 ### Changed
 
@@ -38,7 +41,6 @@ and this project adheres to
   - ♿(frontend) improve accessibility for decorative images in editor #1282
   - #1338
   - #1281
-  - #1271
 - ♻️(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-editor.spec.ts

@@ -463,12 +463,14 @@ test.describe('Doc Editor', () => {
     await expect(
       page.getByRole('button', {
         name: 'Download',
+        exact: true,
       }),
     ).toBeVisible();
 
     void page
       .getByRole('button', {
         name: 'Download',
+        exact: true,
       })
       .click();
 

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

@@ -38,7 +38,9 @@ test.describe('Doc Export', () => {
     ).toBeVisible();
     await expect(page.getByRole('combobox', { name: 'Format' })).toBeVisible();
     await expect(
-      page.getByRole('button', { name: 'Close the modal' }),
+      page.getByRole('button', {
+        name: 'Close the download modal',
+      }),
     ).toBeVisible();
     await expect(page.getByTestId('doc-export-download-button')).toBeVisible();
   });

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

@@ -149,7 +149,7 @@ test.describe('Document grid item options', () => {
 
     await page
       .getByRole('button', {
-        name: 'Confirm deletion',
+        name: 'Delete document',
       })
       .click();
 

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

@@ -100,7 +100,7 @@ test.describe('Doc Header', () => {
 
     await page
       .getByRole('button', {
-        name: 'Confirm deletion',
+        name: 'Delete document',
       })
       .click();
 

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

@@ -33,7 +33,7 @@ test.describe('Document search', () => {
     ).toBeVisible();
 
     await expect(
-      page.getByLabel('Search modal').getByText('search'),
+      page.getByRole('heading', { name: 'Search docs' }),
     ).toBeVisible();
 
     const inputSearch = page.getByPlaceholder('Type the name of a document');
@@ -79,7 +79,7 @@ test.describe('Document search', () => {
 
     await page.keyboard.press('Control+k');
     await expect(
-      page.getByLabel('Search modal').getByText('search'),
+      page.getByRole('heading', { name: 'Search docs' }),
     ).toBeVisible();
 
     await page.keyboard.press('Escape');

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

@@ -30,15 +30,23 @@ export const AlertModal = ({
       isOpen={isOpen}
       size={ModalSize.MEDIUM}
       onClose={onClose}
+      aria-describedby="alert-modal-title"
       title={
-        <Text $size="h6" $align="flex-start" $variation="1000">
+        <Text
+          $size="h6"
+          as="h1"
+          $margin="0"
+          id="alert-modal-title"
+          $align="flex-start"
+          $variation="1000"
+        >
           {title}
         </Text>
       }
       rightActions={
         <>
           <Button
-            aria-label={t('Close the modal')}
+            aria-label={`${t('Cancel')} - ${title}`}
             color="secondary"
             fullWidth
             onClick={() => onClose()}
@@ -55,12 +63,11 @@ export const AlertModal = ({
         </>
       }
     >
-      <Box
-        aria-label={t('Confirmation button')}
-        className="--docs--alert-modal"
-      >
+      <Box className="--docs--alert-modal">
         <Box>
-          <Text $variation="600">{description}</Text>
+          <Text $variation="600" as="p">
+            {description}
+          </Text>
         </Box>
       </Box>
     </Modal>

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

@@ -19,10 +19,11 @@ export const ModalConfirmDownloadUnsafe = ({
       isOpen
       closeOnClickOutside
       onClose={() => onClose()}
+      aria-describedby="modal-confirm-download-unsafe-title"
       rightActions={
         <>
           <Button
-            aria-label={t('Close the modal')}
+            aria-label={t('Cancel the download')}
             color="secondary"
             onClick={() => onClose()}
           >
@@ -31,6 +32,7 @@ export const ModalConfirmDownloadUnsafe = ({
           <Button
             aria-label={t('Download')}
             color="danger"
+            data-testid="modal-download-unsafe-button"
             onClick={() => {
               if (onConfirm) {
                 void onConfirm();
@@ -45,6 +47,8 @@ export const ModalConfirmDownloadUnsafe = ({
       size={ModalSize.SMALL}
       title={
         <Text
+          as="h1"
+          id="modal-confirm-download-unsafe-title"
           $gap="0.7rem"
           $size="h6"
           $align="flex-start"

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

@@ -133,10 +133,11 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => {
       closeOnClickOutside
       onClose={() => onClose()}
       hideCloseButton
+      aria-describedby="modal-export-title"
       rightActions={
         <>
           <Button
-            aria-label={t('Close the modal')}
+            aria-label={t('Cancel the download')}
             color="secondary"
             fullWidth
             onClick={() => onClose()}
@@ -165,6 +166,9 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => {
           $width="100%"
         >
           <Text
+            as="h1"
+            $margin="0"
+            id="modal-export-title"
             $size="h6"
             $variation="1000"
             $align="flex-start"
@@ -186,7 +190,7 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => {
         $gap="1rem"
         className="--docs--modal-export-content"
       >
-        <Text $variation="600" $size="sm">
+        <Text $variation="600" $size="sm" as="p">
           {t('Download your document in a .docx or .pdf format.')}
         </Text>
         <Select

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

@@ -56,18 +56,19 @@ export const ModalRemoveDoc = ({
       closeOnClickOutside
       hideCloseButton
       onClose={() => onClose()}
+      aria-describedby="modal-remove-doc-title"
       rightActions={
         <>
           <Button
-            aria-label={t('Close the delete modal')}
+            aria-label={t('Cancel the deletion')}
             color="secondary"
             fullWidth
             onClick={() => onClose()}
           >
             {t('Cancel')}
           </Button>
           <Button
-            aria-label={t('Confirm deletion')}
+            aria-label={t('Delete document')}
             color="danger"
             fullWidth
             onClick={() =>
@@ -90,8 +91,9 @@ export const ModalRemoveDoc = ({
         >
           <Text
             $size="h6"
-            as="h6"
-            $margin={{ all: '0' }}
+            as="h1"
+            id="modal-remove-doc-title"
+            $margin="0"
             $align="flex-start"
             $variation="1000"
           >
@@ -104,12 +106,9 @@ export const ModalRemoveDoc = ({
         </Box>
       }
     >
-      <Box
-        aria-label={t('Content modal to delete document')}
-        className="--docs--modal-remove-doc"
-      >
+      <Box className="--docs--modal-remove-doc">
         {!isError && (
-          <Text $size="sm" $variation="600" $display="inline-block">
+          <Text $size="sm" $variation="600" $display="inline-block" as="p">
             <Trans t={t}>
               This document and <strong>any sub-documents</strong> will be
               permanently deleted. This action is irreversible.