[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

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', () => {

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