fix(grids): active descendant points to the active column header

Author: ddaribo

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.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/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/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/test-utils/tree-grid-functions.spec.ts

@@ -22,7 +22,7 @@ export const TREE_CELL_LOADING_CSS_CLASS = '.igx-grid__tree-loading-indicator';
 export const NUMBER_CELL_CSS_CLASS = 'igx-grid__td--number';
 export const CELL_VALUE_DIV_CSS_CLASS = '.igx-grid__td-text';
 export const ROW_EDITING_BANNER_OVERLAY_CLASS = 'igx-overlay__content';
-
+export const TREE_GRID_CONTENT_CLASS = '.igx-grid__tbody-content';
 export class TreeGridFunctions {
     public static getHeaderRow(fix) {
         return fix.debugElement.query(By.css(TREE_HEADER_ROW_CSS_CLASS));
@@ -415,6 +415,16 @@ export class TreeGridFunctions {
                     expect(selectedCell.column.field).toEqual(cell.column.field);
                     expect(selectedCell.row.index).toEqual(cell.row.index);
                     expect(selectedCell.value).toEqual(cell.value);
+
+                    // Verify the selected cell is the active descendant of the content element.
+                    let cellElement = cell.nativeElement;
+                    if (cell instanceof IgxGridCellComponent) {
+                        cellElement = treeGrid.gridAPI.get_cell_by_index(cell.row.index, cell.column.field).nativeElement;
+                    }
+                    expect(treeGrid.activeDescendant).toEqual(cellElement.id);
+                    const gridContentEl = treeGrid.nativeElement.querySelector(TREE_GRID_CONTENT_CLASS);
+                    const activeDescendant = gridContentEl.getAttribute('aria-activedescendant');
+                    expect(activeDescendant).toBe(cellElement.id);
                 }
             }
         }