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

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

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