Merge branch '20.0.x' into aahmedov/fix-resizer-incorrect-position-in-shadow-dom-#16119

Author: Zneeky

package-lock.json

@@ -74,7 +74,7 @@
     "@types/source-map": "0.5.2",
     "express": "^5.1.0",
     "fflate": "^0.8.1",
-    "igniteui-theming": "^19.2.1",
+    "igniteui-theming": "^19.2.3",
     "igniteui-trial-watermark": "^3.1.0",
     "lodash-es": "^4.17.21",
     "rxjs": "^7.8.2",

package.json

@@ -73,7 +73,7 @@
         "tslib": "^2.3.0",
         "igniteui-trial-watermark": "^3.1.0",
         "lodash-es": "^4.17.21",
-        "igniteui-theming": "^19.2.1",
+        "igniteui-theming": "^19.2.3",
         "@igniteui/material-icons-extended": "^3.1.0"
     },
     "peerDependencies": {

projects/igniteui-angular/package.json

@@ -132,7 +132,7 @@
 
         @if $variant != 'material' {
             %switch-thumb {
-                background: var-get($theme, 'border-hover-color');
+                background: var-get($theme, 'thumb-off-hover-color');
             }
 
             %switch-thumb--x {

projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss

@@ -7,6 +7,7 @@
 
 // Used to configure color accessibility for charts
 @use 'igniteui-theming/sass/color/functions' as color;
+@use 'igniteui-theming/sass/themes/mixins' as theming;
 
 // Common components
 @use '../components/_common/igx-control';
@@ -113,6 +114,8 @@
         }
     }
 
+    @include theming.spacing();
+
     @property --_progress-integer {
         syntax: '<integer>';
         initial-value: 0;

projects/igniteui-angular/src/lib/core/styles/themes/_core.scss

@@ -84,18 +84,6 @@
         --ig-size-small: 1;
         --ig-size-medium: 2;
         --ig-size-large: 3;
-
-        --ig-spacing-small: 1;
-        --ig-spacing-medium: 1;
-        --ig-spacing-large: 1;
-
-        --ig-spacing-inline-small: 1;
-        --ig-spacing-inline-medium: 1;
-        --ig-spacing-inline-large: 1;
-
-        --ig-spacing-block-small: 1;
-        --ig-spacing-block-medium: 1;
-        --ig-spacing-block-large: 1;
     }
 
     @if not(list.index($exclude, 'palette')) {

projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss

@@ -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/cell.component.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
+    }
 }