✨(frontend) make delete buttons nvda-accessible; add close to title aria-label

Ovgodd · Ovgodd · commit 8edc54009c10 · 2025-08-11T11:37:34.000+02:00
add aria-labels and include close button in title prop so NVDA announces actions

Signed-off-by: Cyril &lt;c.gromoff@gmail.com&gt;
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/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
@@ -155,9 +156,32 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => {
       }
       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">
+            {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>
diff --git a/src/frontend/apps/impress/src/i18n/translations.json b/src/frontend/apps/impress/src/i18n/translations.json
@@ -186,6 +186,9 @@
       "Can't load this page, please check your internet connection.": "Diese Seite kann nicht geladen werden. Bitte überprüfen Sie Ihre Internetverbindung.",
       "Cancel": "Abbrechen",
       "Close the modal": "Pop-up schließen",
+      "Close the access request modal": "Zugriffsanfrage-Modal schließen",
+      "Close the delete modal": "Lösch-Modal schließen",
+      "Close the version history modal": "Versionsverlauf-Modal schließen",
       "Collaborate": "Zusammenarbeiten",
       "Collaborate and write in real time, without layout constraints.": "In Echtzeit und ohne Layout-Beschränkungen schreiben und zusammenarbeiten.",
       "Collaborative writing, Simplified.": "Kollaboratives Schreiben, vereinfacht.",
@@ -375,6 +378,9 @@
       "Search docs": "Search docs",
       "More options": "More options",
       "Pinned documents": "Pinned documents",
+      "Close the access request modal": "Close the access request modal",
+      "Close the delete modal": "Close the delete modal",
+      "Close the version history modal": "Close the version history modal",
       "Open actions menu for document: {{title}}": "Open actions menu for document: {{title}}",
       "Open the menu of actions for the document: {{title}}": "Open the menu of actions for the document: {{title}}",
       "Share with {{count}} users_one": "Share with {{count}} user",
@@ -413,6 +419,9 @@
       "Can't load this page, please check your internet connection.": "No se puede cargar esta página, por favor compruebe su conexión a Internet.",
       "Cancel": "Cancelar",
       "Close the modal": "Cerrar modal",
+      "Close the access request modal": "Cerrar modal de solicitud de acceso",
+      "Close the delete modal": "Cerrar modal de eliminación",
+      "Close the version history modal": "Cerrar modal de historial de versiones",
       "Collaborate": "Colabora",
       "Collaborate and write in real time, without layout constraints.": "Colaborar y escribir en tiempo real, sin restricciones de diseño.",
       "Collaborative writing, Simplified.": "Escritura colaborativa, más sencilla.",
@@ -605,6 +614,10 @@
       "Can't load this page, please check your internet connection.": "Impossible de charger cette page, veuillez vérifier votre connexion Internet.",
       "Cancel": "Annuler",
       "Close the modal": "Fermer la modale",
+      "Close the access request modal": "Fermer la modale de demande d'accès",
+      "Close the delete modal": "Fermer la modale de suppression",
+      "Close the download modal": "Fermer la modale de téléchargement",
+      "Close the version history modal": "Fermer la modale d'historique des versions",
       "Collaborate": "Collaborer",
       "Collaborate and write in real time, without layout constraints.": "Collaborez et rédigez en temps réel, sans contrainte de mise en page.",
       "Collaborative writing, Simplified.": "L'écriture collaborative simplifiée.",
@@ -769,6 +782,10 @@
       "Summarize": "Résumer",
       "Summary": "Sommaire",
       "Template": "Modèle",
+      "Document template": "Modèle de document",
+      "File format": "Format de fichier",
+      "Choose a template to apply to your document before download": "Choisissez un modèle à appliquer à votre document avant le téléchargement",
+      "Choose the file format for your download": "Choisissez le format de fichier pour votre téléchargement",
       "The antivirus has detected an anomaly in your file.": "L'antivirus a détecté une anomalie dans votre fichier.",
       "The document has been deleted.": "Le document a bien été supprimé.",
       "The document visibility has been updated.": "La visibilité du document a été mise à jour.",
@@ -983,6 +1000,9 @@
       "Can't load this page, please check your internet connection.": "Kan deze pagina niet laden. Controleer je internetverbinding.",
       "Cancel": "Breek af",
       "Close the modal": "Sluit het venster",
+      "Close the access request modal": "Sluit het toegangsverzoek venster",
+      "Close the delete modal": "Sluit het verwijder venster",
+      "Close the version history modal": "Sluit het versiehistorie venster",
       "Collaborate": "Samenwerken",
       "Collaborate and write in real time, without layout constraints.": "Samenwerken en schrijven in realtime, zonder lay-out beperkingen.",
       "Collaborative writing, Simplified.": "Vereenvoudigd samenwerkend",
@@ -1110,7 +1130,7 @@
       "Start Writing": "Begin met schrijven",
       "Summarize": "Vat samen",
       "Summary": "Samenvatting",
-      "Template": "Template",
+      "Template": "Sjabloon",
       "The document has been deleted.": "Het document is verwijderd",
       "The document visibility has been updated.": "De zichtbaarheid van het document is bijgewerkt",
       "The export failed": "Het exporteren is mislukt",

-Original file line number
+Diff line change
   - #1262
   - #1244
   - #1270
 +  - #1281
 ### Fixed
Original file line number	Diff line number	Diff line change
`@@ -100,6 +100,7 @@ const DocShareAccessRequestItem = ({ doc, accessRequest }: Props) => {`
`100`	`100`	`docId: doc.id,`
`101`	`101`	`})`
`102`	`102`	`}`
	`103`	`+ aria-label={t('Close the access request modal')}`
`103`	`104`	`>`
`104`	`105`	`<Icon iconName="close" $variation="600" $size="16px" />`
`105`	`106`	`</BoxButton>`