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

Ovgodd · Ovgodd · commit 0286a014d674 · 2025-08-08T09:22:09.000+02:00
added appropriate aria attributes and semantic tags to enhance accessibility

Signed-off-by: Cyril &lt;c.gromoff@gmail.com&gt;
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -16,6 +16,7 @@ and this project adheres to
   - #1255
   - #1262
   - #1270
+  - #1271
 
 ## [3.5.0] - 2025-07-31
 
diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-create.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-create.spec.ts
@@ -45,8 +45,13 @@ test.describe('Doc Create', () => {
       })
       .click();
 
-    const input = page.getByRole('textbox', { name: 'doc title input' });
-    await expect(input).toHaveText('');
+    await page.waitForURL('**/docs/**', {
+      timeout: 10000,
+      waitUntil: 'domcontentloaded',
+    });
+
+    const input = page.getByRole('textbox', { name: /^Document title/i });
+    await expect(input).toHaveText(/^(?:Untitled document)?$/);
     await expect(
       page.locator('.c__tree-view--row-content').getByText('Untitled document'),
     ).toBeVisible();
@@ -67,8 +72,13 @@ test.describe('Doc Create', () => {
       .getByText('New sub-doc')
       .click();
 
-    const input = page.getByRole('textbox', { name: 'doc title input' });
-    await expect(input).toHaveText('');
+    await page.waitForURL('**/docs/**', {
+      timeout: 10000,
+      waitUntil: 'domcontentloaded',
+    });
+
+    const input = page.getByRole('textbox', { name: /^Document title/i });
+    await expect(input).toHaveText(/^(?:Untitled document)?$/);
     await expect(
       page.locator('.c__tree-view--row-content').getByText('Untitled document'),
     ).toBeVisible();
diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-export.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-export.spec.ts
@@ -448,7 +448,7 @@ test.describe('Doc Export', () => {
       waitUntil: 'domcontentloaded',
     });
 
-    const input = page.getByLabel('doc title input');
+    const input = page.getByRole('textbox', { name: /^Document title/i });
     await expect(input).toBeVisible();
     await expect(input).toHaveText('');
     await input.click();
diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-header.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-header.spec.ts
@@ -25,7 +25,7 @@ test.describe('Doc Header', () => {
       'It is the card information about the document.',
     );
 
-    const docTitle = card.getByRole('textbox', { name: 'doc title input' });
+    const docTitle = card.getByRole('textbox', { name: /^Document title/i });
     await expect(docTitle).toBeVisible();
 
     await page.getByRole('button', { name: 'Share' }).click();
@@ -52,7 +52,7 @@ test.describe('Doc Header', () => {
 
   test('it updates the title doc', async ({ page, browserName }) => {
     await createDoc(page, 'doc-update', browserName, 1);
-    const docTitle = page.getByRole('textbox', { name: 'doc title input' });
+    const docTitle = page.getByRole('textbox', { name: /^Document title/i });
     await expect(docTitle).toBeVisible();
     await docTitle.fill('Hello World');
     await docTitle.blur();
diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-tree.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-tree.spec.ts
@@ -51,7 +51,7 @@ test.describe('Doc Tree', () => {
     await expect(subPageItem).toBeVisible();
     await subPageItem.click();
     await verifyDocName(page, '');
-    const input = page.getByRole('textbox', { name: 'doc title input' });
+    const input = page.getByRole('textbox', { name: /^Document title/i });
     await input.click();
     const [randomDocName] = randomName('doc-tree-test', browserName, 1);
     await input.fill(randomDocName);
@@ -197,7 +197,7 @@ test.describe('Doc Tree', () => {
     await page.getByText('Move to my docs').click();
 
     await expect(
-      page.getByRole('textbox', { name: 'doc title input' }),
+      page.getByRole('textbox', { name: /^Document title/i }),
     ).not.toHaveText(docChild);
 
     const header = page.locator('header').first();
diff --git a/src/frontend/apps/e2e/__tests__/app-impress/utils-common.ts b/src/frontend/apps/e2e/__tests__/app-impress/utils-common.ts
@@ -101,9 +101,8 @@ export const createDoc = async (
       waitUntil: 'networkidle',
     });
 
-    const input = page.getByLabel('doc title input');
+    const input = page.getByRole('textbox', { name: /^Document title/i });
     await expect(input).toBeVisible();
-    await expect(input).toHaveText('');
     await input.click();
 
     await input.fill(randomDocs[i]);
@@ -122,7 +121,7 @@ export const verifyDocName = async (page: Page, docName: string) => {
 
   try {
     await expect(
-      page.getByRole('textbox', { name: 'doc title input' }),
+      page.getByRole('textbox', { name: /^Document title/i }),
     ).toHaveText(docName);
   } catch {
     await expect(page.getByRole('heading', { name: docName })).toBeVisible();
@@ -180,9 +179,8 @@ export const goToGridDoc = async (
 };
 
 export const updateDocTitle = async (page: Page, title: string) => {
-  const input = page.getByLabel('doc title input');
+  const input = page.getByRole('textbox', { name: /^Document title/i });
   await expect(input).toBeVisible();
-  await expect(input).toHaveText('');
   await input.click();
   await input.fill(title);
   await input.click();
diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx b/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>
   );
diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx b/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}>
diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/components/SimpleDocItem.tsx b/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"
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocRoleDropdown.tsx b/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>
     );
diff --git a/src/frontend/apps/impress/src/i18n/translations.json b/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",

-Original file line number
+Diff line change
   - #1255
   - #1262
   - #1270
 +  - #1271
 ## [3.5.0] - 2025-07-31