From 804dcd9c43559c811b710995676684a6673b171b Mon Sep 17 00:00:00 2001
From: Shivangi Shree <shivangi.shree@hyland.com>
Date: Mon, 7 Sep 2026 12:21:48 +0530
Subject: [PATCH] [ACS-10246] Add logic to make dates semantically conveyed
 (#12171)

* [ACS-10246] Add logic to make dates semantically conveyed

* [ACS-10246] Fix unit test

* [ACS-10246] Enhance the logic for converting date

* [ACS-10246] Remove tabindex=0 from time element

* [ACS-10246] Add unit test for iso method

* [ACS-10246] Add unit test

* [ACS-10246] Trigger build

* [ACS-10246] Remove date checking from isoDate function
---
 .../date-cell/date-cell.component.spec.ts     | 22 ++++++++++++++++---
 .../date-cell/date-cell.component.ts          | 12 +++++++++-
 2 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/lib/core/src/lib/datatable/components/date-cell/date-cell.component.spec.ts b/lib/core/src/lib/datatable/components/date-cell/date-cell.component.spec.ts
index 07410406db..e7d16fec66 100644
--- a/lib/core/src/lib/datatable/components/date-cell/date-cell.component.spec.ts
+++ b/lib/core/src/lib/datatable/components/date-cell/date-cell.component.spec.ts
@@ -67,19 +67,25 @@ const renderDateCell = (dateConfig: DateConfig, value: number | string | Date, t
 };
 
 const checkDisplayedDate = (expectedDate: string) => {
-    const displayedDate = testingUtils.getByCSS('span').nativeElement.textContent.trim();
+    const displayedDate = testingUtils.getByCSS('time').nativeElement.textContent.trim();
 
     expect(displayedDate).toBeTruthy();
     expect(displayedDate).toBe(expectedDate);
 };
 
 const checkDisplayedTooltip = (expectedTooltip: string) => {
-    const displayedTooltip = testingUtils.getByCSS('span').nativeElement.title;
+    const displayedTooltip = testingUtils.getByCSS('time').nativeElement.title;
 
     expect(displayedTooltip).toBeTruthy();
     expect(displayedTooltip).toBe(expectedTooltip);
 };
 
+const checkDatetimeAttribute = (expectedIso: string) => {
+    const datetime = testingUtils.getByCSS('time').nativeElement.getAttribute('datetime');
+
+    expect(datetime).toBe(expectedIso);
+};
+
 const configureTestingModule = (providers: any[]) => {
     TestBed.configureTestingModule({
         imports: [DateCellComponent],
@@ -141,7 +147,7 @@ describe('DateCellComponent', () => {
         expect(component.config().locale).toEqual('en-US');
     });
 
-    it('should display date and tooltip with defaules values if NO dateConfig or appConfig is provided', () => {
+    it('should display date and tooltip with default values if NO dateConfig or appConfig is provided', () => {
         appConfigService.config = {
             dateValues: {}
         };
@@ -232,6 +238,16 @@ describe('DateCellComponent', () => {
         renderDateCell(mockDateConfig, mockTimestamp);
         checkDisplayedDate(expectedDate);
     });
+
+    it('should render a datetime attribute with the full ISO date value', () => {
+        const mockDateConfig: DateConfig = {
+            format: 'short',
+            tooltipFormat: 'short'
+        };
+
+        renderDateCell(mockDateConfig, mockDate);
+        checkDatetimeAttribute(mockDate.toISOString());
+    });
 });
 
 describe('DateCellComponent locale', () => {
diff --git a/lib/core/src/lib/datatable/components/date-cell/date-cell.component.ts b/lib/core/src/lib/datatable/components/date-cell/date-cell.component.ts
index 9ba78d30f1..8c8460bcc1 100644
--- a/lib/core/src/lib/datatable/components/date-cell/date-cell.component.ts
+++ b/lib/core/src/lib/datatable/components/date-cell/date-cell.component.ts
@@ -26,7 +26,9 @@ import { toSignal } from '@angular/core/rxjs-interop';
     selector: 'adf-date-cell',
     template: `
         @if (formattedDate()) {
-            <span [title]="title()" class="adf-datatable-cell-value">{{ formattedDate() }}</span>
+            <time [attr.datetime]="isoDate()" [attr.aria-label]="title() || null" [title]="title()" class="adf-datatable-cell-value"
+                >{{ formattedDate() }}
+            </time>
         }
     `,
     encapsulation: ViewEncapsulation.None,
@@ -55,6 +57,14 @@ export class DateCellComponent extends DataTableCellComponent implements OnInit
     // Convert value$ observable to signal for reactive computation
     private readonly dateValue = toSignal(this.value$);
 
+    // Computed signal that automatically formats the date to ISO string for datetime attribute
+    protected readonly isoDate = computed(() => {
+        const date = this.dateValue();
+        const parsed = new Date(date);
+
+        return isNaN(parsed.getTime()) ? null : parsed.toISOString();
+    });
+
     // Computed signal that automatically formats the date based on value and config
     protected readonly formattedDate = computed(() => {
         const date = this.dateValue();