diff --git a/CHANGELOG.md b/CHANGELOG.md index b39ec100d9..aeac32e772 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -22,6 +22,11 @@ and this project adheres to - ♿(frontend) improve accessibility: - ✨ add document visible in list and openable via enter key #1365 +### Changed + +- ♿(frontend) improve accessibility: + - ♿ add pdf outline property to enable bookmarks display #1368 + ## [3.7.0] - 2025-09-12 ### Added diff --git a/src/frontend/apps/impress/src/features/docs/doc-export/blocks-mapping/headingPDF.tsx b/src/frontend/apps/impress/src/features/docs/doc-export/blocks-mapping/headingPDF.tsx index fca81d7b72..38f0dc5d72 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-export/blocks-mapping/headingPDF.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-export/blocks-mapping/headingPDF.tsx @@ -2,6 +2,26 @@ import { Text } from '@react-pdf/renderer'; import { DocsExporterPDF } from '../types'; +// Helper function to extract plain text from block content +function extractTextFromBlockContent(content: unknown[]): string { + return content + .map((item) => { + if ( + typeof item === 'object' && + item !== null && + 'type' in item && + 'text' in item + ) { + if (item.type === 'text' && typeof item.text === 'string') { + return item.text; + } + } + return ''; + }) + .join('') + .trim(); +} + export const blockMappingHeadingPDF: DocsExporterPDF['mappings']['blockMapping']['heading'] = (block, exporter) => { const PIXELS_PER_POINT = 0.75; @@ -9,9 +29,18 @@ export const blockMappingHeadingPDF: DocsExporterPDF['mappings']['blockMapping'] const FONT_SIZE = 16; const fontSizeEM = block.props.level === 1 ? 2 : block.props.level === 2 ? 1.5 : 1.17; + + // Extract plain text for bookmark title + const bookmarkTitle = + extractTextFromBlockContent(block.content) || 'Untitled'; + return ( { exportDocument, )) as React.ReactElement; - // Inject language for screen reader support + // Inject language for screen reader support and enable outlines (bookmarks) const pdfDocument = isValidElement(rawPdfDocument) - ? cloneElement(rawPdfDocument, { language: i18next.language }) + ? cloneElement(rawPdfDocument, { + language: i18next.language, + pageMode: 'useOutlines', + }) : rawPdfDocument; blobExport = await pdf(pdfDocument).toBlob();