[ADF-4966] Keep table headers - visually hidden when showHeader false (#5170)

* [ADF-4966] Move or copy - Add table headers - visually hidden

- needed by screen readers

* [ADF-4966] use automatic column header translation

* [ADF-4966] move the fix to the datatable component

-improve accessibility - keep table headers-but visually hidden for showHeader false

* [ADF-4966] code review change

* [ADF-4966] fix array shallow copy on failing e2e-test

* [ADF-4966] improve accessibility only for list display

- fixes failing test

lib/core/datatable/components/datatable/datatable.component.html

@@ -5,7 +5,7 @@
     [class.adf-datatable-list]="display === 'list'"
     [class.adf-sticky-header]="isStickyHeaderEnabled()"
     [class.adf-datatable--empty]="!isHeaderVisible()">
-    <div *ngIf="showHeader && isHeaderVisible()" class="adf-datatable-header" role="rowgroup">
+    <div *ngIf="isHeaderVisible()" class="adf-datatable-header" role="rowgroup" [ngClass]="{ 'adf-sr-only': !showHeader }">
         <div class="adf-datatable-row" *ngIf="display === 'list'" role="row">
             <!-- Actions (left) -->
             <div *ngIf="actions && actionsPosition === 'left'" class="adf-actions-column adf-datatable-cell-header">
@@ -24,7 +24,7 @@
                  (click)="onColumnHeaderClick(col)"
                  (keyup.enter)="onColumnHeaderClick(col)"
                  role="columnheader"
-                 tabindex="0"
+                 [tabindex]="showHeader ? 0 : -1"
                  [attr.aria-sort]="col.sortable ? (getAriaSort(col) | translate) : null"
                  title="{{ col.title | translate }}"
                  adf-drop-zone dropTarget="header" [dropColumn]="col">
@@ -36,7 +36,7 @@
                 <span class="adf-sr-only">Actions</span>
             </div>
         </div>
-        <mat-form-field *ngIf="display === 'gallery'">
+        <mat-form-field *ngIf="display === 'gallery' && showHeader">
             <mat-select [value]="getSortingKey()" [attr.data-automation-id]="'grid-view-sorting'">
                 <mat-option *ngFor="let col of getSortableColumns()"
                             [value]="col.key"