Merge pull request #16096 from IgniteUI/bpachilova/column-headers-a11y-15962-master

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

Author: kacheshmarova

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

@@ -703,6 +703,17 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy, CellT
         }
     }
 
+    @HostBinding('attr.aria-rowindex')
+    protected get ariaRowIndex(): number {
+        // +2 because aria-rowindex is 1-based and the first row is the header
+        return this.rowIndex + 2;
+    }
+
+    @HostBinding('attr.aria-colindex')
+    protected get ariaColIndex(): number {
+        return this.column.index + 1;
+    }
+
     @ViewChild('defaultCell', { read: TemplateRef, static: true })
     protected defaultCellTemplate: TemplateRef<any>;
 

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

@@ -1839,6 +1839,15 @@ export abstract class IgxGridBaseDirective implements GridType,
     @HostBinding('class.igx-grid')
     protected baseClass = 'igx-grid';
 
+    @HostBinding('attr.aria-colcount')
+    protected get ariaColCount(): number {
+        return this.visibleColumns.length;
+    }
+
+    @HostBinding('attr.aria-rowcount')
+    protected get ariaRowCount(): number {
+        return this._rendered ? this._rowCount : null;
+    }
 
     /**
      * Gets/Sets the resource strings.
@@ -2765,13 +2774,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 */
@@ -3302,6 +3308,7 @@ export abstract class IgxGridBaseDirective implements GridType,
     private _sortDescendingHeaderIconTemplate: TemplateRef<IgxGridHeaderTemplateContext> = null;
     private _gridSize: Size = Size.Large;
     private _defaultRowHeight = 50;
+    private _rowCount: number;
 
     /**
      * @hidden @internal
@@ -4123,6 +4130,7 @@ export abstract class IgxGridBaseDirective implements GridType,
             if (this.hasColumnsToAutosize) {
                 this.autoSizeColumnsInView();
             }
+            this._calculateRowCount();
             this._rendered = true;
         });
         Promise.resolve().then(() => this.rendered.next(true));
@@ -6765,6 +6773,7 @@ export abstract class IgxGridBaseDirective implements GridType,
 
         this.initColumns(this._columns, (col: IgxColumnComponent) => this.columnInit.emit(col));
         this.columnListDiffer.diff(this.columnList);
+        this._calculateRowCount();
 
         this.columnList.changes
             .pipe(takeUntil(this.destroy$))
@@ -7988,4 +7997,15 @@ export abstract class IgxGridBaseDirective implements GridType,
             return recreateTreeFromFields(value, this._columns) as IFilteringExpressionsTree;
         }
     }
+
+    private _calculateRowCount(): void {
+        if (this.verticalScrollContainer?.isRemote) {
+            this._rowCount = this.verticalScrollContainer.totalItemCount ?? 0;
+        } else if (this.paginator) {
+            this._rowCount = this.totalRecords ?? 0;
+        } else {
+            this._rowCount = this.verticalScrollContainer?.igxForOf?.length ?? 0;
+        }
+        this._rowCount += 1; // include header row
+    }
 }