[ADF-4892] DocumentList - set appropriate column aria-sort state (#5079)

* set specific aria-sort state

* return false when table has no sorting

* move logic to component

* aria sort method

* tests

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 ?
+                 [attr.aria-sort]="col.sortable ? (getAriaSort(col) | translate) : null"
-                    ((isColumnSorted(col, 'asc') ?
-                        'ADF-DATATABLE.ACCESSIBILITY.SORT_ASCENDING':
-                        'ADF-DATATABLE.ACCESSIBILITY.SORT_DESCENDING') | 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>

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(<MatCheckboxChange> { 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');
+        });
+    });
 });

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 {

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"