Fix/[ACS-9224] Revert fixed critical accessibility issues in datatable.component (#10694)

* [ci:force]

* Revert "[ACS-9224] Fixed critical accessibility issues in datatable.component (#10679)"

This reverts commit 58fa965.

Author: VitoAlbano

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

@@ -28,15 +28,15 @@
             </div>
 
             <!-- Columns -->
-            <th *ngIf="multiselect" class="adf-datatable-cell-header adf-datatable-checkbox" role="columnheader">
+            <div *ngIf="multiselect" class="adf-datatable-cell-header adf-datatable-checkbox">
                 <mat-checkbox [indeterminate]="isSelectAllIndeterminate"
                               [checked]="isSelectAllChecked"
                               (change)="onSelectAllClick($event)"
                               class="adf-checkbox-sr-only"
                               [aria-label]="'ADF-DATATABLE.ACCESSIBILITY.SELECT_ALL' | translate">
                     {{ 'ADF-DATATABLE.ACCESSIBILITY.SELECT_ALL' | translate }}
                 </mat-checkbox>
-            </th>
+            </div>
 
             <ng-container
                 *ngFor="
@@ -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 ? (col.title | translate) : '') + (col.subtitle ? ' ' + col.subtitle : '')"
+                [attr.aria-label]="(col.title | translate) + (col.subtitle ? ' ' + col.subtitle : '')"
                 (click)="onColumnHeaderClick(col, $event)"
                 (keyup.enter)="onColumnHeaderClick(col, $event)"
                 role="columnheader"
@@ -156,27 +156,24 @@
                 [class.adf-datatable-actions-menu-provided]="showProvidedActions"
             >
                 <ng-container *ngIf="mainActionTemplate">
-                    <td role="gridcell">
-                        <button
-                            data-automation-id="adf-datatable-main-menu-button"
-                            title="{{ 'ADF-DATATABLE.CONTENT-ACTIONS.SELECT_COLUMNS' | translate }}"
-                            [attr.aria-label]="'ADF-DATATABLE.CONTENT-ACTIONS.SELECT_COLUMNS' | translate"
-                            mat-icon-button
-                            #mainMenuTrigger="matMenuTrigger"
-                            (click)="onMainMenuOpen()"
-                            [matMenuTriggerFor]="mainMenu">
-                            <mat-icon>view_week_outline</mat-icon>
-                        </button>
-                        <mat-menu #mainMenu (closed)="onMainMenuClosed()">
-                            <div #mainMenuTemplate role="presentation" (keydown.tab)="$event.stopPropagation()">
-                                <ng-container
-                                    [ngTemplateOutlet]="mainActionTemplate"
-                                    [ngTemplateOutletContext]="{
-                                        $implicit: mainMenuTrigger
-                                    }" />
-                            </div>
-                        </mat-menu>
-                    </td>
+                    <button
+                        data-automation-id="adf-datatable-main-menu-button"
+                        title="{{ 'ADF-DATATABLE.CONTENT-ACTIONS.SELECT_COLUMNS' | translate }}"
+                        mat-icon-button
+                        #mainMenuTrigger="matMenuTrigger"
+                        (click)="onMainMenuOpen()"
+                        [matMenuTriggerFor]="mainMenu">
+                        <mat-icon>view_week_outline</mat-icon>
+                    </button>
+                    <mat-menu #mainMenu (closed)="onMainMenuClosed()">
+                        <div #mainMenuTemplate role="presentation" (keydown.tab)="$event.stopPropagation()">
+                            <ng-container
+                                [ngTemplateOutlet]="mainActionTemplate"
+                                [ngTemplateOutletContext]="{
+                                    $implicit: mainMenuTrigger
+                                }" />
+                        </div>
+                    </mat-menu>
                     <span class="adf-sr-only">{{ 'ADF-DATATABLE.ACCESSIBILITY.ACTIONS' | translate }}</span>
                 </ng-container>
             </div>
@@ -240,12 +237,12 @@
                     </mat-menu>
                 </div>
 
-                <td *ngIf="multiselect"
+                <label *ngIf="multiselect"
                         (keydown.enter)="onEnterKeyPressed(row, $any($event))"
                         (click)="onCheckboxLabelClick(row, $event)"
-                        role="gridcell"
+                        [for]="'select-file-' + idx"
                         class="adf-datatable-cell adf-datatable-checkbox adf-datatable-checkbox-single"
-                        tabindex="-1">
+                        tabindex="0">
                     <mat-checkbox
                         [id]="'select-file-' + idx"
                         [disabled]="!row?.isSelectable"
@@ -260,7 +257,7 @@
                         class="adf-checkbox-sr-only">
                         {{ 'ADF-DATATABLE.ACCESSIBILITY.SELECT_FILE' | translate }}
                     </mat-checkbox>
-                </td>
+                </label>
 
                 <div
                     *ngFor="let col of getVisibleColumns(); let lastColumn = last;"