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

[ACS-9224] Fix datatable accessibility and styling issues

Browse Source
This commit is contained in:
Shivangi917
2025-06-20 15:39:53 -04:00
parent 03bc9ff8d4
commit db65a4e652
2 changed files with 66 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -17,15 +17,18 @@
role="row"> role="row">
<!-- 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="presentation">
<div cdkDragHandle
class="adf-drag-handle"
aria-hidden="true">
</div>
</div> </div>
<!-- Actions (left) --> <!-- Actions (left) -->
<div *ngIf="actions && actionsPosition === 'left'" <div *ngIf="actions && actionsPosition === 'left'"
class="adf-actions-column adf-datatable-cell-header" class="adf-actions-column adf-datatable-cell-header"
tabindex="0" role="columnheader">
[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>
@@ -109,9 +112,7 @@
</span> </span>
<span *ngIf="!col.title && !col.sortable && !headerFilterTemplate" <span *ngIf="!col.title && !col.sortable && !headerFilterTemplate"
class="adf-sr-only"
[attr.title]="'ADF-DATATABLE.ACCESSIBILITY.EMPTY_HEADER' | translate"> [attr.title]="'ADF-DATATABLE.ACCESSIBILITY.EMPTY_HEADER' | translate">
{{ 'ADF-DATATABLE.ACCESSIBILITY.EMPTY_HEADER' | translate }}
</span> </span>
</ng-container> </ng-container>

75
lib/core/src/lib/datatable/components/datatable/datatable.component.scss
View File

@@ -288,11 +288,13 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
/* stylelint-disable-next-line no-duplicate-selectors */ /* stylelint-disable-next-line no-duplicate-selectors */
.adf-datatable-cell, .adf-datatable-cell,
.adf-datatable-cell-header { .adf-datatable-cell-header {
flex: 1; flex: 1 1 0%;
padding: 0; padding: 0;
align-items: center; align-items: center;
display: flex; display: flex;
align-self: stretch; align-self: stretch;
min-width: 0;
min-height: 48px;
&:first-child { &:first-child {
margin-left: 15px; margin-left: 15px;
@@ -300,25 +302,66 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
} }
&.adf-drag-column { &.adf-drag-column {
flex: 0; flex: 0 0 24px;
width: 24px;
padding: 0;
min-height: 100%;
position: relative;
}
}
.adf-datatable-cell-container {
overflow: hidden;
min-height: inherit;
align-items: center;
display: flex;
width: 100%;
padding: 0 10px;
}
.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;
user-select: none;
touch-action: none;
position: absolute;
left: 0;
top: 0;
&:hover {
opacity: 0.8;
background-color: rgba(0, 0, 0, 0.03);
} }
.adf-datatable-cell-container { &:active {
overflow: hidden; cursor: grabbing;
min-height: inherit; opacity: 1;
align-items: center; background-color: rgba(0, 0, 0, 0.08);
display: flex;
width: 100%;
padding: 0 10px;
} }
.adf-datatable-cell-value { &::after {
word-break: break-word; content: '⋮⋮';
display: block; font-size: 16px;
color: currentcolor;
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { opacity: 0.7;
padding: 17px 10px 10px; line-height: 1;
}
} }
} }