[ACS-12175] Fix annotation popup style (#12048)

* [ACS-12175] Fix annotation popup style

* [ACS-12175] Fix style and syntax issues for annotations

* [ACS-12175] Write unit test for date element

* [ACS-12175] Fix undefined error in unit test

* [ACS-12175] Use material theme for styling of popup

* [ACS-12175] Add style to title iinstead of using h1 header

* [ACS-12175] focus on annotation content

* [ACS-12175] Revert the change of background color

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;
+            }
         }
     }
 

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();

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();
+            const dateObj = PDFDateString.toDateObject(annotation.modificationDate);
-            dateElement.classList.add('popupDate');
+            if (dateObj) {
-            headerElement.append(titleElement, dateElement);
+                dateElement.classList.add('popupDate');
-        } else {
+                dateElement.dateTime = dateObj.toISOString();
-            headerElement.append(titleElement);
+                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 {
+    private createAnnotationPopupContent(text: string): HTMLParagraphElement {
-        const contentElement = document.createElement('span');
+        const contentElement = document.createElement('p');
         contentElement.innerText = text;
         contentElement.classList.add('popupContent');
         return contentElement;