inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-09-10 14:11:42 +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 -->
<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>
</div>
<!-- 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>
</div>
@@ -106,7 +106,14 @@
{{ getSortLiveAnnouncement(col) | translate: { string: col.title | translate } }}
</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>
<div *ngIf="col.header" class="adf-datatable-cell-value">
@@ -124,6 +131,8 @@
*ngIf="col.draggable"
cdkDragHandle
[ngClass]="{ 'adf-datatable-cell-header-drag-icon': !isResizing }"
aria-hidden="true"
role="presentation"
>
<adf-icon
*ngIf="hoveredHeaderColumnIndex === columnIndex && !isResizing"
@@ -141,7 +150,8 @@
(click)="$event.stopPropagation()"
(keyup.enter)="$event.stopPropagation()"
class="adf-datatable__resize-handle"
[resizableContainer]="resizableElement">
[resizableContainer]="resizableElement"
aria-label="Resize column">
<div class="adf-datatable__resize-handle--divider"></div>
</div>
<div class="adf-drop-header-cell-placeholder" *cdkDragPlaceholder></div>