Merge pull request #12051 from IgniteUI/mkirova/improve-validator-aria

chore(*): Add aria-describedby reference to error message element as …

Author: ChronosSF

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

@@ -74,7 +74,8 @@
         <igx-input-group displayDensity="compact" >
             <input
                 igxInput
-                [attr.aria-errormessage]="ariaErrorMessage"
+                [attr.aria-describedby]="ariaDescribeBy"
+                [attr.aria-invalid]="isInvalid"
                 [igxFocus]="true"
                 [formControl]="formControl"
                 (compositionstart)="grid.crudService.isInCompositionMode = true"
@@ -86,7 +87,8 @@
         <igx-input-group displayDensity="compact" [formGroup]="formGroup">
             <input
                 igxInput
-                [attr.aria-errormessage]="ariaErrorMessage"
+                [attr.aria-describedby]="ariaDescribeBy"
+                [attr.aria-invalid]="isInvalid"
                 [igxFocus]="true"
                 [step]="step"
                 type="number"
@@ -131,7 +133,8 @@
         <igx-input-group [formGroup]="formGroup">
             <input
                 type="text"
-                [attr.aria-errormessage]="ariaErrorMessage"
+                [attr.aria-describedby]="ariaDescribeBy"
+                [attr.aria-invalid]="isInvalid"
                 [formControl]="formControl"
                 igxInput
                 [igxDateTimeEditor]="column.defaultDateTimeFormat" 
@@ -144,7 +147,8 @@
             <igx-prefix *ngIf="grid.currencyPositionLeft">{{ currencyCodeSymbol }}</igx-prefix>
             <input
                 igxInput
-                [attr.aria-errormessage]="ariaErrorMessage"
+                [attr.aria-describedby]="ariaDescribeBy"
+                [attr.aria-invalid]="isInvalid"
                 [igxFocus]="true"
                 [step]="step"
                 type="number"
@@ -157,7 +161,8 @@
         <igx-input-group displayDensity="compact" [formGroup]="formGroup">
             <input
                 igxInput
-                [attr.aria-errormessage]="ariaErrorMessage"
+                [attr.aria-describedby]="ariaDescribeBy"
+                [attr.aria-invalid]="isInvalid"
                 [igxFocus]="true"
                 [step]="step"
                 type="number"

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

@@ -469,14 +469,18 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy, CellT
     public get readonly(): boolean {
         return !this.editable;
     }
+
     /** @hidden @internal */
     @HostBinding('attr.aria-describedby')
-    public get describeBy() {
-        return this.grid.id + '_' + this.column.field;
+    public get ariaDescribeBy() {
+        let describeBy = (this.gridID + '_' + this.column.field).replace('.', '_');
+        if (this.isInvalid) {
+            describeBy += ' ' + this.ariaErrorMessage;
+        }
+        return describeBy;
     }
 
     /** @hidden @internal */
-    @HostBinding('attr.aria-errormessage')
     public get ariaErrorMessage() {
         return this.grid.id + '_' + this.column.field + '_' + this.intRow.index + '_error';
     }

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

@@ -55,7 +55,8 @@
         <igx-input-group displayDensity="compact" >
             <input
                 igxInput
-                [attr.aria-errormessage]="ariaErrorMessage"
+                [attr.aria-describedby]="ariaDescribeBy"
+                [attr.aria-invalid]="isInvalid"
                 [igxFocus]="true"
                 [formControl]="formControl"
                 (compositionstart)="grid.crudService.isInCompositionMode = true"
@@ -67,7 +68,8 @@
         <igx-input-group displayDensity="compact" [formGroup]="formGroup">
             <input
                 igxInput
-                [attr.aria-errormessage]="ariaErrorMessage"
+                [attr.aria-describedby]="ariaDescribeBy"
+                [attr.aria-invalid]="isInvalid"
                 [igxFocus]="true"
                 [step]="step"
                 type="number"
@@ -112,7 +114,8 @@
         <igx-input-group [formGroup]="formGroup">
             <input
                 type="text"
-                [attr.aria-errormessage]="ariaErrorMessage"
+                [attr.aria-describedby]="ariaDescribeBy"
+                [attr.aria-invalid]="isInvalid"
                 [formControl]="formControl"
                 igxInput
                 [igxDateTimeEditor]="column.defaultDateTimeFormat" 
@@ -125,7 +128,8 @@
             <igx-prefix *ngIf="grid.currencyPositionLeft">{{ currencyCodeSymbol }}</igx-prefix>
             <input
                 igxInput
-                [attr.aria-errormessage]="ariaErrorMessage"
+                [attr.aria-describedby]="ariaDescribeBy"
+                [attr.aria-invalid]="isInvalid"
                 [igxFocus]="true"
                 [step]="step"
                 type="number"
@@ -138,7 +142,8 @@
         <igx-input-group displayDensity="compact" [formGroup]="formGroup">
             <input
                 igxInput
-                [attr.aria-errormessage]="ariaErrorMessage"
+                [attr.aria-describedby]="ariaDescribeBy"
+                [attr.aria-invalid]="isInvalid"
                 [igxFocus]="true"
                 [step]="step"
                 type="number"

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"

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"

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"

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'"

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

@@ -75,7 +75,8 @@
         <igx-input-group displayDensity="compact" >
             <input
                 igxInput
-                [attr.aria-errormessage]="ariaErrorMessage"
+                [attr.aria-describedby]="ariaDescribeBy"
+                [attr.aria-invalid]="isInvalid"
                 [igxFocus]="true"
                 [formControl]="formControl"
                 (compositionstart)="grid.crudService.isInCompositionMode = true"
@@ -87,7 +88,8 @@
         <igx-input-group displayDensity="compact" [formGroup]="formGroup">
             <input
                 igxInput
-                [attr.aria-errormessage]="ariaErrorMessage"
+                [attr.aria-describedby]="ariaDescribeBy"
+                [attr.aria-invalid]="isInvalid"
                 [igxFocus]="true"
                 [step]="step"
                 type="number"
@@ -132,7 +134,8 @@
         <igx-input-group [formGroup]="formGroup">
             <input
                 type="text"
-                [attr.aria-errormessage]="ariaErrorMessage"
+                [attr.aria-describedby]="ariaDescribeBy"
+                [attr.aria-invalid]="isInvalid"
                 [formControl]="formControl"
                 igxInput
                 [igxDateTimeEditor]="column.defaultDateTimeFormat" 
@@ -145,7 +148,8 @@
             <igx-prefix *ngIf="grid.currencyPositionLeft">{{ currencyCodeSymbol }}</igx-prefix>
             <input
                 igxInput
-                [attr.aria-errormessage]="ariaErrorMessage"
+                [attr.aria-describedby]="ariaDescribeBy"
+                [attr.aria-invalid]="isInvalid"
                 [igxFocus]="true"
                 [step]="step"
                 type="number"
@@ -158,7 +162,8 @@
         <igx-input-group displayDensity="compact" [formGroup]="formGroup">
             <input
                 igxInput
-                [attr.aria-errormessage]="ariaErrorMessage"
+                [attr.aria-describedby]="ariaDescribeBy"
+                [attr.aria-invalid]="isInvalid"
                 [igxFocus]="true"
                 [step]="step"
                 type="number"

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"