✨(docs) add title metadata to exported docx/pdf for accessibility

ensures document title is preserved in exports to meet accessibility needs

Signed-off-by: Cyril <c.gromoff@gmail.com>

Author: Ovgodd

CHANGELOG.md

@@ -14,6 +14,12 @@ and this project adheres to
 ### Added
 
 - ✨(api) add API route to fetch document content #1206
+- ♿(frontend) improve accessibility:
+  - #1349
+  - #1271
+  - #1341
+  - #1362
+  - #1379
 
 ### Changed
 

src/frontend/apps/impress/package.json

@@ -48,6 +48,7 @@
     "i18next": "25.5.2",
     "i18next-browser-languagedetector": "8.2.0",
     "idb": "8.0.3",
+    "jszip": "3.10.1",
     "lodash": "4.17.21",
     "luxon": "3.7.2",
     "next": "15.5.3",

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

@@ -24,7 +24,7 @@ import { exportCorsResolveFileUrl } from '../api/exportResolveFileUrl';
 import { TemplatesOrdering, useTemplates } from '../api/useTemplates';
 import { docxDocsSchemaMappings } from '../mappingDocx';
 import { pdfDocsSchemaMappings } from '../mappingPDF';
-import { downloadFile } from '../utils';
+import { addTitleToDocx, downloadFile } from '../utils';
 
 enum DocDownloadFormat {
   PDF = 'pdf',
@@ -76,12 +76,14 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => {
 
     setIsExporting(true);
 
-    const title = (doc.title || untitledDocument)
+    const filename = (doc.title || untitledDocument)
       .toLowerCase()
       .normalize('NFD')
       .replace(/[\u0300-\u036f]/g, '')
       .replace(/\s/g, '-');
 
+    const documentTitle = doc.title || untitledDocument;
+
     const html = templateSelected;
     let exportDocument = editor.document;
     if (html) {
@@ -98,9 +100,12 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => {
         exportDocument,
       )) as React.ReactElement<DocumentProps>;
 
-      // Inject language for screen reader support
+      // Inject language and title for screen reader support and accessibility
       const pdfDocument = isValidElement(rawPdfDocument)
-        ? cloneElement(rawPdfDocument, { language: i18next.language })
+        ? cloneElement(rawPdfDocument, {
+            language: i18next.language,
+            title: documentTitle,
+          })
         : rawPdfDocument;
 
       blobExport = await pdf(pdfDocument).toBlob();
@@ -109,10 +114,12 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => {
         resolveFileUrl: async (url) => exportCorsResolveFileUrl(doc.id, url),
       });
 
-      blobExport = await exporter.toBlob(exportDocument);
+      const originalBlob = await exporter.toBlob(exportDocument);
+
+      blobExport = await addTitleToDocx(originalBlob, documentTitle);
     }
 
-    downloadFile(blobExport, `${title}.${format}`);
+    downloadFile(blobExport, `${filename}.${format}`);
 
     toast(
       t('Your {{format}} was downloaded succesfully', {

src/frontend/apps/impress/src/features/docs/doc-export/utils.ts

@@ -5,6 +5,7 @@ import {
 } from '@blocknote/core';
 import { Canvg } from 'canvg';
 import { IParagraphOptions, ShadingType } from 'docx';
+import JSZip from 'jszip';
 
 export function downloadFile(blob: Blob, filename: string) {
   const url = window.URL.createObjectURL(blob);
@@ -101,3 +102,46 @@ export function docxBlockPropsToStyles(
                 })(),
   };
 }
+
+/**
+ * Adds title metadata to a DOCX blob by modifying the core.xml file
+ * @param docxBlob - The original DOCX blob
+ * @param title - The title to set in the document metadata
+ * @returns Promise<Blob> - A new DOCX blob with the title metadata added
+ */
+export async function addTitleToDocx(
+  docxBlob: Blob,
+  title: string,
+): Promise<Blob> {
+  try {
+    const zip = new JSZip();
+    await zip.loadAsync(docxBlob);
+
+    const coreXmlFile = zip.file('docProps/core.xml');
+
+    if (coreXmlFile) {
+      let coreXmlContent = await coreXmlFile.async('text');
+
+      // Check if there's already a title element and replace it, or add a new one
+      if (coreXmlContent.includes('<dc:title>')) {
+        coreXmlContent = coreXmlContent.replace(
+          /<dc:title>.*?<\/dc:title>/,
+          `<dc:title>${title}</dc:title>`,
+        );
+      } else {
+        // Add title element before the closing </cp:coreProperties> tag
+        coreXmlContent = coreXmlContent.replace(
+          /<\/cp:coreProperties>/,
+          `<dc:title>${title}</dc:title></cp:coreProperties>`,
+        );
+      }
+      zip.file('docProps/core.xml', coreXmlContent);
+    }
+
+    return await zip.generateAsync({ type: 'blob' });
+  } catch (error) {
+    console.warn('Failed to add title to DOCX metadata:', error);
+    // Return original blob if modification fails
+    return docxBlob;
+  }
+}