From b4f1285d0bd8be90f74d75e2a98a3e361a5a4a5e Mon Sep 17 00:00:00 2001
From: MKirova <MKirova@DEV-MKIROVA>
Date: Thu, 8 Sep 2022 17:07:30 +0300
Subject: [PATCH 1/3] chore(*): Add aria-describedby reference to error message
 element as well since readers are more likely to read it than
 aria-errormessage.

---
 .../igniteui-angular/src/lib/grids/cell.component.html | 10 ++++++++++
 .../igniteui-angular/src/lib/grids/cell.component.ts   |  3 +++
 .../src/lib/grids/grid/expandable-cell.component.html  | 10 ++++++++++
 .../src/lib/grids/tree-grid/tree-cell.component.html   | 10 ++++++++++
 4 files changed, 33 insertions(+)

diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.html b/projects/igniteui-angular/src/lib/grids/cell.component.html
index 40837dfd5eb..d6217201af6 100644
--- a/projects/igniteui-angular/src/lib/grids/cell.component.html
+++ b/projects/igniteui-angular/src/lib/grids/cell.component.html
@@ -75,6 +75,8 @@
             <input
                 igxInput
                 [attr.aria-errormessage]="ariaErrorMessage"
+                [attr.aria-describedby]="ariaErrorMessage"
+                [attr.aria-invalid]="isInvalid"
                 [igxFocus]="true"
                 [formControl]="formControl"
                 (compositionstart)="grid.crudService.isInCompositionMode = true"
@@ -87,6 +89,8 @@
             <input
                 igxInput
                 [attr.aria-errormessage]="ariaErrorMessage"
+                [attr.aria-describedby]="ariaErrorMessage"
+                [attr.aria-invalid]="isInvalid"
                 [igxFocus]="true"
                 [step]="step"
                 type="number"
@@ -132,6 +136,8 @@
             <input
                 type="text"
                 [attr.aria-errormessage]="ariaErrorMessage"
+                [attr.aria-describedby]="ariaErrorMessage"
+                [attr.aria-invalid]="isInvalid"
                 [formControl]="formControl"
                 igxInput
                 [igxDateTimeEditor]="column.defaultDateTimeFormat" 
@@ -145,6 +151,8 @@
             <input
                 igxInput
                 [attr.aria-errormessage]="ariaErrorMessage"
+                [attr.aria-describedby]="ariaErrorMessage"
+                [attr.aria-invalid]="isInvalid"
                 [igxFocus]="true"
                 [step]="step"
                 type="number"
@@ -158,6 +166,8 @@
             <input
                 igxInput
                 [attr.aria-errormessage]="ariaErrorMessage"
+                [attr.aria-describedby]="ariaErrorMessage"
+                [attr.aria-invalid]="isInvalid"
                 [igxFocus]="true"
                 [step]="step"
                 type="number"
diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.ts b/projects/igniteui-angular/src/lib/grids/cell.component.ts
index 9ea256eb4f3..f3a91121881 100644
--- a/projects/igniteui-angular/src/lib/grids/cell.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/cell.component.ts
@@ -472,6 +472,9 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy, CellT
     /** @hidden @internal */
     @HostBinding('attr.aria-describedby')
     public get describeBy() {
+        if (this.isInvalid) {
+            return this.ariaErrorMessage;
+        }
         return this.grid.id + '_' + this.column.field;
     }
 
diff --git a/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.html b/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.html
index 2b246079ec6..1ea96cc68f5 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.html
+++ b/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.html
@@ -56,6 +56,8 @@
             <input
                 igxInput
                 [attr.aria-errormessage]="ariaErrorMessage"
+                [attr.aria-describedby]="ariaErrorMessage"
+                [attr.aria-invalid]="isInvalid"
                 [igxFocus]="true"
                 [formControl]="formControl"
                 (compositionstart)="grid.crudService.isInCompositionMode = true"
@@ -68,6 +70,8 @@
             <input
                 igxInput
                 [attr.aria-errormessage]="ariaErrorMessage"
+                [attr.aria-describedby]="ariaErrorMessage"
+                [attr.aria-invalid]="isInvalid"
                 [igxFocus]="true"
                 [step]="step"
                 type="number"
@@ -113,6 +117,8 @@
             <input
                 type="text"
                 [attr.aria-errormessage]="ariaErrorMessage"
+                [attr.aria-describedby]="ariaErrorMessage"
+                [attr.aria-invalid]="isInvalid"
                 [formControl]="formControl"
                 igxInput
                 [igxDateTimeEditor]="column.defaultDateTimeFormat" 
@@ -126,6 +132,8 @@
             <input
                 igxInput
                 [attr.aria-errormessage]="ariaErrorMessage"
+                [attr.aria-describedby]="ariaErrorMessage"
+                [attr.aria-invalid]="isInvalid"
                 [igxFocus]="true"
                 [step]="step"
                 type="number"
@@ -139,6 +147,8 @@
             <input
                 igxInput
                 [attr.aria-errormessage]="ariaErrorMessage"
+                [attr.aria-describedby]="ariaErrorMessage"
+                [attr.aria-invalid]="isInvalid"
                 [igxFocus]="true"
                 [step]="step"
                 type="number"
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html
index 2ba46b0050a..8ad77686c95 100644
--- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html
+++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html
@@ -76,6 +76,8 @@
             <input
                 igxInput
                 [attr.aria-errormessage]="ariaErrorMessage"
+                [attr.aria-describedby]="ariaErrorMessage"
+                [attr.aria-invalid]="isInvalid"
                 [igxFocus]="true"
                 [formControl]="formControl"
                 (compositionstart)="grid.crudService.isInCompositionMode = true"
@@ -88,6 +90,8 @@
             <input
                 igxInput
                 [attr.aria-errormessage]="ariaErrorMessage"
+                [attr.aria-describedby]="ariaErrorMessage"
+                [attr.aria-invalid]="isInvalid"
                 [igxFocus]="true"
                 [step]="step"
                 type="number"
@@ -133,6 +137,8 @@
             <input
                 type="text"
                 [attr.aria-errormessage]="ariaErrorMessage"
+                [attr.aria-describedby]="ariaErrorMessage"
+                [attr.aria-invalid]="isInvalid"
                 [formControl]="formControl"
                 igxInput
                 [igxDateTimeEditor]="column.defaultDateTimeFormat" 
@@ -146,6 +152,8 @@
             <input
                 igxInput
                 [attr.aria-errormessage]="ariaErrorMessage"
+                [attr.aria-describedby]="ariaErrorMessage"
+                [attr.aria-invalid]="isInvalid"
                 [igxFocus]="true"
                 [step]="step"
                 type="number"
@@ -159,6 +167,8 @@
             <input
                 igxInput
                 [attr.aria-errormessage]="ariaErrorMessage"
+                [attr.aria-describedby]="ariaErrorMessage"
+                [attr.aria-invalid]="isInvalid"
                 [igxFocus]="true"
                 [step]="step"
                 type="number"

From fb13fb8a77dc170cd51f51edb45a46785e8f60c0 Mon Sep 17 00:00:00 2001
From: MKirova <MKirova@DEV-MKIROVA>
Date: Thu, 8 Sep 2022 18:32:55 +0300
Subject: [PATCH 2/3] chore(*): Test with removing aria-describeby that points
 to the header. Also remove aria-errormessage since it's not supported.

---
 .../igniteui-angular/src/lib/grids/cell.component.html |  5 -----
 .../igniteui-angular/src/lib/grids/cell.component.ts   | 10 +---------
 .../src/lib/grids/grid/expandable-cell.component.html  |  5 -----
 .../src/lib/grids/grid/grid-row.component.html         |  6 ++----
 .../hierarchical-grid/hierarchical-row.component.html  |  4 ++--
 .../src/lib/grids/pivot-grid/pivot-row.component.html  |  2 +-
 .../src/lib/grids/summaries/summary-row.component.html |  2 --
 .../src/lib/grids/tree-grid/tree-cell.component.html   |  5 -----
 .../lib/grids/tree-grid/tree-grid-row.component.html   |  4 ----
 9 files changed, 6 insertions(+), 37 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.html b/projects/igniteui-angular/src/lib/grids/cell.component.html
index d6217201af6..bd6b3667acd 100644
--- a/projects/igniteui-angular/src/lib/grids/cell.component.html
+++ b/projects/igniteui-angular/src/lib/grids/cell.component.html
@@ -74,7 +74,6 @@
         <igx-input-group displayDensity="compact" >
             <input
                 igxInput
-                [attr.aria-errormessage]="ariaErrorMessage"
                 [attr.aria-describedby]="ariaErrorMessage"
                 [attr.aria-invalid]="isInvalid"
                 [igxFocus]="true"
@@ -88,7 +87,6 @@
         <igx-input-group displayDensity="compact" [formGroup]="formGroup">
             <input
                 igxInput
-                [attr.aria-errormessage]="ariaErrorMessage"
                 [attr.aria-describedby]="ariaErrorMessage"
                 [attr.aria-invalid]="isInvalid"
                 [igxFocus]="true"
@@ -135,7 +133,6 @@
         <igx-input-group [formGroup]="formGroup">
             <input
                 type="text"
-                [attr.aria-errormessage]="ariaErrorMessage"
                 [attr.aria-describedby]="ariaErrorMessage"
                 [attr.aria-invalid]="isInvalid"
                 [formControl]="formControl"
@@ -150,7 +147,6 @@
             <igx-prefix *ngIf="grid.currencyPositionLeft">{{ currencyCodeSymbol }}</igx-prefix>
             <input
                 igxInput
-                [attr.aria-errormessage]="ariaErrorMessage"
                 [attr.aria-describedby]="ariaErrorMessage"
                 [attr.aria-invalid]="isInvalid"
                 [igxFocus]="true"
@@ -165,7 +161,6 @@
         <igx-input-group displayDensity="compact" [formGroup]="formGroup">
             <input
                 igxInput
-                [attr.aria-errormessage]="ariaErrorMessage"
                 [attr.aria-describedby]="ariaErrorMessage"
                 [attr.aria-invalid]="isInvalid"
                 [igxFocus]="true"
diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.ts b/projects/igniteui-angular/src/lib/grids/cell.component.ts
index f3a91121881..962d4648481 100644
--- a/projects/igniteui-angular/src/lib/grids/cell.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/cell.component.ts
@@ -469,17 +469,9 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy, CellT
     public get readonly(): boolean {
         return !this.editable;
     }
-    /** @hidden @internal */
-    @HostBinding('attr.aria-describedby')
-    public get describeBy() {
-        if (this.isInvalid) {
-            return this.ariaErrorMessage;
-        }
-        return this.grid.id + '_' + this.column.field;
-    }
 
     /** @hidden @internal */
-    @HostBinding('attr.aria-errormessage')
+    @HostBinding('attr.aria-describedby')
     public get ariaErrorMessage() {
         return this.grid.id + '_' + this.column.field + '_' + this.intRow.index + '_error';
     }
diff --git a/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.html b/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.html
index 1ea96cc68f5..fff496a4bef 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.html
+++ b/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.html
@@ -55,7 +55,6 @@
         <igx-input-group displayDensity="compact" >
             <input
                 igxInput
-                [attr.aria-errormessage]="ariaErrorMessage"
                 [attr.aria-describedby]="ariaErrorMessage"
                 [attr.aria-invalid]="isInvalid"
                 [igxFocus]="true"
@@ -69,7 +68,6 @@
         <igx-input-group displayDensity="compact" [formGroup]="formGroup">
             <input
                 igxInput
-                [attr.aria-errormessage]="ariaErrorMessage"
                 [attr.aria-describedby]="ariaErrorMessage"
                 [attr.aria-invalid]="isInvalid"
                 [igxFocus]="true"
@@ -116,7 +114,6 @@
         <igx-input-group [formGroup]="formGroup">
             <input
                 type="text"
-                [attr.aria-errormessage]="ariaErrorMessage"
                 [attr.aria-describedby]="ariaErrorMessage"
                 [attr.aria-invalid]="isInvalid"
                 [formControl]="formControl"
@@ -131,7 +128,6 @@
             <igx-prefix *ngIf="grid.currencyPositionLeft">{{ currencyCodeSymbol }}</igx-prefix>
             <input
                 igxInput
-                [attr.aria-errormessage]="ariaErrorMessage"
                 [attr.aria-describedby]="ariaErrorMessage"
                 [attr.aria-invalid]="isInvalid"
                 [igxFocus]="true"
@@ -146,7 +142,6 @@
         <igx-input-group displayDensity="compact" [formGroup]="formGroup">
             <input
                 igxInput
-                [attr.aria-errormessage]="ariaErrorMessage"
                 [attr.aria-describedby]="ariaErrorMessage"
                 [attr.aria-invalid]="isInvalid"
                 [igxFocus]="true"
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html
index a18e8d52291..3362bd5e556 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html
@@ -95,7 +95,6 @@
         <igx-grid-cell
         class="igx-grid__td igx-grid__td--fw"
         [class.igx-grid__td--edited]="key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row"
-        [attr.aria-describedby]="gridID + '_' + col.field | igxStringReplace:'.':'_'"
         [class.igx-grid__td--pinned]="col.pinned"
         [class.igx-grid__td--number]="col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'"
         [class.igx-grid__td--bool]="col.dataType === 'boolean'"
@@ -129,7 +128,6 @@
 <ng-template #expandableCellTemplate let-col>
     <igx-expandable-grid-cell
         [class.igx-grid__td--pinned]="col.pinned"
-        [attr.aria-describedby]="gridID + '_' + col.field | igxStringReplace:'.':'_'"
         class="igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell"
         [class.igx-grid__td--edited]="key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row"
         [class.igx-grid__td--number]="(col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency') && col.visibleIndex !== 0"
@@ -163,7 +161,7 @@
     <igx-grid-cell
         class="igx-grid__td igx-grid__td--fw"
         [class.igx-grid__td--edited]="key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row"
-        [attr.aria-describedby]="gridID + '_' + col.field | igxStringReplace:'.':'_'"
+
         [class.igx-grid__td--pinned]="col.pinned"
         [class.igx-grid__td--number]="col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'"
         [ngClass]="col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger"
@@ -196,7 +194,7 @@
     <igx-expandable-grid-cell
         class="igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell"
         [class.igx-grid__td--edited]="key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row"
-        [attr.aria-describedby]="gridID + '_' + col.field | igxStringReplace:'.':'_'"
+
         [class.igx-grid__td--pinned]="col.pinned"
         [class.igx-grid__td--number]="(col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency') && col.visibleIndex !== 0"
         [ngClass]="col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger"
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html
index 1153f849132..307bfd0f3e7 100644
--- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html
+++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html
@@ -54,7 +54,7 @@
         <igx-hierarchical-grid-cell
             class="igx-grid__td igx-grid__td--fw"
             [class.igx-grid__td--edited]="key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row"
-            [attr.aria-describedby]="gridID + '_' + col.field | igxStringReplace:'.':'_'"
+
             [class.igx-grid__td--number]="col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'"
             [class.igx-grid__td--bool]="col.dataType === 'boolean'"
             [ngClass]="col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger"
@@ -102,7 +102,7 @@
         <igx-hierarchical-grid-cell *ngFor="let col of pinnedColumns | igxNotGrouped"
             class="igx-grid__td igx-grid__td--fw igx-grid__td--pinned"
             [class.igx-grid__td--edited]="key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row"
-            [attr.aria-describedby]="gridID + '_' + col.field | igxStringReplace:'.':'_'"
+
             [class.igx-grid__td--number]="col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'"
             [ngClass]="col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger"
             [ngStyle]="col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger"
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row.component.html b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row.component.html
index 1e77e5412b1..17c22789db3 100644
--- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row.component.html
+++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row.component.html
@@ -4,7 +4,7 @@
     [igxForTrackBy]='grid.trackColumnChanges' #igxDirRef>
     <igx-grid-cell #cell class="igx-grid__td igx-grid__td--fw"
         [class.igx-grid__td--edited]="key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row"
-        [attr.aria-describedby]="gridID + '_' + col.field | igxStringReplace:'.':'_'"
+
         [class.igx-grid__td--number]="col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'"
         [class.igx-grid__td--bool]="col.dataType === 'boolean'"
         [ngClass]="this.getCellClass(col) | igxPivotCellStyleClasses:data[col.field]:data:getColumnData(col):viewIndex:grid.pipeTrigger"
diff --git a/projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.html b/projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.html
index c982b46fd21..2d7ed78296f 100644
--- a/projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.html
+++ b/projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.html
@@ -13,7 +13,6 @@
     <ng-template igxGridFor let-col [igxGridForOf]="unpinnedColumns | igxNotGrouped" [igxForScrollContainer]="grid.parentVirtDir" let-colIndex="index" [igxForScrollOrientation]="'horizontal'" [igxForContainerSize]="grid.unpinnedWidth" [igxForTrackBy]="grid.trackColumnChanges" [igxForSizePropName]='"calcPixelWidth"' #igxDirRef>
         <igx-grid-summary-cell
             class="igx-grid-summary igx-grid-summary--fw"
-            [attr.aria-describedby]="gridID + '_' + col.field | igxStringReplace:'.':'_'"
             role="cell"
             [class.igx-grid-summary--cosy]="grid.displayDensity === 'cosy'"
             [class.igx-grid-summary--compact]="grid.displayDensity === 'compact'"
@@ -43,7 +42,6 @@
 <ng-template #summaryCellTemplate let-col>
     <igx-grid-summary-cell *ngFor="let col of pinnedColumns | igxNotGrouped"
             role="cell"
-            [attr.aria-describedby]="gridID + '_' + col.field | igxStringReplace:'.':'_'"
             class="igx-grid-summary igx-grid-summary--fw igx-grid-summary--pinned"
             [class.igx-grid-summary--cosy]="grid.displayDensity === 'cosy'"
             [class.igx-grid-summary--compact]="grid.displayDensity === 'compact'"
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html
index 8ad77686c95..fc48252354b 100644
--- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html
+++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html
@@ -75,7 +75,6 @@
         <igx-input-group displayDensity="compact" >
             <input
                 igxInput
-                [attr.aria-errormessage]="ariaErrorMessage"
                 [attr.aria-describedby]="ariaErrorMessage"
                 [attr.aria-invalid]="isInvalid"
                 [igxFocus]="true"
@@ -89,7 +88,6 @@
         <igx-input-group displayDensity="compact" [formGroup]="formGroup">
             <input
                 igxInput
-                [attr.aria-errormessage]="ariaErrorMessage"
                 [attr.aria-describedby]="ariaErrorMessage"
                 [attr.aria-invalid]="isInvalid"
                 [igxFocus]="true"
@@ -136,7 +134,6 @@
         <igx-input-group [formGroup]="formGroup">
             <input
                 type="text"
-                [attr.aria-errormessage]="ariaErrorMessage"
                 [attr.aria-describedby]="ariaErrorMessage"
                 [attr.aria-invalid]="isInvalid"
                 [formControl]="formControl"
@@ -151,7 +148,6 @@
             <igx-prefix *ngIf="grid.currencyPositionLeft">{{ currencyCodeSymbol }}</igx-prefix>
             <input
                 igxInput
-                [attr.aria-errormessage]="ariaErrorMessage"
                 [attr.aria-describedby]="ariaErrorMessage"
                 [attr.aria-invalid]="isInvalid"
                 [igxFocus]="true"
@@ -166,7 +162,6 @@
         <igx-input-group displayDensity="compact" [formGroup]="formGroup">
             <input
                 igxInput
-                [attr.aria-errormessage]="ariaErrorMessage"
                 [attr.aria-describedby]="ariaErrorMessage"
                 [attr.aria-invalid]="isInvalid"
                 [igxFocus]="true"
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.html
index e13f3596bd6..451a7488e6a 100644
--- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.html
+++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.html
@@ -27,7 +27,6 @@
         <igx-grid-cell
             class="igx-grid__td igx-grid__td--fw"
             [class.igx-grid__td--edited]="key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row"
-            [attr.aria-describedby]="gridID + '_' + col.field | igxStringReplace:'.':'_'"
             [class.igx-grid__td--number]="col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'"
             [class.igx-grid__td--bool]="col.dataType === 'boolean'"
             [ngClass]="col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger"
@@ -57,7 +56,6 @@
         <igx-tree-grid-cell
             class="igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell"
             [class.igx-grid__td--edited]="key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row"
-            [attr.aria-describedby]="gridID + '_' + col.field | igxStringReplace:'.':'_'"
             [class.igx-grid__td--number]="(col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency') && col.visibleIndex !== 0"
             [ngClass]="col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger"
             [ngStyle]="col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger"
@@ -112,7 +110,6 @@
             <igx-grid-cell
                 class="igx-grid__td igx-grid__td--fw igx-grid__td--pinned"
                 [class.igx-grid__td--edited]="key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row"
-                [attr.aria-describedby]="gridID + '_' + col.field | igxStringReplace:'.':'_'"
                 [class.igx-grid__td--number]="col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'"
                 [ngClass]="col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger"
                 [ngStyle]="col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger"
@@ -144,7 +141,6 @@
             <igx-tree-grid-cell
                 class="igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell igx-grid__td--pinned"
                 [class.igx-grid__td--edited]="key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row"
-                [attr.aria-describedby]="gridID + '_' + col.field | igxStringReplace:'.':'_'"
                 [class.igx-grid__td--number]="(col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency') && col.visibleIndex !== 0"
                 [ngClass]="col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger"
                 [ngStyle]="col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger"

From 5d8b669762ae9c3bb1e95ebd2910ee08600e5f2e Mon Sep 17 00:00:00 2001
From: MKirova <MKirova@DEV-MKIROVA>
Date: Fri, 9 Sep 2022 14:59:43 +0300
Subject: [PATCH 3/3] chore(*): Update so that describeby includes both header
 ref and arror elem ref.

---
 .../igniteui-angular/src/lib/grids/cell.component.html | 10 +++++-----
 .../igniteui-angular/src/lib/grids/cell.component.ts   |  9 +++++++++
 .../src/lib/grids/grid/expandable-cell.component.html  | 10 +++++-----
 .../src/lib/grids/tree-grid/tree-cell.component.html   | 10 +++++-----
 4 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.html b/projects/igniteui-angular/src/lib/grids/cell.component.html
index bd6b3667acd..7f73186d700 100644
--- a/projects/igniteui-angular/src/lib/grids/cell.component.html
+++ b/projects/igniteui-angular/src/lib/grids/cell.component.html
@@ -74,7 +74,7 @@
         <igx-input-group displayDensity="compact" >
             <input
                 igxInput
-                [attr.aria-describedby]="ariaErrorMessage"
+                [attr.aria-describedby]="ariaDescribeBy"
                 [attr.aria-invalid]="isInvalid"
                 [igxFocus]="true"
                 [formControl]="formControl"
@@ -87,7 +87,7 @@
         <igx-input-group displayDensity="compact" [formGroup]="formGroup">
             <input
                 igxInput
-                [attr.aria-describedby]="ariaErrorMessage"
+                [attr.aria-describedby]="ariaDescribeBy"
                 [attr.aria-invalid]="isInvalid"
                 [igxFocus]="true"
                 [step]="step"
@@ -133,7 +133,7 @@
         <igx-input-group [formGroup]="formGroup">
             <input
                 type="text"
-                [attr.aria-describedby]="ariaErrorMessage"
+                [attr.aria-describedby]="ariaDescribeBy"
                 [attr.aria-invalid]="isInvalid"
                 [formControl]="formControl"
                 igxInput
@@ -147,7 +147,7 @@
             <igx-prefix *ngIf="grid.currencyPositionLeft">{{ currencyCodeSymbol }}</igx-prefix>
             <input
                 igxInput
-                [attr.aria-describedby]="ariaErrorMessage"
+                [attr.aria-describedby]="ariaDescribeBy"
                 [attr.aria-invalid]="isInvalid"
                 [igxFocus]="true"
                 [step]="step"
@@ -161,7 +161,7 @@
         <igx-input-group displayDensity="compact" [formGroup]="formGroup">
             <input
                 igxInput
-                [attr.aria-describedby]="ariaErrorMessage"
+                [attr.aria-describedby]="ariaDescribeBy"
                 [attr.aria-invalid]="isInvalid"
                 [igxFocus]="true"
                 [step]="step"
diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.ts b/projects/igniteui-angular/src/lib/grids/cell.component.ts
index 962d4648481..d32b0709d33 100644
--- a/projects/igniteui-angular/src/lib/grids/cell.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/cell.component.ts
@@ -472,6 +472,15 @@ 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('.', '_');
+        if (this.isInvalid) {
+            describeBy += ' ' + this.ariaErrorMessage;
+        }
+        return describeBy;
+    }
+
+    /** @hidden @internal */
     public get ariaErrorMessage() {
         return this.grid.id + '_' + this.column.field + '_' + this.intRow.index + '_error';
     }
diff --git a/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.html b/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.html
index fff496a4bef..ac415ad960d 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.html
+++ b/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.html
@@ -55,7 +55,7 @@
         <igx-input-group displayDensity="compact" >
             <input
                 igxInput
-                [attr.aria-describedby]="ariaErrorMessage"
+                [attr.aria-describedby]="ariaDescribeBy"
                 [attr.aria-invalid]="isInvalid"
                 [igxFocus]="true"
                 [formControl]="formControl"
@@ -68,7 +68,7 @@
         <igx-input-group displayDensity="compact" [formGroup]="formGroup">
             <input
                 igxInput
-                [attr.aria-describedby]="ariaErrorMessage"
+                [attr.aria-describedby]="ariaDescribeBy"
                 [attr.aria-invalid]="isInvalid"
                 [igxFocus]="true"
                 [step]="step"
@@ -114,7 +114,7 @@
         <igx-input-group [formGroup]="formGroup">
             <input
                 type="text"
-                [attr.aria-describedby]="ariaErrorMessage"
+                [attr.aria-describedby]="ariaDescribeBy"
                 [attr.aria-invalid]="isInvalid"
                 [formControl]="formControl"
                 igxInput
@@ -128,7 +128,7 @@
             <igx-prefix *ngIf="grid.currencyPositionLeft">{{ currencyCodeSymbol }}</igx-prefix>
             <input
                 igxInput
-                [attr.aria-describedby]="ariaErrorMessage"
+                [attr.aria-describedby]="ariaDescribeBy"
                 [attr.aria-invalid]="isInvalid"
                 [igxFocus]="true"
                 [step]="step"
@@ -142,7 +142,7 @@
         <igx-input-group displayDensity="compact" [formGroup]="formGroup">
             <input
                 igxInput
-                [attr.aria-describedby]="ariaErrorMessage"
+                [attr.aria-describedby]="ariaDescribeBy"
                 [attr.aria-invalid]="isInvalid"
                 [igxFocus]="true"
                 [step]="step"
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html
index fc48252354b..ecfa5d21bcf 100644
--- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html
+++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html
@@ -75,7 +75,7 @@
         <igx-input-group displayDensity="compact" >
             <input
                 igxInput
-                [attr.aria-describedby]="ariaErrorMessage"
+                [attr.aria-describedby]="ariaDescribeBy"
                 [attr.aria-invalid]="isInvalid"
                 [igxFocus]="true"
                 [formControl]="formControl"
@@ -88,7 +88,7 @@
         <igx-input-group displayDensity="compact" [formGroup]="formGroup">
             <input
                 igxInput
-                [attr.aria-describedby]="ariaErrorMessage"
+                [attr.aria-describedby]="ariaDescribeBy"
                 [attr.aria-invalid]="isInvalid"
                 [igxFocus]="true"
                 [step]="step"
@@ -134,7 +134,7 @@
         <igx-input-group [formGroup]="formGroup">
             <input
                 type="text"
-                [attr.aria-describedby]="ariaErrorMessage"
+                [attr.aria-describedby]="ariaDescribeBy"
                 [attr.aria-invalid]="isInvalid"
                 [formControl]="formControl"
                 igxInput
@@ -148,7 +148,7 @@
             <igx-prefix *ngIf="grid.currencyPositionLeft">{{ currencyCodeSymbol }}</igx-prefix>
             <input
                 igxInput
-                [attr.aria-describedby]="ariaErrorMessage"
+                [attr.aria-describedby]="ariaDescribeBy"
                 [attr.aria-invalid]="isInvalid"
                 [igxFocus]="true"
                 [step]="step"
@@ -162,7 +162,7 @@
         <igx-input-group displayDensity="compact" [formGroup]="formGroup">
             <input
                 igxInput
-                [attr.aria-describedby]="ariaErrorMessage"
+                [attr.aria-describedby]="ariaDescribeBy"
                 [attr.aria-invalid]="isInvalid"
                 [igxFocus]="true"
                 [step]="step"