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

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

Browse Source 
* [ACS-9224] Fixed critical accessibility issues in datatable.component

* [ACS-9224] Replaced <label> with <th> to fix minor issue

* [ACS-9224] Fixing sonarlint issues

* [ACS-9224] Resolved template issues
This commit is contained in:
swapnil-verma-gl 2025-02-25 14:58:56 +05:30 committed by GitHub
parent 0c725a1c90
commit 58fa965d3f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 28 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -28,7 +28,7 @@
</div>
<!-- Columns -->
<div *ngIf="multiselect" class="adf-datatable-cell-header adf-datatable-checkbox">
<th *ngIf="multiselect" class="adf-datatable-cell-header adf-datatable-checkbox" role="columnheader">
<mat-checkbox [indeterminate]="isSelectAllIndeterminate"
[checked]="isSelectAllChecked"
(change)="onSelectAllClick($event)"
@ -36,7 +36,7 @@
[aria-label]="'ADF-DATATABLE.ACCESSIBILITY.SELECT_ALL' | translate">
{{ 'ADF-DATATABLE.ACCESSIBILITY.SELECT_ALL' | translate }}
</mat-checkbox>
</div>
</th>
<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 | translate) + (col.subtitle ? ' ' + col.subtitle : '')"
[attr.aria-label]="(col.title ? (col.title | translate) : '') + (col.subtitle ? ' ' + col.subtitle : '')"
(click)="onColumnHeaderClick(col, $event)"
(keyup.enter)="onColumnHeaderClick(col, $event)"
role="columnheader"
@ -156,9 +156,11 @@
[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()"
@ -174,6 +176,7 @@
}" />
</div>
</mat-menu>
</td>
<span class="adf-sr-only">{{ 'ADF-DATATABLE.ACCESSIBILITY.ACTIONS' | translate }}</span>
</ng-container>
</div>
@ -237,12 +240,12 @@
</mat-menu>
</div>
<label *ngIf="multiselect"
<td *ngIf="multiselect"
(keydown.enter)="onEnterKeyPressed(row, $any($event))"
(click)="onCheckboxLabelClick(row, $event)"
[for]="'select-file-' + idx"
role="gridcell"
class="adf-datatable-cell adf-datatable-checkbox adf-datatable-checkbox-single"
tabindex="0">
tabindex="-1">
<mat-checkbox
[id]="'select-file-' + idx"
[disabled]="!row?.isSelectable"
@ -257,7 +260,7 @@
class="adf-checkbox-sr-only">
{{ 'ADF-DATATABLE.ACCESSIBILITY.SELECT_FILE' | translate }}
</mat-checkbox>
</label>
</td>
<div
*ngFor="let col of getVisibleColumns(); let lastColumn = last;"