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"