inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-4966] Keep table headers - visually hidden when showHeader false (#5170)

Browse Source 
* [ADF-4966] Move or copy - Add table headers - visually hidden

- needed by screen readers

* [ADF-4966] use automatic column header translation

* [ADF-4966] move the fix to the datatable component

-improve accessibility - keep table headers-but visually hidden for showHeader false

* [ADF-4966] code review change

* [ADF-4966] fix array shallow copy on failing e2e-test

* [ADF-4966] improve accessibility only for list display

- fixes failing test
This commit is contained in:
Suzana Dirla
2019-10-25 17:46:45 +03:00
committed by Denys Vuika
parent d35e8d8523
commit 6119ce83de
4 changed files with 9 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.html
View File

@@ -78,14 +78,14 @@
<data-columns>
<data-column key="$thumbnail" type="image"></data-column>
<data-column key="name" type="text" class="adf-full-width adf-ellipsis-cell">
<data-column key="name" type="text" title="ADF-DOCUMENT-LIST.LAYOUT.NAME" class="adf-full-width adf-ellipsis-cell">
<ng-template let-context>
<adf-name-location-cell [row]="context.row"></adf-name-location-cell>
</ng-template>
</data-column>
<data-column key="modifiedAt" type="date" format="timeAgo" class="adf-content-selector-modified-cell"></data-column>
<data-column key="createdByUser.displayName" type="text" class="adf-content-selector-modifier-cell"></data-column>
<data-column key="visibility" type="text" class="adf-content-selector-visibility-cell"></data-column>
<data-column key="modifiedAt" type="date" title="ADF-DOCUMENT-LIST.LAYOUT.MODIFIED_ON" format="timeAgo" class="adf-content-selector-modified-cell"></data-column>
<data-column key="createdByUser.displayName" type="text" title="ADF-DOCUMENT-LIST.LAYOUT.CREATED_BY" class="adf-content-selector-modifier-cell"></data-column>
<data-column key="visibility" type="text" title="ADF-DOCUMENT-LIST.LAYOUT.STATUS" class="adf-content-selector-visibility-cell"></data-column>
</data-columns>
</adf-document-list>

1
lib/content-services/src/lib/i18n/en.json
View File

@@ -37,6 +37,7 @@
"NO_PERMISSION": "You don't have permission to view this file or folder.",
"LAYOUT": {
"CREATED": "Created",
"CREATED_BY": "Created by",
"THUMBNAIL": "Thumbnail",
"NAME": "Name",
"LOCATION": "Location",

6
lib/core/datatable/components/datatable/datatable.component.html
View File

@@ -5,7 +5,7 @@
[class.adf-datatable-list]="display === 'list'"
[class.adf-sticky-header]="isStickyHeaderEnabled()"
[class.adf-datatable--empty]="!isHeaderVisible()">
<div *ngIf="showHeader && isHeaderVisible()" class="adf-datatable-header" role="rowgroup">
<div *ngIf="isHeaderVisible()" class="adf-datatable-header" role="rowgroup" [ngClass]="{ 'adf-sr-only': !showHeader }">
<div class="adf-datatable-row" *ngIf="display === 'list'" role="row">
<!-- Actions (left) -->
<div *ngIf="actions && actionsPosition === 'left'" class="adf-actions-column adf-datatable-cell-header">
@@ -24,7 +24,7 @@
(click)="onColumnHeaderClick(col)"
(keyup.enter)="onColumnHeaderClick(col)"
role="columnheader"
tabindex="0"
[tabindex]="showHeader ? 0 : -1"
[attr.aria-sort]="col.sortable ? (getAriaSort(col) | translate) : null"
title="{{ col.title | translate }}"
adf-drop-zone dropTarget="header" [dropColumn]="col">
@@ -36,7 +36,7 @@
<span class="adf-sr-only">Actions</span>
</div>
</div>
<mat-form-field *ngIf="display === 'gallery'">
<mat-form-field *ngIf="display === 'gallery' && showHeader">
<mat-select [value]="getSortingKey()" [attr.data-automation-id]="'grid-view-sorting'">
<mat-option *ngFor="let col of getSortableColumns()"
[value]="col.key"

2
lib/testing/src/lib/core/pages/data-table-component.page.ts
View File

@@ -130,7 +130,7 @@ export class DataTableComponentPage {
initialList.push(text.toLowerCase());
}
});
let sortedList = initialList;
let sortedList = [...initialList];
sortedList = sortedList.sort();
if (sortOrder.toLocaleLowerCase() === 'desc') {
sortedList = sortedList.reverse();