✨(frontend) improve accessibility of cdoc content with correct aria tags

added appropriate aria attributes and semantic tags to enhance accessibility

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

Author: Ovgodd

CHANGELOG.md

@@ -16,6 +16,7 @@ and this project adheres to
   - #1255
   - #1262
   - #1270
+  - #1271
 
 ## [3.5.0] - 2025-07-31
 

src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx

@@ -107,7 +107,7 @@ const DocTitleInput = ({ doc }: DocTitleProps) => {
   }, [doc]);
 
   return (
-    <Tooltip content={t('Rename')} placement="top">
+    <Tooltip content={t('Rename')} aria-hidden={true} placement="top">
       <Box
         as="span"
         role="textbox"
@@ -116,7 +116,8 @@ const DocTitleInput = ({ doc }: DocTitleProps) => {
         defaultValue={titleDisplay || undefined}
         onKeyDownCapture={handleKeyDown}
         suppressContentEditableWarning={true}
-        aria-label="doc title input"
+        aria-label={`${t('Document title')} ${doc.title || untitledDocument}`}
+        aria-multiline={false}
         onBlurCapture={(event) =>
           handleTitleSubmit(event.target.textContent || '')
         }
@@ -137,7 +138,7 @@ const DocTitleInput = ({ doc }: DocTitleProps) => {
           outline: none;
         `}
       >
-        {titleDisplay}
+        {titleDisplay || untitledDocument}
       </Box>
     </Tooltip>
   );

src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx

@@ -215,7 +215,7 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
               >
                 <Button
                   color="tertiary"
-                  aria-label="Share button"
+                  aria-label={t('Share button')}
                   icon={
                     <Icon iconName="group" $theme="primary" $variation="800" />
                   }
@@ -235,12 +235,18 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
           <Button
             color="tertiary-text"
             icon={
-              <Icon iconName="download" $theme="primary" $variation="800" />
+              <Icon
+                iconName="download"
+                $theme="primary"
+                $variation="800"
+                aria-hidden={true}
+              />
             }
             onClick={() => {
               setIsModalExportOpen(true);
             }}
             size={isSmallMobile ? 'small' : 'medium'}
+            aria-label={t('Download the document')}
           />
         )}
         <DropdownMenu options={options}>

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

@@ -71,7 +71,7 @@ export const SimpleDocItem = ({
       <Box $justify="center" $overflow="auto">
         <Text
           aria-describedby="doc-title"
-          aria-label={doc.title}
+          aria-label={doc.title || untitledDocument}
           $size="sm"
           $variation="1000"
           $weight="500"

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

@@ -102,7 +102,7 @@ export const DocRoleDropdown = ({
 
   if (!canUpdate) {
     return (
-      <Text aria-label="doc-role-text" $variation="600">
+      <Text aria-label={t('Document role text')} $variation="600">
         {transRole(currentRole)}
       </Text>
     );

src/frontend/apps/impress/src/i18n/translations.json

@@ -217,9 +217,11 @@
       "Document accessible to any connected person": "Dokument für jeden angemeldeten Benutzer zugänglich",
       "Document duplicated successfully!": "Dokument erfolgreich dupliziert!",
       "Document owner": "Besitzer des Dokuments",
+      "Document title": "Dokumenttitel",
       "Document sections": "Dokumentabschnitte",
       "Docx": "Docx",
       "Download": "Herunterladen",
+      "Download the document": "Dokument herunterladen",
       "Download anyway": "Trotzdem herunterladen",
       "Download your document in a .docx or .pdf format.": "Ihr Dokument als .docx- oder .pdf-Datei herunterladen.",
       "Duplicate": "Duplizieren",
@@ -371,6 +373,7 @@
   "en": {
     "translation": {
       "Back to homepage": "Back to Docs homepage",
+      "Document title": "Document title",
       "Search docs": "Search docs",
       "More options": "More options",
       "Pinned documents": "Pinned documents",
@@ -437,9 +440,11 @@
       "Docs: Your new companion to collaborate on documents efficiently, intuitively, and securely.": "Docs: su nuevo compañero para colaborar en documentos de forma eficiente, intuitiva y segura.",
       "Document accessible to any connected person": "Documento accesible a cualquier persona conectada",
       "Document owner": "Propietario del documento",
+      "Document title": "Título del documento",
       "Document sections": "Secciones del documento",
       "Docx": "Docx",
       "Download": "Descargar",
+      "Download the document": "Descargar el documento",
       "Download anyway": "Descargar de todos modos",
       "Download your document in a .docx or .pdf format.": "Descargue su documento en formato .docx o .pdf.",
       "Editor": "Editor",
@@ -633,9 +638,11 @@
       "Document accessible to any connected person": "Document accessible à toute personne connectée",
       "Document duplicated successfully!": "Document dupliqué avec succès !",
       "Document owner": "Propriétaire du document",
+      "Document title": "Titre du document",
       "Document sections": "Sections des documents",
       "Docx": "Docx",
       "Download": "Télécharger",
+      "Download the document": "Télécharger le document",
       "Download anyway": "Télécharger malgré tout",
       "Download your document in a .docx or .pdf format.": "Téléchargez votre document au format .docx ou .pdf.",
       "Duplicate": "Dupliquer",
@@ -1003,9 +1010,11 @@
       "Docs: Your new companion to collaborate on documents efficiently, intuitively, and securely.": "Docs: Je nieuwe metgezel om efficiënt, intuïtief en veilig samen te werken aan documenten.",
       "Document accessible to any connected person": "Document is toegankelijk voor ieder verbonden persoon",
       "Document owner": "Document eigenaar",
+      "Document title": "Documenttitel",
       "Document sections": "Document secties",
       "Docx": "Docx",
       "Download": "Download",
+      "Download the document": "Document downloaden",
       "Download anyway": "Download alsnog",
       "Download your document in a .docx or .pdf format.": "Download jouw document in .docx of .pdf formaat.",
       "Editor": "Bewerker",