From ea58a5d79480e994f5c75d4b9ab4dff2f5433eb9 Mon Sep 17 00:00:00 2001
From: Mykyta Maliarchuk <84377976+nikita-web-ua@users.noreply.github.com>
Date: Fri, 7 Nov 2025 14:28:08 +0100
Subject: [PATCH] [ACS-10310] Fix a11y - Screen reader announces column header
 as undefined (#11328)

---
 .../components/datatable/datatable.component.html         | 8 ++++++--
 .../lib/datatable/data-column/data-column.component.ts    | 2 +-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.html b/lib/core/src/lib/datatable/components/datatable/datatable.component.html
index ffbfefe9c0..bdc5c1891a 100644
--- a/lib/core/src/lib/datatable/components/datatable/datatable.component.html
+++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.html
@@ -54,7 +54,7 @@
                     'adf-datatable__header--sorted-asc': isColumnSorted(col, 'asc'),
                     'adf-datatable__header--sorted-desc': isColumnSorted(col, 'desc')}"
                 [ngStyle]="(col.width) && !lastColumn && {'flex': getFlexValue(col)}"
-                [attr.aria-label]="(col.title | translate) + (col.subtitle ? ' ' + col.subtitle : '')"
+                [attr.aria-label]="col.srTitle ? (col.srTitle | translate) : (col.title | translate) + (col.subtitle ? ' ' + (col.subtitle | translate) : '')"
                 (click)="onColumnHeaderClick(col, $event)"
                 (keyup.enter)="onColumnHeaderClick(col, $event)"
                 role="columnheader"
@@ -279,7 +279,11 @@
                     <div *ngIf="!col.template" class="adf-datatable-cell-container">
                         <ng-container [ngSwitch]="data.getColumnType(row, col)">
                             <div *ngSwitchCase="'image'" class="adf-cell-value">
-                                <mat-icon *ngIf="isIconValue(row, col); else no_iconvalue">{{ asIconValue(row, col) }}
+                                <mat-icon
+                                    [attr.aria-label]="col.srTitle? (col.srTitle | translate) : null"
+                                    [attr.aria-hidden]="!asIconValue(row, col)"
+                                    *ngIf="isIconValue(row, col); else no_iconvalue">
+                                    {{ asIconValue(row, col) }}
                                 </mat-icon>
                                 <ng-template #no_iconvalue>
                                     <mat-icon class="adf-datatable-selected"
diff --git a/lib/core/src/lib/datatable/data-column/data-column.component.ts b/lib/core/src/lib/datatable/data-column/data-column.component.ts
index b8faeab213..e716d6c87b 100644
--- a/lib/core/src/lib/datatable/data-column/data-column.component.ts
+++ b/lib/core/src/lib/datatable/data-column/data-column.component.ts
@@ -130,7 +130,7 @@ export class DataColumnComponent implements OnInit {
 
     ngOnInit() {
         if (!this.srTitle && this.key === '$thumbnail') {
-            this.srTitle = 'Thumbnail';
+            this.srTitle = 'ADF-DOCUMENT-LIST.LAYOUT.THUMBNAIL';
         }
     }
 }