Merge branch 'master' into mpopov/fix/button/fix-for-14759

Author: desig9stein

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/date-range-picker/date-range-picker.component.spec.ts

@@ -1276,6 +1276,26 @@ describe('IgxDateRangePicker', () => {
                     expect(dateRange.opening.emit).toHaveBeenCalledTimes(0);
                     expect(dateRange.opened.emit).toHaveBeenCalledTimes(0);
                 }));
+
+                it('should keep the calendar open when input is focused by click and while typing', fakeAsync(() => {
+                    fixture.componentInstance.dateRange.open();
+                    fixture.detectChanges();
+                    tick(DEBOUNCE_TIME);
+
+                    startInput.triggerEventHandler('focus', {});
+                    fixture.detectChanges();
+                    UIInteractions.simulateClickAndSelectEvent(startInput.nativeElement);
+                    fixture.detectChanges();
+                    tick(DEBOUNCE_TIME);
+
+                    expect(dateRange.collapsed).toBeFalsy();
+
+                    UIInteractions.simulateTyping('01/10/202', startInput);
+                    fixture.detectChanges();
+                    tick(DEBOUNCE_TIME);
+
+                    expect(dateRange.collapsed).toBeFalsy();
+                }));
             });
 
             it('should focus the last focused input after the calendar closes - dropdown', fakeAsync(() => {

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

@@ -789,7 +789,11 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
             this.opened.emit({ owner: this });
         });
 
-        this._overlayService.closing.pipe(...this._overlaySubFilter).subscribe((e) => {
+        this._overlayService.closing.pipe(...this._overlaySubFilter).subscribe((e: OverlayCancelableEventArgs) => {
+            const isEscape = e.event && (e.event as KeyboardEvent).key === this.platform.KEYMAP.ESCAPE;
+            if (this.isProjectedInputTarget(e.event) && !isEscape) {
+                e.cancel = true;
+            }
             this.handleClosing(e as OverlayCancelableEventArgs);
         });
 
@@ -803,6 +807,16 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
         });
     }
 
+    private isProjectedInputTarget(event: Event): boolean {
+        if (!this.hasProjectedInputs || !event) {
+            return false;
+        }
+        const path = event.composed ? event.composedPath() : [event.target];
+        return this.projectedInputs.some(i =>
+            path.includes(i.dateTimeEditor.nativeElement)
+        );
+    }
+
     private updateValue(value: DateRange) {
         this._value = value ? value : null;
         this.updateInputs();

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