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

fix: add role='gridcell' for checkbox accessibility

Browse Source
This commit is contained in:
Shivangi Shree
2025-06-13 03:10:49 -04:00
parent 11d1e774bd
commit c86fd49990
1 changed files with 14 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -18,12 +18,12 @@
<!-- 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" aria-label="Drag">
<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" aria-label="Actions">
<span class="adf-sr-only">{{ 'ADF-DATATABLE.ACCESSIBILITY.ACTIONS' | translate }}</span> <span class="adf-sr-only">{{ 'ADF-DATATABLE.ACCESSIBILITY.ACTIONS' | translate }}</span>
</div> </div>
@@ -106,7 +106,14 @@
{{ 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 *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"
@@ -141,7 +150,8 @@
(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"
aria-label="Resize column">
<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>