feat(grids): add aria-sort attribute to column headers + test checks

Author: ddaribo

projects/igniteui-angular/src/lib/grids/grid/grid.sorting.spec.ts

@@ -41,6 +41,7 @@ describe('IgxGrid - Grid Sorting #grid', () => {
             spyOn(grid.sortingDone, 'emit').and.callThrough();
             const currentColumn = 'Name';
             const lastNameColumn = 'LastName';
+            const nameHeaderCell = GridFunctions.getColumnHeader(currentColumn, fixture);
             grid.sort({ fieldName: currentColumn, dir: SortingDirection.Asc, ignoreCase: false });
             tick(30);
             fixture.detectChanges();
@@ -50,6 +51,7 @@ describe('IgxGrid - Grid Sorting #grid', () => {
                 sortingExpressions: grid.sortingExpressions,
                 owner: grid
             });
+            expect(nameHeaderCell.attributes['aria-sort']).toEqual('ascending');
 
             expect(grid.getCellByColumn(0, currentColumn).value).toEqual('ALex');
             expect(grid.getCellByColumn(0, lastNameColumn).value).toEqual('Smith');
@@ -72,13 +74,15 @@ describe('IgxGrid - Grid Sorting #grid', () => {
 
         it('Should sort grid descending by column name', () => {
             const currentColumn = 'Name';
+            const nameHeaderCell = GridFunctions.getColumnHeader(currentColumn, fixture);
             // Ignore case on sorting set to false
             grid.sort({ fieldName: currentColumn, dir: SortingDirection.Desc, ignoreCase: false });
             fixture.detectChanges();
 
 
             expect(grid.getCellByColumn(0, currentColumn).value).toEqual('Rick');
             expect(grid.getCellByColumn(grid.data.length - 1, currentColumn).value).toEqual('ALex');
+            expect(nameHeaderCell.attributes['aria-sort']).toEqual('descending');
 
             // Ignore case on sorting set to true
             grid.sort({ fieldName: currentColumn, dir: SortingDirection.Desc, ignoreCase: true });
@@ -476,6 +480,7 @@ describe('IgxGrid - Grid Sorting #grid', () => {
                 sortingExpressions: grid.sortingExpressions,
                 owner: grid
             });
+            expect(firstHeaderCell.attributes['aria-sort']).toEqual('ascending');
 
             const firstRowFirstCell = GridFunctions.getCurrentCellFromGrid(grid, 0, 0);
             const firstRowSecondCell = GridFunctions.getCurrentCellFromGrid(grid, 0, 1);
@@ -506,6 +511,7 @@ describe('IgxGrid - Grid Sorting #grid', () => {
                 sortingExpressions: grid.sortingExpressions,
                 owner: grid
             });
+            expect(firstHeaderCell.attributes['aria-sort']).toEqual('ascending');
 
             GridFunctions.clickHeaderSortIcon(firstHeaderCell);
             tick(30);
@@ -516,6 +522,7 @@ describe('IgxGrid - Grid Sorting #grid', () => {
                 sortingExpressions: grid.sortingExpressions,
                 owner: grid
             });
+            expect(firstHeaderCell.attributes['aria-sort']).toEqual('descending');
 
             const firstRowFirstCell = GridFunctions.getCurrentCellFromGrid(grid, 0, 0);
             const firstRowSecondCell = GridFunctions.getCurrentCellFromGrid(grid, 0, 1);
@@ -562,6 +569,7 @@ describe('IgxGrid - Grid Sorting #grid', () => {
             expect(GridFunctions.getColumnSortingIndex(GridFunctions.getColumnHeader('ID', fixture))).toBeNull();
             expect(grid.sorting.emit).toHaveBeenCalledTimes(3);
             expect(grid.sortingDone.emit).toHaveBeenCalledTimes(3);
+            expect(firstHeaderCell.attributes['aria-sort']).toEqual(undefined);
         }));
 
         it('Should have a valid sorting icon when sorting using the API.', () => {

projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts

@@ -63,6 +63,15 @@ export class IgxGridHeaderComponent implements DoCheck, OnDestroy {
         return this.column.selected;
     }
 
+    /**
+     * Returns the `aria-sort` of the header.
+     */
+    @HostBinding('attr.aria-sort')
+    public get ariaSort() {
+        return this.sortDirection === SortingDirection.Asc ? 'ascending'
+                : this.sortDirection === SortingDirection.Desc ? 'descending' : null;
+    }
+
     @HostBinding('class.igx-grid-th')
     public get columnGroupStyle() {
         return !this.column.columnGroup;

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts

@@ -342,6 +342,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
             const icon = GridFunctions.getHeaderSortIcon(childHeader);
             expect(icon).not.toBeNull();
             expect(icon.nativeElement.textContent.toLowerCase().trim()).toBe('arrow_downward');
+            expect(childHeader.attributes['aria-sort']).toEqual('descending');
         }));
     });
 

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts

@@ -1398,6 +1398,7 @@ describe('IgxPivotGrid #pivotGrid', () => {
                 let expectedOrder = [829, undefined, 240, 293, 296];
                 let columnValues = pivotGrid.dataView.map(x => (x as IPivotGridRecord).aggregationValues.get('USA-UnitsSold'));
                 expect(columnValues).toEqual(expectedOrder);
+                expect(headerCell.attributes['aria-sort']).toBe('ascending');
 
                 headerCell = GridFunctions.getColumnHeader('USA-UnitsSold', fixture);
                 // sort desc
@@ -1407,6 +1408,7 @@ describe('IgxPivotGrid #pivotGrid', () => {
                 expectedOrder = [829, 296, 293, 240, undefined];
                 columnValues = pivotGrid.dataView.map(x => (x as IPivotGridRecord).aggregationValues.get('USA-UnitsSold'));
                 expect(columnValues).toEqual(expectedOrder);
+                expect(headerCell.attributes['aria-sort']).toBe('descending');
 
                 // remove sort
                 headerCell = GridFunctions.getColumnHeader('USA-UnitsSold', fixture);

projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-sorting.spec.ts

@@ -26,12 +26,15 @@ describe('IgxTreeGrid - Sorting #tGrid', () => {
         it('should sort descending all treeGrid levels by column name through API', () => {
             treeGrid.sort({ fieldName: 'Name', dir: SortingDirection.Desc, ignoreCase: false,
                 strategy: DefaultSortingStrategy.instance() });
+            const nameHeaderCell = GridFunctions.getColumnHeader('Name', fix);
+
             fix.detectChanges();
 
             // Verify first level records are desc sorted
             expect(treeGrid.getCellByColumn(0, 'Name').value).toEqual('Yang Wang');
             expect(treeGrid.getCellByColumn(1, 'Name').value).toEqual('John Winchester');
             expect(treeGrid.getCellByColumn(8, 'Name').value).toEqual('Ana Sanders');
+            expect(nameHeaderCell.attributes['aria-sort']).toEqual('descending');
 
             // Verify second level records are desc sorted
             expect(treeGrid.getCellByColumn(2, 'Name').value).toEqual('Thomas Hardy');
@@ -205,6 +208,7 @@ describe('IgxTreeGrid - Sorting #tGrid', () => {
             expect(treeGrid.getCellByColumn(0, 'Name').value).toEqual('Yang Wang');
             expect(treeGrid.getCellByColumn(1, 'Name').value).toEqual('John Winchester');
             expect(treeGrid.getCellByColumn(8, 'Name').value).toEqual('Ana Sanders');
+            expect(header.attributes['aria-sort']).toEqual('descending');
 
             // Verify second level records are desc sorted
             expect(treeGrid.getCellByColumn(2, 'Name').value).toEqual('Thomas Hardy');
@@ -226,6 +230,7 @@ describe('IgxTreeGrid - Sorting #tGrid', () => {
             expect(treeGrid.getCellByColumn(0, 'Age').value).toEqual(42);
             expect(treeGrid.getCellByColumn(2, 'Age').value).toEqual(55);
             expect(treeGrid.getCellByColumn(9, 'Age').value).toEqual(61);
+            expect(header.attributes['aria-sort']).toEqual('ascending');
 
             // Verify second level records are asc sorted
             expect(treeGrid.getCellByColumn(3, 'Age').value).toEqual(29);