Merge pull request #15161 from IgniteUI/simeonoff/fix-15159

refactor(icon): remove ariaHidden member

Author: kdinev

projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.html

@@ -16,7 +16,7 @@
 </ng-template>
 
 <ng-template #defIcon>
-    <igx-icon family="default" name="date_range"></igx-icon>
+    <igx-icon family="default" name="date_range" [attr.aria-hidden]="true"></igx-icon>
 </ng-template>
 
 <ng-template #defDateSeparatorTemplate>{{ dateSeparator }}</ng-template>

projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-header.component.html

@@ -10,7 +10,8 @@
         <igx-icon
             *ngIf="!iconTemplate"
             family="default"
-            [name]="panel.collapsed ? 'expand' : 'collapse'">
+            [name]="panel.collapsed ? 'expand' : 'collapse'"
+            [attr.aria-hidden]="true">
         </igx-icon>
     </div>
 </div>

projects/igniteui-angular/src/lib/icon/icon.component.spec.ts

@@ -36,7 +36,6 @@ describe("Icon", () => {
             fixture.detectChanges();
 
             expect(instance.getFamily).toBe("material");
-            expect(instance.ariaHidden).toBe(true);
             expect(instance.getActive).toBe(true);
         });
 

projects/igniteui-angular/src/lib/icon/icon.component.ts

@@ -65,22 +65,6 @@ export class IgxIconComponent implements OnInit, OnChanges, OnDestroy {
         this._iconClasses.clear();
     }
 
-    /**
-     *  This allows you to disable the `aria-hidden` attribute. By default it's applied.
-     *
-     * @example
-     * ```typescript
-     * @ViewChild("MyIcon") public icon: IgxIconComponent;
-     * constructor(private cdRef:ChangeDetectorRef) {}
-     * ngAfterViewInit() {
-     *     this.icon.ariaHidden = false;
-     *     this.cdRef.detectChanges();
-     * }
-     * ```
-     */
-    @HostBinding("attr.aria-hidden")
-    public ariaHidden = true;
-
     /**
      *  An accessor that returns inactive property.
      *

projects/igniteui-angular/src/lib/query-builder/query-builder.component.html

@@ -153,7 +153,7 @@ <h6 class="igx-filter-empty__title">
                     (keydown)="invokeClick($event)"
                     (click)="enterExpressionEdit(expressionItem)"
                 >
-                    <igx-icon id="edit-expression">edit</igx-icon>
+                    <igx-icon id="edit-expression" [attr.aria-hidden]="true">edit</igx-icon>
                 </button>
 
                 <button

projects/igniteui-angular/src/lib/select/select.component.html

@@ -26,7 +26,7 @@
         <ng-container *ngIf="toggleIconTemplate">
             <ng-container *ngTemplateOutlet="toggleIconTemplate; context: {$implicit: this.collapsed}"></ng-container>
         </ng-container>
-        <igx-icon *ngIf="!toggleIconTemplate" family="default" [name]="toggleIcon"></igx-icon>
+        <igx-icon *ngIf="!toggleIconTemplate" family="default" [name]="toggleIcon" [attr.aria-hidden]="true"></igx-icon>
     </igx-suffix>
     <ng-container ngProjectAs="igx-hint, [igxHint]" >
         <ng-content select="igx-hint, [igxHint]"></ng-content>