✨(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

@@ -13,7 +13,7 @@ and this project adheres to
 - ♿(frontend) improve accessibility:
   - #1354
   - ♿ improve accessibility by adding landmark roles to layout #1394
-  - ✨ add document visible in list and openable via enter key #1365
+  - ♿ add document visible in list and openable via enter key #1365
   - ♿ add pdf outline property to enable bookmarks display #1368
 
 ### Fixed
@@ -28,6 +28,8 @@ and this project adheres to
 ### Added
 
 - ✨(api) add API route to fetch document content #1206
+- ♿(frontend) improve accessibility:
+  - #1349
 
 ### Changed
 

src/frontend/apps/e2e/__tests__/app-impress/doc-export.spec.ts

@@ -93,6 +93,7 @@ test.describe('Doc Export', () => {
 
     expect(pdfData.numpages).toBe(2);
     expect(pdfData.text).toContain('\n\nHello\n\nWorld'); // This is the doc text
+    expect(pdfData.info.Title).toBe(randomDoc);
   });
 
   test('it exports the doc to docx', async ({ page, browserName }) => {

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

@@ -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,10 +100,11 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => {
         exportDocument,
       )) as React.ReactElement<DocumentProps>;
 
-      // Inject language for screen reader support and enable outlines (bookmarks)
+      // Add language, title and outline properties to improve PDF accessibility and navigation
       const pdfDocument = isValidElement(rawPdfDocument)
         ? cloneElement(rawPdfDocument, {
             language: i18next.language,
+            title: documentTitle,
             pageMode: 'useOutlines',
           })
         : rawPdfDocument;
@@ -112,10 +115,13 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => {
         resolveFileUrl: async (url) => exportCorsResolveFileUrl(doc.id, url),
       });
 
-      blobExport = await exporter.toBlob(exportDocument);
+      blobExport = await exporter.toBlob(exportDocument, {
+        documentOptions: { title: documentTitle },
+        sectionOptions: {},
+      });
     }
 
-    downloadFile(blobExport, `${title}.${format}`);
+    downloadFile(blobExport, `${filename}.${format}`);
 
     toast(
       t('Your {{format}} was downloaded succesfully', {