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

[ACA-2567] - sortable (#5402)

Browse Source 
* chore: aca-2567 accessibility for sortable columns

* chore: sortable table accessibility update

* fix: refactor sortable table headers into function

* chore: updated sort by text

Co-authored-by: Mark Steadman <47225088+Steady5063@users.noreply.github.com>
This commit is contained in:
Eugenio Romano
2020-01-25 16:13:30 +01:00
committed by GitHub
parent f27b94017a
commit 142e142ccb
3 changed files with 13 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -31,10 +31,9 @@
role="columnheader" role="columnheader"
[attr.tabindex]="showHeader ? 0 : null" [attr.tabindex]="showHeader ? 0 : null"
[attr.aria-sort]="col.sortable ? (getAriaSort(col) | translate) : null" [attr.aria-sort]="col.sortable ? (getAriaSort(col) | translate) : null"
title="{{ col.title | translate }}"
adf-drop-zone dropTarget="header" [dropColumn]="col"> adf-drop-zone dropTarget="header" [dropColumn]="col">
<span *ngIf="col.srTitle" class="adf-sr-only">{{ col.srTitle | translate }}</span>
<span *ngIf="col.title" class="adf-datatable-cell-value">{{ col.title | translate}}</span> <span *ngIf="col.title" class="adf-datatable-cell-value">{{ col.title | translate}}</span>
<span class="adf-sr-only" aria-live="polite">{{ getSortLiveAnnouncement(col) | translate: {string: col.title} }}</span>
</div> </div>
<!-- Actions (right) --> <!-- Actions (right) -->
<div *ngIf="actions && actionsPosition === 'right'" class="adf-actions-column adf-datatable-cell-header adf-datatable__actions-cell"> <div *ngIf="actions && actionsPosition === 'right'" class="adf-actions-column adf-datatable-cell-header adf-datatable__actions-cell">

9
lib/core/datatable/components/datatable/datatable.component.ts
View File

@@ -763,6 +763,15 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
'ADF-DATATABLE.ACCESSIBILITY.SORT_ASCENDING' : 'ADF-DATATABLE.ACCESSIBILITY.SORT_ASCENDING' :
'ADF-DATATABLE.ACCESSIBILITY.SORT_DESCENDING'; 'ADF-DATATABLE.ACCESSIBILITY.SORT_DESCENDING';
} }
getSortLiveAnnouncement(column: DataColumn): string {
if (!this.isColumnSortActive(column)) {
return 'ADF-DATATABLE.ACCESSIBILITY.SORT_DEFAULT' ;
}
return this.isColumnSorted(column, 'asc') ?
'ADF-DATATABLE.ACCESSIBILITY.SORT_ASCENDING_BY' :
'ADF-DATATABLE.ACCESSIBILITY.SORT_DESCENDING_BY';
}
} }
export interface DataTableDropEvent { export interface DataTableDropEvent {

3
lib/core/i18n/en.json
View File

@@ -280,6 +280,9 @@
"SORT_ASCENDING": "Ascending", "SORT_ASCENDING": "Ascending",
"SORT_DESCENDING": "Descending", "SORT_DESCENDING": "Descending",
"SORT_NONE": "None", "SORT_NONE": "None",
"SORT_DEFAULT": "Sortable",
"SORT_ASCENDING_BY": "Ascending by {{ string }}",
"SORT_DESCENDING_BY": "Descending by {{ string }}",
"ICON_TEXT": "Item type {{ type }}", "ICON_TEXT": "Item type {{ type }}",
"ICON_DISABLED": "Disabled", "ICON_DISABLED": "Disabled",
"ROW_OPTION_BUTTON": "Actions" "ROW_OPTION_BUTTON": "Actions"