Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 18, 2025
+14 −5
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -28,6 +28,8 @@ and this project adheres to
### Added

- ✨(api) add API route to fetch document content #1206
- ♿(frontend) improve accessibility:
- #1349

### Changed

Expand Down
1 change: 1 addition & 0 deletions src/frontend/apps/e2e/__tests__/app-impress/doc-export.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) => {
Expand Down
14 changes: 10 additions & 4 deletions src/frontend/apps/impress/src/features/docs/doc-export/components/ModalExport.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can see we get the information now in the test e2e:

console.log(pdfData.info);
 {
      PDFFormatVersion: '1.3',
      IsAcroFormPresent: false,
      IsXFAPresent: false,
      Title: 'chromium-3797-0-doc-editor-line-break',
      Creator: 'react-pdf',
      Producer: 'react-pdf',
      CreationDate: 'D:20250917092655Z'
  }

Could you add a check in one of the test to assert that the Title is set ?
Do not create a special test for that, just update one of them, tests e2e are quite heavy for the CI.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Of course

pageMode: 'useOutlines',
})
: rawPdfDocument;
Expand All @@ -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', {
Expand Down
Loading