[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/content-services/src/lib/content-node-selector/content-node-selector-panel.component.html

@@ -78,14 +78,14 @@
 
             <data-columns>
                 <data-column key="$thumbnail" type="image"></data-column>
-                <data-column key="name" type="text" class="adf-full-width adf-ellipsis-cell">
+                <data-column key="name" type="text" title="ADF-DOCUMENT-LIST.LAYOUT.NAME" class="adf-full-width adf-ellipsis-cell">
                     <ng-template let-context>
                         <adf-name-location-cell [row]="context.row"></adf-name-location-cell>
                     </ng-template>
                 </data-column>
-                <data-column key="modifiedAt" type="date" format="timeAgo" class="adf-content-selector-modified-cell"></data-column>
+                <data-column key="modifiedAt" type="date" title="ADF-DOCUMENT-LIST.LAYOUT.MODIFIED_ON" format="timeAgo" class="adf-content-selector-modified-cell"></data-column>
-                <data-column key="createdByUser.displayName" type="text" class="adf-content-selector-modifier-cell"></data-column>
+                <data-column key="createdByUser.displayName" type="text" title="ADF-DOCUMENT-LIST.LAYOUT.CREATED_BY" class="adf-content-selector-modifier-cell"></data-column>
-                <data-column key="visibility" type="text" class="adf-content-selector-visibility-cell"></data-column>
+                <data-column key="visibility" type="text" title="ADF-DOCUMENT-LIST.LAYOUT.STATUS" class="adf-content-selector-visibility-cell"></data-column>
             </data-columns>
 
         </adf-document-list>

lib/content-services/src/lib/i18n/en.json

@@ -37,6 +37,7 @@
     "NO_PERMISSION": "You don't have permission to view this file or folder.",
     "LAYOUT": {
       "CREATED": "Created",
+      "CREATED_BY": "Created by",
       "THUMBNAIL": "Thumbnail",
       "NAME": "Name",
       "LOCATION": "Location",

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"

lib/testing/src/lib/core/pages/data-table-component.page.ts

@@ -130,7 +130,7 @@ export class DataTableComponentPage {
                 initialList.push(text.toLowerCase());
             }
         });
-        let sortedList = initialList;
+        let sortedList = [...initialList];
         sortedList = sortedList.sort();
         if (sortOrder.toLocaleLowerCase() === 'desc') {
             sortedList = sortedList.reverse();