Merge pull request #16098 from IgniteUI/bpachilova/icon-aria-hidden-16008-master

feat(icon): add aria-hidden="true" attribute by default + test - master

Author: kacheshmarova

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" [attr.aria-hidden]="true"></igx-icon>
+    <igx-icon family="default" name="date_range"></igx-icon>
 </ng-template>
 
 <ng-template #defDateSeparatorTemplate>{{ dateSeparator }}</ng-template>

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

@@ -12,8 +12,7 @@
         @if (!iconTemplate) {
             <igx-icon
                 family="default"
-                [name]="panel.collapsed ? 'expand' : 'collapse'"
-                [attr.aria-hidden]="true">
+                [name]="panel.collapsed ? 'expand' : 'collapse'">
             </igx-icon>
         }
     </div>

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

@@ -30,11 +30,23 @@ describe("Icon", () => {
             el = debugElement.nativeElement;
         });
 
-        it("should instatiate with defaults", () => {
+        it("should instantiate with defaults", () => {
             fixture.detectChanges();
 
             expect(instance.getFamily).toBe("material");
             expect(instance.getActive).toBe(true);
+            expect(instance.ariaHidden).toBe(true);
+        });
+
+        it("should be able to set the aria-hidden attribute", () => {
+            fixture.detectChanges();
+
+            expect(el.getAttribute('aria-hidden')).toBe("true");
+
+            instance.ariaHidden = false;
+            fixture.detectChanges();
+
+            expect(el.getAttribute('aria-hidden')).toBe("false");
         });
 
         it("should set icon as inactive", () => {

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

@@ -80,6 +80,14 @@ export class IgxIconComponent implements OnInit, OnChanges, OnDestroy {
         return !this.active;
     }
 
+    /**
+     *  The `aria-hidden` attribute of the icon.
+     *  By default is set to 'true'.
+     */
+    @HostBinding("attr.aria-hidden")
+    @Input()
+    public ariaHidden = true;
+
     /**
      * An @Input property that sets the value of the `family`. By default it's "material".
      *

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

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