Merge branch 'master' of https://github.com/IgniteUI/igniteui-angular into update-typedoc-plugin

Author: Aleksandyr

projects/igniteui-angular/package.json

@@ -84,7 +84,7 @@
         "web-animations-js": "^2.3.2"
     },
     "igxDevDependencies": {
-        "@igniteui/angular-schematics": "~12.0.800-rc.0"
+        "@igniteui/angular-schematics": "~12.0.800"
     },
     "ng-update": {
         "migrations": "./migrations/migration-collection.json"

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

@@ -96,7 +96,7 @@
 </div>
 
 <div igxGridBody (keydown.control.c)="copyHandler($event)" (copy)="copyHandler($event)" class="igx-grid__tbody" role="rowgroup">
-    <div class="igx-grid__tbody-content" tabindex="0" (keydown)="navigation.handleNavigation($event)" (focus)="navigation.focusTbody($event)"
+    <div class="igx-grid__tbody-content" tabindex="0" [attr.role]="dataView.length ? null : 'row'" (keydown)="navigation.handleNavigation($event)" (focus)="navigation.focusTbody($event)"
         (onDragStop)="selectionService.dragMode = $event" (scroll)='preventContainerScroll($event)'
         (onDragScroll)="dragScroll($event)" [igxGridDragSelect]="selectionService.dragMode"
         [style.height.px]='totalHeight' [style.width.px]='calcWidth || null' #tbody [attr.aria-activedescendant]="activeDescendant">
@@ -250,7 +250,7 @@
 </ng-template>
 
 <ng-template #emptyFilteredGrid>
-    <span class="igx-grid__tbody-message">
+    <span class="igx-grid__tbody-message" role="cell">
         <span>{{emptyFilteredGridMessage}}</span>
         <span *ngIf='showAddButton'>
             <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>
@@ -259,7 +259,7 @@
 </ng-template>
 
 <ng-template #defaultEmptyGrid>
-    <span class="igx-grid__tbody-message">
+    <span class="igx-grid__tbody-message" role="cell">
         <span>{{emptyGridMessage}}</span>
         <span *ngIf='showAddButton'>
             <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>

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

@@ -271,6 +271,33 @@ describe('IgxGrid Component Tests #grid', () => {
             expect(summaryItemHeigh.offsetHeight).toBe(grid.defaultSummaryHeight - 1);
         }));
 
+        it ('checks if attributes are correctly assigned when grid has or does not have data', fakeAsync( () => {
+            const fixture = TestBed.createComponent(IgxGridTestComponent);
+            const grid = fixture.componentInstance.grid;
+
+            fixture.componentInstance.generateData(30);
+            fixture.detectChanges();
+            tick(100);
+            // Checks if igx-grid__tbody-content attribute is null when there is data in the grid
+            const container = fixture.nativeElement.querySelectorAll('.igx-grid__tbody-content')[0];
+            expect(container.getAttribute('role')).toBe(null);
+
+            //Filter grid so no results are available and grid is empty
+            grid.filter('index','111',IgxStringFilteringOperand.instance().condition('contains'),true);
+            grid.markForCheck();
+            fixture.detectChanges();
+            expect(container.getAttribute('role')).toMatch('row');
+
+            // clear grid data and check if attribute is now 'row'
+            grid.clearFilter();
+            fixture.componentInstance.clearData();
+            fixture.detectChanges();
+            tick(100);
+
+            expect(container.getAttribute('role')).toMatch('row');
+
+        }));
+
         it('should render empty message', fakeAsync(() => {
             const fixture = TestBed.createComponent(IgxGridTestComponent);
             fixture.componentInstance.data = [];

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

@@ -661,8 +661,8 @@ export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridTy
      * @param index
      */
     public getRowByKey(key: any): RowType {
-        const rec = this.primaryKey ? this.filteredSortedData.find(r => r[this.primaryKey] === key) :
-            this.filteredSortedData.find(r => r === key);
+        const rec = this.filteredSortedData ? this.primaryKey ? this.filteredSortedData.find(r => r[this.primaryKey] === key) :
+            this.filteredSortedData.find(r => r === key) : undefined;
         const index = this.dataView.findIndex(r => r.data && r.data === rec);
         if (index < 0 || index >= this.filteredSortedData.length) {
             return undefined;