Address grids column headers accessibility issues - active descendant, what is announced by SRs

projects/igniteui-angular/src/lib/grids/cell.component.ts

@@ -517,7 +517,8 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy, CellT
     /** @hidden @internal */
     @HostBinding('attr.aria-describedby')
     public get ariaDescribeBy() {
-        let describeBy = (this.gridID + '_' + this.column.field).replace('.', '_');
+        let describeBy = this.grid.headerGroupsList
+                        .find(hg => hg.column.field === this.column.field)?.headerID || '';
         if (this.isInvalid) {
             describeBy += ' ' + this.ariaErrorMessage;
         }

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -2765,13 +2765,10 @@ export abstract class IgxGridBaseDirective implements GridType,
     public get activeDescendant() {
         const activeElem = this.navigation.activeNode;
 
-        if (!activeElem || !Object.keys(activeElem).length) {
-            return this.id;
+        if (!activeElem || !Object.keys(activeElem).length || activeElem.row < 0) {
+            return null;
         }
-
-        return activeElem.row < 0 ?
-            `${this.id}_${activeElem.row}_${activeElem.mchCache.level}_${activeElem.column}` :
-            `${this.id}_${activeElem.row}_${activeElem.column}`;
+        return `${this.id}_${activeElem.row}_${activeElem.column}`;
     }
 
     /** @hidden @internal */

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

@@ -43,7 +43,7 @@ describe('IgxGrid - Keyboard navigation #grid', () => {
             let selectedCell: CellType;
 
             grid.selected.subscribe((event: IGridCellEventArgs) => {
-                selectedCell = event.cell;
+                selectedCell = grid.gridAPI.get_cell_by_index(event.cell.row.index, event.cell.column.field);
             });
 
             // Focus and select first cell
@@ -54,30 +54,34 @@ describe('IgxGrid - Keyboard navigation #grid', () => {
 
             expect(selectedCell.value).toEqual(2);
             expect(selectedCell.column.field).toMatch('ID');
+            GridFunctions.verifyGridContentActiveDescendant(gridContent, selectedCell.nativeElement.id);
 
             UIInteractions.triggerEventHandlerKeyDown('arrowright', gridContent);
             fix.detectChanges();
 
             expect(selectedCell.value).toEqual('Gilberto Todd');
             expect(selectedCell.column.field).toMatch('Name');
+            GridFunctions.verifyGridContentActiveDescendant(gridContent, selectedCell.nativeElement.id);
 
             UIInteractions.triggerEventHandlerKeyDown('arrowup', gridContent);
             fix.detectChanges();
 
             expect(selectedCell.value).toEqual('Casey Houston');
             expect(selectedCell.column.field).toMatch('Name');
+            GridFunctions.verifyGridContentActiveDescendant(gridContent, selectedCell.nativeElement.id);
 
             UIInteractions.triggerEventHandlerKeyDown('arrowleft', gridContent);
             fix.detectChanges();
 
             expect(selectedCell.value).toEqual(1);
             expect(selectedCell.column.field).toMatch('ID');
+            GridFunctions.verifyGridContentActiveDescendant(gridContent, selectedCell.nativeElement.id);
         });
 
         it('should  jump to first/last cell with Ctrl', () => {
             let selectedCell: CellType;
             grid.selected.subscribe((event: IGridCellEventArgs) => {
-                selectedCell = event.cell;
+                selectedCell = grid.gridAPI.get_cell_by_index(event.cell.row.index, event.cell.column.field);
             });
 
             GridFunctions.focusFirstCell(fix, grid);
@@ -87,12 +91,14 @@ describe('IgxGrid - Keyboard navigation #grid', () => {
 
             expect(selectedCell.value).toEqual('Company A');
             expect(selectedCell.column.field).toMatch('Company');
+            GridFunctions.verifyGridContentActiveDescendant(gridContent, selectedCell.nativeElement.id);
 
             UIInteractions.triggerEventHandlerKeyDown('arrowleft', gridContent, false, false, true);
             fix.detectChanges();
 
             expect(selectedCell.value).toEqual(1);
             expect(selectedCell.column.field).toMatch('ID');
+            GridFunctions.verifyGridContentActiveDescendant(gridContent, selectedCell.nativeElement.id);
         });
 
         it('should allow vertical keyboard navigation in pinned area.', () => {
@@ -256,6 +262,7 @@ describe('IgxGrid - Keyboard navigation #grid', () => {
             expect(cell).toBeDefined();
             GridSelectionFunctions.verifyCellActive(cell);
             GridSelectionFunctions.verifyCellSelected(cell);
+            GridFunctions.verifyGridContentActiveDescendant(GridFunctions.getGridContent(fix), cell.nativeElement.id);
         });
 
         it('should allow navigating down', async () => {
@@ -401,24 +408,30 @@ describe('IgxGrid - Keyboard navigation #grid', () => {
             fix.detectChanges();
 
             const rows = GridFunctions.getRows(fix);
-            const cell = grid.gridAPI.get_cell_by_index(3, '1');
+            let cell = grid.gridAPI.get_cell_by_index(3, '1');
             const bottomRowHeight = rows[4].nativeElement.offsetHeight;
             const displayContainer = GridFunctions.getGridDisplayContainer(fix).nativeElement;
             const bottomCellVisibleHeight = displayContainer.parentElement.offsetHeight % bottomRowHeight;
             UIInteractions.simulateClickAndSelectEvent(cell);
             await wait();
             fix.detectChanges();
 
-            expect(fix.componentInstance.selectedCell.value).toEqual(30);
-            expect(fix.componentInstance.selectedCell.column.field).toMatch('1');
+            let selectedCell = fix.componentInstance.selectedCell;
+            expect(selectedCell.value).toEqual(30);
+            expect(selectedCell.column.field).toMatch('1');
+            cell = grid.gridAPI.get_cell_by_index(selectedCell.row.index, selectedCell.column.field);
+            GridFunctions.verifyGridContentActiveDescendant(GridFunctions.getGridContent(fix), cell.nativeElement.id);
             UIInteractions.triggerEventHandlerKeyDown('arrowdown', gridContent);
             await wait(DEBOUNCETIME);
             fix.detectChanges();
 
+            selectedCell = fix.componentInstance.selectedCell;
             expect(parseInt(displayContainer.style.top, 10)).toBeLessThanOrEqual(-1 * (grid.rowHeight - bottomCellVisibleHeight));
             expect(displayContainer.parentElement.scrollTop).toEqual(0);
-            expect(fix.componentInstance.selectedCell.value).toEqual(40);
-            expect(fix.componentInstance.selectedCell.column.field).toMatch('1');
+            expect(selectedCell.value).toEqual(40);
+            expect(selectedCell.column.field).toMatch('1');
+            cell = grid.gridAPI.get_cell_by_index(selectedCell.row.index, selectedCell.column.field);
+            GridFunctions.verifyGridContentActiveDescendant(GridFunctions.getGridContent(fix), cell.nativeElement.id);
         });
 
         it('should scroll into view the not fully visible cells when navigating up', async () => {

projects/igniteui-angular/src/lib/grids/grid/grid-mrl-keyboard-nav.spec.ts

@@ -290,8 +290,11 @@ describe('IgxGrid Multi Row Layout - Keyboard navigation #grid', () => {
                 GridFunctions.simulateGridContentKeydown(fix, 'ArrowUp');
                 fix.detectChanges();
 
-                expect(fix.componentInstance.selectedCell.value).toEqual(fix.componentInstance.data[0].City);
-                expect(fix.componentInstance.selectedCell.column.field).toMatch('City');
+                const selectedCell = fix.componentInstance.selectedCell;
+                expect(selectedCell.value).toEqual(fix.componentInstance.data[0].City);
+                expect(selectedCell.column.field).toMatch('City');
+                const cell = fix.componentInstance.grid.gridAPI.get_cell_by_index(selectedCell.row.index, selectedCell.column.field);
+                GridFunctions.verifyGridContentActiveDescendant(GridFunctions.getGridContent(fix), cell.nativeElement.id);
             });
 
             it('should navigate up correctly', () => {
@@ -794,15 +797,20 @@ describe('IgxGrid Multi Row Layout - Keyboard navigation #grid', () => {
                 fix.detectChanges();
 
                 // check correct cell has focus
-                const cell2 = grid.getCellByColumn(0, 'ID');
+                let cell2 = grid.getCellByColumn(0, 'ID');
                 expect(cell2.active).toBe(true);
+                let cellElement = fix.componentInstance.grid.gridAPI.get_cell_by_index(cell2.row.index, cell2.column.field).nativeElement;
+                GridFunctions.verifyGridContentActiveDescendant(GridFunctions.getGridContent(fix), cellElement.id);
 
                 // arrow right
                 GridFunctions.simulateGridContentKeydown(fix, 'ArrowRight');
                 fix.detectChanges();
 
                 // check correct cell has focus
-                expect(grid.getCellByColumn(0, 'Address').active).toBe(true);
+                cell2 = grid.getCellByColumn(0, 'Address');
+                expect(cell2.active).toBe(true);
+                cellElement = fix.componentInstance.grid.gridAPI.get_cell_by_index(cell2.row.index, cell2.column.field).nativeElement;
+                GridFunctions.verifyGridContentActiveDescendant(GridFunctions.getGridContent(fix), cellElement.id);
             });
         });
 
@@ -1914,6 +1922,7 @@ describe('IgxGrid Multi Row Layout - Keyboard navigation #grid', () => {
                 // check next cell is active and is fully in view
                 cell = grid.gridAPI.get_cell_by_index(2, 'Phone');
                 expect(cell.active).toBe(true);
+                GridFunctions.verifyGridContentActiveDescendant(GridFunctions.getGridContent(fix), cell.nativeElement.id);
                 expect(grid.verticalScrollContainer.getScroll().scrollTop).toBeGreaterThan(50);
                 let diff = grid.gridAPI.get_cell_by_index(2, 'Phone')
                     .nativeElement.getBoundingClientRect().bottom - grid.tbody.nativeElement.getBoundingClientRect().bottom;
@@ -1932,6 +1941,7 @@ describe('IgxGrid Multi Row Layout - Keyboard navigation #grid', () => {
                 // check next cell is active and is fully in view
                 cell = grid.gridAPI.get_cell_by_index(0, 'ContactName');
                 expect(cell.active).toBe(true);
+                GridFunctions.verifyGridContentActiveDescendant(GridFunctions.getGridContent(fix), cell.nativeElement.id);
                 expect(grid.verticalScrollContainer.getScroll().scrollTop).toBe(0);
                 diff = grid.gridAPI.get_cell_by_index(0, 'ContactName')
                     .nativeElement.getBoundingClientRect().top - grid.tbody.nativeElement.getBoundingClientRect().top;
@@ -1950,6 +1960,7 @@ describe('IgxGrid Multi Row Layout - Keyboard navigation #grid', () => {
                 // check next cell is active and is fully in view
                 cell = grid.gridAPI.get_cell_by_index(2, 'Address');
                 expect(cell.active).toBe(true);
+                GridFunctions.verifyGridContentActiveDescendant(GridFunctions.getGridContent(fix), cell.nativeElement.id);
                 expect(grid.verticalScrollContainer.getScroll().scrollTop).toBeGreaterThan(50);
                 diff = grid.gridAPI.get_cell_by_index(2, 'Address')
                     .nativeElement.getBoundingClientRect().bottom - grid.tbody.nativeElement.getBoundingClientRect().bottom;

projects/igniteui-angular/src/lib/grids/grid/grid.component.html

@@ -17,7 +17,6 @@
 <igx-grid-header-row class="igx-grid-thead" tabindex="0"
     [grid]="this"
     [hasMRL]="hasColumnLayouts"
-    [activeDescendant]="activeDescendant"
     [width]="calcWidth"
     [pinnedColumnCollection]="pinnedColumns"
     [unpinnedColumnCollection]="unpinnedColumns"

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

@@ -577,8 +577,10 @@ describe('IgxGrid - Column Pinning #grid', () => {
 
                 GridSelectionFunctions.verifyRowHasCheckbox(row);
                 expect(GridFunctions.getRowDisplayContainer(fix, 0)).toBeDefined();
-                expect(row.children[2].getAttribute('aria-describedby')).toBe(grid.id + '_CompanyName');
-                expect(row.children[3].getAttribute('aria-describedby')).toBe(grid.id + '_ContactName');
+                const companyNameHeader = GridFunctions.getColumnHeader('CompanyName', fix);
+                const contactNameHeader = GridFunctions.getColumnHeader('ContactName', fix);
+                expect(row.children[2].getAttribute('aria-describedby')).toBe(companyNameHeader.nativeElement.id);
+                expect(row.children[3].getAttribute('aria-describedby')).toBe(contactNameHeader.nativeElement.id);
 
                 // check scrollbar DOM
                 const scrBarStartSection = fix.debugElement.query(By.css(`${GRID_SCROLL_CLASS}-start`));
@@ -695,7 +697,8 @@ describe('IgxGrid - Column Pinning #grid', () => {
                 for (let i = 0; i <= pinnedCols.length - 1; i++) {
                     const elem = row.children[i + 1];
                     expect(parseInt((elem as any).style.left, 10)).toBe(-330);
-                    expect(elem.getAttribute('aria-describedby')).toBe(grid.id + '_' + pinnedCols[i].field);
+                    const cellColumnHeader = GridFunctions.getColumnHeader(pinnedCols[i].field, fix);
+                    expect(elem.getAttribute('aria-describedby')).toBe(cellColumnHeader.nativeElement.id);
                 }
 
                 // check correct headers have left border

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-group.component.html

@@ -42,6 +42,7 @@
     }
     <div class="igx-grid-thead__title"
         role="columnheader"
+        [id]="headerID"
         [attr.aria-label]="column.header || column.field"
         [attr.aria-expanded]="column.expanded"
         [attr.aria-selected]="column.selected"
@@ -98,7 +99,7 @@
     <igx-grid-header
         role="columnheader"
         class="igx-grid-th--fw"
-        [id]="grid.id + '_' + column.field"
+        [id]="headerID"
         [ngClass]="column.headerClasses"
         [ngStyle]="column.headerStyles | igxHeaderGroupStyle:column:grid.pipeTrigger"
         [igxColumnMovingDrag]="column"

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

@@ -60,7 +60,6 @@ export class IgxGridHeaderGroupComponent implements DoCheck {
         return this.column.colStart;
     }
 
-    @HostBinding('attr.id')
     public get headerID() {
         return `${this.grid.id}_-1_${this.column.level}_${this.column.visibleIndex}`;
     }

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

@@ -4,6 +4,7 @@ import {
     Component,
     DoCheck,
     ElementRef,
+    HostBinding,
     Input,
     QueryList,
     TemplateRef,
@@ -52,8 +53,15 @@ export class IgxGridHeaderRowComponent implements DoCheck {
     @Input()
     public unpinnedColumnCollection: ColumnType[] = [];
 
-    @Input()
-    public activeDescendant: string;
+    @HostBinding('attr.aria-activedescendant')
+    public get activeDescendant() {
+        const activeElem = this.navigation.activeNode;
+
+        if (!activeElem || !Object.keys(activeElem).length || activeElem.row >= 0) {
+            return null;
+        }
+        return `${this.grid.id}_${activeElem.row}_${activeElem.level}_${activeElem.column}`;
+    }
 
     @Input({ transform: booleanAttribute })
     public hasMRL: boolean;

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.component.html

@@ -4,7 +4,6 @@
 <igx-grid-header-row class="igx-grid-thead" tabindex="0"
     [grid]="this"
     [hasMRL]="hasColumnLayouts"
-    [activeDescendant]="activeDescendant"
     [width]="calcWidth"
     [pinnedColumnCollection]="pinnedColumns"
     [unpinnedColumnCollection]="unpinnedColumns"

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');
         }));
     });