inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2026-09-09 18:03:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACS-9224] Add role='gridcell' and localized aria-label to checkbox column

Browse Source
This commit is contained in:
Shivangi917
2025-06-13 14:04:11 -04:00
parent eda59a1de8
commit 85e62cf080
1 changed files with 37 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/core/src/lib/datatable/components/datatable/datatable.component.html
+22 -9
View File
@@ -18,12 +18,13 @@
<!-- Drag --> <!-- Drag -->
<div *ngIf="enableDragRows" class="adf-datatable-cell-header adf-drag-column"> <div *ngIf="enableDragRows" class="adf-datatable-cell-header adf-drag-column" role="columnheader" tabindex="0" [attr.aria-label]="'ADF-DATATABLE.ACCESSIBILITY.DRAG' | translate">
<span class="adf-sr-only">{{ 'ADF-DATATABLE.ACCESSIBILITY.DRAG' | translate }}</span> <span class="adf-sr-only">{{ 'ADF-DATATABLE.ACCESSIBILITY.DRAG' | translate }}</span>
</div> </div>
<!-- Actions (left) --> <!-- Actions (left) -->
<div *ngIf="actions && actionsPosition === 'left'" class="adf-actions-column adf-datatable-cell-header"> <div *ngIf="actions && actionsPosition === 'left'" class="adf-actions-column adf-datatable-cell-header" role="columnheader" tabindex="0" [attr.aria-label]="'ADF-DATATABLE.ACCESSIBILITY.ACTIONS' | translate"
>
<span class="adf-sr-only">{{ 'ADF-DATATABLE.ACCESSIBILITY.ACTIONS' | translate }}</span> <span class="adf-sr-only">{{ 'ADF-DATATABLE.ACCESSIBILITY.ACTIONS' | translate }}</span>
</div> </div>
@@ -33,7 +34,7 @@
[checked]="isSelectAllChecked" [checked]="isSelectAllChecked"
(change)="onSelectAllClick($event)" (change)="onSelectAllClick($event)"
class="adf-checkbox-sr-only" class="adf-checkbox-sr-only"
[aria-label]="'ADF-DATATABLE.ACCESSIBILITY.SELECT_ALL' | translate"> [attr.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> </div>
@@ -106,7 +107,13 @@
{{ getSortLiveAnnouncement(col) | translate: { string: col.title | translate } }} {{ getSortLiveAnnouncement(col) | translate: { string: col.title | translate } }}
</span> </span>
<span *ngIf="!col.title && !col.sortable && !headerFilterTemplate" [attr.title]="'ADF-DATATABLE.ACCESSIBILITY.EMPTY_HEADER' | translate"></span> <span
class="adf-sr-only"
[attr.aria-label]="'ADF-DATATABLE.ACCESSIBILITY.EMPTY_HEADER' | translate"
tabindex="0">
{{ 'ADF-DATATABLE.ACCESSIBILITY.EMPTY_HEADER' | translate }}
</span>
</ng-container> </ng-container>
<div *ngIf="col.header" class="adf-datatable-cell-value"> <div *ngIf="col.header" class="adf-datatable-cell-value">
@@ -124,6 +131,8 @@
*ngIf="col.draggable" *ngIf="col.draggable"
cdkDragHandle cdkDragHandle
[ngClass]="{ 'adf-datatable-cell-header-drag-icon': !isResizing }" [ngClass]="{ 'adf-datatable-cell-header-drag-icon': !isResizing }"
aria-hidden="true"
role="presentation"
> >
<adf-icon <adf-icon
*ngIf="hoveredHeaderColumnIndex === columnIndex && !isResizing" *ngIf="hoveredHeaderColumnIndex === columnIndex && !isResizing"
@@ -134,14 +143,16 @@
</div> </div>
<div <div
*ngIf="isResizingEnabled && col.resizable && !lastColumn" *ngIf="isResizingEnabled && col.resizable && !lastColumn"
[ngClass]="hoveredHeaderColumnIndex === columnIndex && !isResizing || resizingColumnIndex === columnIndex ? 'adf-datatable__resize-handle-visible' : 'adf-datatable__resize-handle-hidden'" [ngClass]="hoveredHeaderColumnIndex === columnIndex && !isResizing || resizingColumnIndex === columnIndex ? 'adf-datatable_resize-handle-visible' : 'adf-datatable_resize-handle-hidden'"
adf-resize-handle adf-resize-handle
tabindex="0" tabindex="0"
role="button" role="button"
(click)="$event.stopPropagation()" (click)="$event.stopPropagation()"
(keyup.enter)="$event.stopPropagation()" (keyup.enter)="$event.stopPropagation()"
class="adf-datatable__resize-handle" class="adf-datatable__resize-handle"
[resizableContainer]="resizableElement"> [resizableContainer]="resizableElement"
[attr.aria-label]="'ADF-DATATABLE.ACCESSIBILITY.RESIZE_COLUMN' | translate">
<div class="adf-datatable__resize-handle--divider"></div> <div class="adf-datatable__resize-handle--divider"></div>
</div> </div>
<div class="adf-drop-header-cell-placeholder" *cdkDragPlaceholder></div> <div class="adf-drop-header-cell-placeholder" *cdkDragPlaceholder></div>
@@ -184,7 +195,7 @@
<div <div
*ngIf="!loading; else loadingRowTemplate" *ngIf="!loading; else loadingRowTemplate"
class="adf-datatable-body" class="adf-datatable-body"
[ngClass]="{ 'adf-blur-datatable-body': blurOnResize && (isDraggingHeaderColumn || isResizing), 'adf-datatable-body__draggable': enableDragRows && !isDraggingRow, 'adf-datatable-body__dragging': isDraggingRow }" [ngClass]="{ 'adf-blur-datatable-body': blurOnResize && (isDraggingHeaderColumn || isResizing), 'adf-datatable-body_draggable': enableDragRows && !isDraggingRow, 'adf-datatable-body_dragging': isDraggingRow }"
cdkDropList cdkDropList
[cdkDropListDisabled]="!enableDragRows" [cdkDropListDisabled]="!enableDragRows"
role="rowgroup"> role="rowgroup">
@@ -236,7 +247,7 @@
</button> </button>
</mat-menu> </mat-menu>
</div> </div>
<div role="gridcell">
<label *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)"
@@ -250,7 +261,7 @@
[class.adf-datatable-hover-only]="displayCheckboxesOnHover" [class.adf-datatable-hover-only]="displayCheckboxesOnHover"
[checked]="row.isSelected" [checked]="row.isSelected"
[attr.aria-checked]="row.isSelected" [attr.aria-checked]="row.isSelected"
[aria-label]="'ADF-DATATABLE.ACCESSIBILITY.SELECT_FILE' | translate" [attr.aria-label]="'ADF-DATATABLE.ACCESSIBILITY.SELECT_FILE' | translate"
data-adf-datatable-row-checkbox data-adf-datatable-row-checkbox
(change)="onCheckboxChange(row, $event)" (change)="onCheckboxChange(row, $event)"
class="adf-checkbox-sr-only"> class="adf-checkbox-sr-only">
@@ -258,6 +269,8 @@
</mat-checkbox> </mat-checkbox>
</label> </label>
</div>
<div <div
*ngFor="let col of getVisibleColumns(); let lastColumn = last;" *ngFor="let col of getVisibleColumns(); let lastColumn = last;"
role="gridcell" role="gridcell"