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] Added fallback gridcell and ensured proper columnheader and gridcell roles

Browse Source
This commit is contained in:
Shivangi917
2025-06-24 03:19:47 -04:00
parent faddad5a5f
commit c188da6338
2 changed files with 182 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/core/src/lib/datatable/components/datatable/datatable.component.html
+44 -16
View File
@@ -17,22 +17,20 @@
role="row">
<!-- Drag -->
<div *ngIf="enableDragRows" class="adf-datatable-cell-header adf-drag-column">
<div cdkDragHandle
class="adf-drag-handle"
aria-hidden="true">
</div>
<div *ngIf="enableDragRows" class="adf-datatable-cell-header adf-drag-column" role="columnheader">
<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">
<span class="adf-sr-only">{{ 'ADF-DATATABLE.ACCESSIBILITY.ACTIONS' | translate }}</span>
</div>
<!-- Columns -->
<div *ngIf="multiselect" class="adf-datatable-cell-header adf-datatable-checkbox">
<div *ngIf="multiselect" class="adf-datatable-cell-header adf-datatable-checkbox" role="columnheader">
<mat-checkbox [indeterminate]="isSelectAllIndeterminate"
[checked]="isSelectAllChecked"
(change)="onSelectAllClick($event)"
@@ -110,10 +108,13 @@
{{ getSortLiveAnnouncement(col) | translate: { string: col.title | translate } }}
</span>
<span *ngIf="!col.title && !col.sortable && !headerFilterTemplate"
[attr.title]="'ADF-DATATABLE.ACCESSIBILITY.EMPTY_HEADER' | translate">
<span
*ngIf="!col.title && !col.sortable && !headerFilterTemplate"
class="adf-sr-only">
{{ 'ADF-DATATABLE.ACCESSIBILITY.EMPTY_HEADER' | translate }}
</span>
</ng-container>
<div *ngIf="col.header" class="adf-datatable-cell-value">
@@ -130,8 +131,9 @@
<span
*ngIf="col.draggable"
cdkDragHandle
[ngClass]="{ 'adf-datatable-cell-header-drag-icon': !isResizing }"
[ngClass]="{ 'adf-datatable-cell-header-drag-icon': !isResizing }">
>
<adf-icon
*ngIf="hoveredHeaderColumnIndex === columnIndex && !isResizing"
value="adf:drag_indicator"
@@ -157,12 +159,24 @@
</div>
</ng-container>
<!-- Fallback columnheader for ARIA compliance -->
<div
*ngIf="!enableDragRows && !multiselect && !(actions && actionsPosition === 'left') && getVisibleColumns().length === 0"
class="adf-datatable-cell-header"
role="columnheader"
>
<span class="adf-sr-only">
{{ 'ADF-DATATABLE.ACCESSIBILITY.EMPTY_HEADER' | translate }}
</span>
</div>
<!-- Header actions (right) -->
<div
*ngIf="(actions && actionsPosition === 'right') ||
(mainActionTemplate && showMainDatatableActions)"
class="adf-actions-column adf-datatable-actions-menu adf-datatable-cell-header adf-datatable__actions-cell"
[class.adf-datatable-actions-menu-provided]="showProvidedActions"
role="columnheader"
>
<ng-container *ngIf="mainActionTemplate">
<button
@@ -246,11 +260,12 @@
</mat-menu>
</div>
<label *ngIf="multiselect"
<div *ngIf="multiselect" role="gridcell" class="adf-datatable-cell adf-datatable-checkbox adf-datatable-checkbox-single">
<label
(keydown.enter)="onEnterKeyPressed(row, $any($event))"
(click)="onCheckboxLabelClick(row, $event)"
[for]="'select-file-' + idx"
class="adf-datatable-cell adf-datatable-checkbox adf-datatable-checkbox-single"
class="adf-datatable-checkbox-label"
tabindex="0">
<mat-checkbox
@@ -267,6 +282,8 @@
{{ 'ADF-DATATABLE.ACCESSIBILITY.SELECT_FILE' | translate }}
</mat-checkbox>
</label>
</div>
<div
*ngFor="let col of getVisibleColumns(); let lastColumn = last;"
@@ -414,6 +431,17 @@
</div>
</div>
<!-- Fallback gridcell for ARIA compliance -->
<div
*ngIf="!enableDragRows && !multiselect && !(actions && actionsPosition === 'left') && getVisibleColumns().length === 0"
class="adf-datatable-cell"
role="gridcell"
>
<span class="adf-sr-only">
{{ 'ADF-DATATABLE.ACCESSIBILITY.EMPTY_CELL' | translate }}
</span>
</div>
<!-- Row actions (right) -->
<div *ngIf="
!showProvidedActions &&
@@ -460,7 +488,7 @@
<div
role="row"
class="adf-datatable-row adf-no-permission__row">
<div class="adf-no-permission__cell adf-no-content-container adf-datatable-cell">
<div role="gridcell" class="adf-no-permission__cell adf-no-content-container adf-datatable-cell">
<ng-template *ngIf="noPermissionTemplate"
ngFor [ngForOf]="[data]"
[ngForTemplate]="noPermissionTemplate" />
@@ -469,8 +497,8 @@
</ng-template>
</div>
<ng-template #loadingRowTemplate>
<div class="adf-datatable-row adf-datatable-data-loading">
<div class="adf-no-content-container adf-datatable-cell">
<div role="row" class="adf-datatable-row adf-datatable-data-loading">
<div role="gridcell" class="adf-no-content-container adf-datatable-cell">
<ng-template *ngIf="loadingTemplate"
ngFor [ngForOf]="[data]"
[ngForTemplate]="loadingTemplate" />
lib/core/src/lib/datatable/components/datatable/datatable.component.scss
+2 -44
View File
@@ -288,13 +288,11 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
/* stylelint-disable-next-line no-duplicate-selectors */
.adf-datatable-cell,
.adf-datatable-cell-header {
flex: 1 1 0%;
flex: 1;
padding: 0;
align-items: center;
display: flex;
align-self: stretch;
min-width: 0;
min-height: 48px;
&:first-child {
margin-left: 15px;
@@ -302,12 +300,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
}
&.adf-drag-column {
flex: 0 0 24px;
width: 24px;
padding: 0;
min-height: 100%;
position: relative;
}
flex: 0;
}
.adf-datatable-cell-container {
@@ -322,46 +315,11 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
.adf-datatable-cell-value {
word-break: break-word;
display: block;
width: 100%;
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
padding: 17px 10px 10px;
}
}
.adf-drag-handle {
cursor: grab;
width: 24px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.6;
transition: opacity 0.2s ease, background-color 0.2s ease;
user-select: none;
touch-action: none;
position: absolute;
left: 0;
top: 0;
&:hover {
opacity: 0.8;
background-color: rgba(0, 0, 0, 0.03);
}
&:active {
cursor: grabbing;
opacity: 1;
background-color: rgba(0, 0, 0, 0.08);
}
&::after {
content: '⋮⋮';
font-size: 16px;
color: currentcolor;
opacity: 0.7;
line-height: 1;
}
}
.adf-datatable-row .adf-datatable-actions-menu {