diff --git a/lib/core/viewer/pdf/src/lib/components/pdf-viewer/pdf-viewer-host.component.scss b/lib/core/viewer/pdf/src/lib/components/pdf-viewer/pdf-viewer-host.component.scss index 9fbbc98488..8182fafeb7 100644 --- a/lib/core/viewer/pdf/src/lib/components/pdf-viewer/pdf-viewer-host.component.scss +++ b/lib/core/viewer/pdf/src/lib/components/pdf-viewer/pdf-viewer-host.component.scss @@ -194,6 +194,10 @@ opacity: 0; pointer-events: none; + .header .title { + font-weight: bold; + } + .popupContent { display: inherit; } @@ -210,6 +214,10 @@ pointer-events: auto; } } + + &:focus-within:hover .adf-pdf-viewer-annotation-tooltip.popup { + outline-width: 3px; + } } } diff --git a/lib/core/viewer/pdf/src/lib/components/pdf-viewer/pdf-viewer.component.spec.ts b/lib/core/viewer/pdf/src/lib/components/pdf-viewer/pdf-viewer.component.spec.ts index 5fa6bf6af2..97d78f5457 100644 --- a/lib/core/viewer/pdf/src/lib/components/pdf-viewer/pdf-viewer.component.spec.ts +++ b/lib/core/viewer/pdf/src/lib/components/pdf-viewer/pdf-viewer.component.spec.ts @@ -693,6 +693,8 @@ describe('Test PdfViewer - User interaction', () => { const getAnnotationTitle = (): string => annotationElement.querySelector('.title').textContent; + const getAnnotationDateElement = (): HTMLTimeElement | null => annotationElement.querySelector('.popupDate') as HTMLTimeElement | null; + const getAnnotationDate = (): string => annotationElement.querySelector('.popupDate')?.textContent; const getAnnotationContent = (): string => annotationElement.querySelector('.popupContent').textContent; @@ -728,6 +730,16 @@ describe('Test PdfViewer - User interaction', () => { expect(getAnnotationPopupElement()).toBeDefined(); })); + it('should set localization and accessibility attributes on the annotation date element', fakeAsync(() => { + dispatchAnnotationLayerRenderedEvent(); + const dateElement = getAnnotationDateElement(); + expect(dateElement).not.toBeNull(); + const expectedDate = new Date(Date.UTC(2026, 1, 2, 10, 41, 6)); + expect(dateElement.dateTime).toBe(expectedDate.toISOString()); + expect(dateElement.dataset.l10nId).toBe('pdfjs-annotation-date-time-string'); + expect(dateElement.dataset.l10nArgs).toBe(JSON.stringify({ dateObj: expectedDate.getTime() })); + })); + it('should have corrected content in annotation popup if there is no modification date', fakeAsync(() => { annotations[0].modificationDate = null; dispatchAnnotationLayerRenderedEvent(); diff --git a/lib/core/viewer/pdf/src/lib/components/pdf-viewer/pdf-viewer.component.ts b/lib/core/viewer/pdf/src/lib/components/pdf-viewer/pdf-viewer.component.ts index 9a5c11c3e4..3c5d68f8ab 100644 --- a/lib/core/viewer/pdf/src/lib/components/pdf-viewer/pdf-viewer.component.ts +++ b/lib/core/viewer/pdf/src/lib/components/pdf-viewer/pdf-viewer.component.ts @@ -739,19 +739,24 @@ export class PdfViewerComponent implements OnChanges, OnDestroy { titleElement.innerText = annotation.titleObj.str; titleElement.classList.add('title'); headerElement.classList.add('header'); + headerElement.append(titleElement); if (annotation.modificationDate) { dateElement = document.createElement('time'); - dateElement.innerText = PDFDateString.toDateObject(annotation.modificationDate).toLocaleString(); - dateElement.classList.add('popupDate'); - headerElement.append(titleElement, dateElement); - } else { - headerElement.append(titleElement); + const dateObj = PDFDateString.toDateObject(annotation.modificationDate); + if (dateObj) { + dateElement.classList.add('popupDate'); + dateElement.dateTime = dateObj.toISOString(); + dateElement.innerText = dateObj.toLocaleString(); + dateElement.dataset.l10nId = 'pdfjs-annotation-date-time-string'; + dateElement.dataset.l10nArgs = JSON.stringify({ dateObj: dateObj.getTime() }); + headerElement.append(dateElement); + } } return headerElement; } - private createAnnotationPopupContent(text: string): HTMLSpanElement { - const contentElement = document.createElement('span'); + private createAnnotationPopupContent(text: string): HTMLParagraphElement { + const contentElement = document.createElement('p'); contentElement.innerText = text; contentElement.classList.add('popupContent'); return contentElement;