diff --git a/lib/core/datatable/components/datatable/datatable.component.html b/lib/core/datatable/components/datatable/datatable.component.html
index 154ae8f025..7385895b0c 100644
--- a/lib/core/datatable/components/datatable/datatable.component.html
+++ b/lib/core/datatable/components/datatable/datatable.component.html
@@ -25,11 +25,7 @@
(keyup.enter)="onColumnHeaderClick(col)"
role="columnheader"
tabindex="0"
- [attr.aria-sort]="col.sortable ?
- ((isColumnSorted(col, 'asc') ?
- 'ADF-DATATABLE.ACCESSIBILITY.SORT_ASCENDING':
- 'ADF-DATATABLE.ACCESSIBILITY.SORT_DESCENDING') | translate) :
- null"
+ [attr.aria-sort]="col.sortable ? (getAriaSort(col) | translate) : null"
title="{{ col.title | translate }}"
adf-drop-zone dropTarget="header" [dropColumn]="col">
{{ col.srTitle | translate }}
diff --git a/lib/core/datatable/components/datatable/datatable.component.spec.ts b/lib/core/datatable/components/datatable/datatable.component.spec.ts
index 7b9a2e497d..e75ebdd72e 100644
--- a/lib/core/datatable/components/datatable/datatable.component.spec.ts
+++ b/lib/core/datatable/components/datatable/datatable.component.spec.ts
@@ -750,6 +750,38 @@ describe('DataTable', () => {
});
+ it('should indicate column that has sorting applied', () => {
+ dataTable.data = new ObjectDataTableAdapter(
+ [ { name: '1' }, { name: '2' } ],
+ [
+ new ObjectDataColumn({ key: 'name', sortable: true }),
+ new ObjectDataColumn({ key: 'other', sortable: true })
+ ]
+ );
+
+ const [col1, col2] = dataTable.getSortableColumns();
+
+ dataTable.onColumnHeaderClick(col2);
+
+ expect(dataTable.isColumnSortActive(col1)).toBe(false);
+ expect(dataTable.isColumnSortActive(col2)).toBe(true);
+ });
+
+ it('should return false for columns that have no sorting', () => {
+ dataTable.data = new ObjectDataTableAdapter(
+ [ { name: '1' }, { name: '2' } ],
+ [
+ new ObjectDataColumn({ key: 'name', sortable: false }),
+ new ObjectDataColumn({ key: 'other', sortable: false })
+ ]
+ );
+
+ const [col1, col2] = dataTable.getSortableColumns();
+
+ expect(dataTable.isColumnSortActive(col1)).toBe(false);
+ expect(dataTable.isColumnSortActive(col2)).toBe(false);
+ });
+
it('should invert "select all" status', () => {
expect(dataTable.isSelectAllChecked).toBeFalsy();
dataTable.onSelectAllClick( { checked: true });
@@ -1102,4 +1134,33 @@ describe('Accesibility', () => {
expect(datatableBodyRowAttributes.getNamedItem('role').value).toEqual('row');
expect(datatableBodyCellAttributes.getNamedItem('role').value).toEqual('gridcell');
});
+
+ describe('aria-sort', () => {
+ let column: DataColumn;
+
+ beforeEach(() => {
+ column = new ObjectDataColumn({ key: 'key' });
+ });
+
+ it('should return correct translation key when no sort is applied', () => {
+ spyOn(dataTable, 'isColumnSortActive').and.returnValue(false);
+ expect(dataTable.getAriaSort(column)).toBe('ADF-DATATABLE.ACCESSIBILITY.SORT_NONE');
+ });
+
+ it('should return translation key when column sort is ascending', () => {
+ const isColumnSortedAsc = true;
+ spyOn(dataTable, 'isColumnSortActive').and.returnValue(true);
+ spyOn(dataTable, 'isColumnSorted').and.returnValue(isColumnSortedAsc);
+
+ expect(dataTable.getAriaSort(column)).toBe('ADF-DATATABLE.ACCESSIBILITY.SORT_ASCENDING');
+ });
+
+ it('should return translation key when column sort is descending', () => {
+ const isColumnSortedAsc = false;
+ spyOn(dataTable, 'isColumnSortActive').and.returnValue(true);
+ spyOn(dataTable, 'isColumnSorted').and.returnValue(isColumnSortedAsc);
+
+ expect(dataTable.getAriaSort(column)).toBe('ADF-DATATABLE.ACCESSIBILITY.SORT_DESCENDING');
+ });
+ });
});
diff --git a/lib/core/datatable/components/datatable/datatable.component.ts b/lib/core/datatable/components/datatable/datatable.component.ts
index cc43db94ae..3babb26b7f 100644
--- a/lib/core/datatable/components/datatable/datatable.component.ts
+++ b/lib/core/datatable/components/datatable/datatable.component.ts
@@ -238,6 +238,13 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
}
}
+ isColumnSortActive(column: DataColumn): boolean {
+ if (!column || !this.data.getSorting()) {
+ return false;
+ }
+ return column.key === this.data.getSorting().key;
+ }
+
ngDoCheck() {
const changes = this.differ.diff(this.rows);
if (changes) {
@@ -705,6 +712,16 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
const name = this.getNameColumnValue();
return name ? row.getValue(name.key) : '';
}
+
+ getAriaSort(column: DataColumn): string {
+ if (!this.isColumnSortActive(column)) {
+ return 'ADF-DATATABLE.ACCESSIBILITY.SORT_NONE';
+ }
+
+ return this.isColumnSorted(column, 'asc') ?
+ 'ADF-DATATABLE.ACCESSIBILITY.SORT_ASCENDING' :
+ 'ADF-DATATABLE.ACCESSIBILITY.SORT_DESCENDING';
+ }
}
export interface DataTableDropEvent {
diff --git a/lib/core/i18n/en.json b/lib/core/i18n/en.json
index cf7086d8e7..4226fec3af 100644
--- a/lib/core/i18n/en.json
+++ b/lib/core/i18n/en.json
@@ -261,6 +261,7 @@
"SELECT_FILE": "Select file",
"SORT_ASCENDING": "ascending",
"SORT_DESCENDING": "descending",
+ "SORT_NONE": "none",
"ICON_TEXT": "File type {{ type }}",
"ICON_DISABLED": "disabled",
"ROW_OPTION_BUTTON": "Actions menu"