inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-12 17:04:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
This reverts commit 58fa965d3fe91d794f8aed6f4ce44bc7a2a03b9b.
This commit is contained in:
VitoAlbano 2025-03-04 16:06:50 +00:00
parent a7aa3939a3
commit 97ecfda5ac
1 changed files with 25 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
lib/core/src/lib/datatable/components/datatable/datatable.component.html
View File

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