[ACA-2567] - sortable (#5402)

* 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

View File

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

View File

@@ -763,6 +763,15 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
'ADF-DATATABLE.ACCESSIBILITY.SORT_ASCENDING' :
'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 {