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

CHANGELOG.md

@@ -8,12 +8,13 @@ and this project adheres to
 
 ## [Unreleased]
 
-- ⚡️(frontend) improve accessibility:
-  - #1341
-
 ### Added
 
 - ✨(api) add API route to fetch document content #1206
+- ♿(frontend) improve accessibility:
+  - #1349
+  - #1271
+  - #1341
 
 ### Changed
 
@@ -41,7 +42,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.

src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchModal.tsx

@@ -5,7 +5,7 @@ import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDebouncedCallback } from 'use-debounce';
 
-import { Box } from '@/components';
+import { Box, Text } from '@/components';
 import ButtonCloseModal from '@/components/modal/ButtonCloseModal';
 import { QuickSearch } from '@/components/quick-search';
 import { Doc, useDocUtils } from '@/docs/doc-management';
@@ -65,13 +65,22 @@ const DocSearchModalGlobal = ({
       closeOnClickOutside
       size={isDesktop ? ModalSize.LARGE : ModalSize.FULL}
       hideCloseButton
+      aria-describedby="doc-search-modal-title"
     >
       <Box
         aria-label={t('Search modal')}
         $direction="column"
         $justify="space-between"
         className="--docs--doc-search-modal"
       >
+        <Text
+          as="h1"
+          $margin="0"
+          id="doc-search-modal-title"
+          className="sr-only"
+        >
+          {t('Search docs')}
+        </Text>
         <Box $position="absolute" $css="top: 12px; right: 12px;">
           <ButtonCloseModal
             aria-label={t('Close the search modal')}

src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModal.tsx

@@ -135,12 +135,20 @@ export const DocShareModal = ({ doc, onClose, isRootDoc = true }: Props) => {
         isOpen
         closeOnClickOutside
         data-testid="doc-share-modal"
-        aria-label={t('Share modal')}
+        aria-describedby="doc-share-modal-title"
         size={isDesktop ? ModalSize.LARGE : ModalSize.FULL}
         onClose={onClose}
         title={
           <Box $direction="row" $justify="space-between" $align="center">
-            <Box $align="flex-start">{t('Share the document')}</Box>
+            <Text
+              as="h1"
+              id="doc-share-modal-title"
+              $align="flex-start"
+              $size="small"
+              $weight="600"
+            >
+              {t('Share the document')}
+            </Text>
             <ButtonCloseModal
               aria-label={t('Close the share modal')}
               onClick={onClose}
@@ -199,6 +207,7 @@ export const DocShareModal = ({ doc, onClose, isRootDoc = true }: Props) => {
                     $textAlign="center"
                     $variation="600"
                     $size="sm"
+                    as="p"
                   >
                     {t(
                       'You can view this document but need additional access to see its members or modify settings.',

src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalConfirmationVersion.tsx

@@ -69,10 +69,11 @@ export const ModalConfirmationVersion = ({
       isOpen
       closeOnClickOutside
       onClose={() => onClose()}
+      aria-describedby="modal-confirmation-version-title"
       rightActions={
         <>
           <Button
-            aria-label={t('Close the modal')}
+            aria-label={`${t('Cancel')} - ${t('Warning')}`}
             color="secondary"
             fullWidth
             onClick={() => onClose()}
@@ -102,20 +103,24 @@ export const ModalConfirmationVersion = ({
       }
       size={ModalSize.SMALL}
       title={
-        <Text $size="h6" $align="flex-start" $variation="1000">
+        <Text
+          as="h1"
+          $margin="0"
+          id="modal-confirmation-version-title"
+          $size="h6"
+          $align="flex-start"
+          $variation="1000"
+        >
           {t('Warning')}
         </Text>
       }
     >
-      <Box
-        aria-label={t('Modal confirmation to restore the version')}
-        className="--docs--modal-confirmation-version"
-      >
+      <Box className="--docs--modal-confirmation-version">
         <Box>
-          <Text $variation="600">
+          <Text $variation="600" as="p">
             {t('Your current document will revert to this version.')}
           </Text>
-          <Text $variation="600">
+          <Text $variation="600" as="p">
             {t('If a member is editing, his works can be lost.')}
           </Text>
         </Box>

src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalSelectVersion.tsx

@@ -48,6 +48,7 @@ export const ModalSelectVersion = ({
         closeOnClickOutside={true}
         size={ModalSize.EXTRA_LARGE}
         onClose={onClose}
+        aria-describedby="modal-select-version-title"
       >
         <NoPaddingStyle />
         <Box
@@ -58,6 +59,14 @@ export const ModalSelectVersion = ({
           $maxHeight="calc(100vh - 2em - 12px)"
           $overflow="hidden"
         >
+          <Text
+            as="h1"
+            $margin="0"
+            id="modal-select-version-title"
+            className="sr-only"
+          >
+            {t('Version history')}
+          </Text>
           <Box
             $css={css`
               display: flex;