fix(carousel): Focus on leaveAnimation done #9329 - 11.1.x (#9454)

* fix(carousel): focus on leaveAnimation done #9329

Co-authored-by: Konstantin Dinev <[email protected]>

Author: zdrawku

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

@@ -563,7 +563,7 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit {
         if (this.keyboardSupport) {
             event.preventDefault();
             this.next();
-            requestAnimationFrame(() => this.slides.find(s => s.active).nativeElement.focus());
+            this.focusSlideElement();
         }
     }
 
@@ -573,7 +573,7 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit {
         if (this.keyboardSupport) {
             event.preventDefault();
             this.prev();
-            requestAnimationFrame(() => this.slides.find(s => s.active).nativeElement.focus());
+            this.focusSlideElement();
         }
     }
 
@@ -599,7 +599,7 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit {
         if (this.keyboardSupport && this.slides.length > 0) {
             event.preventDefault();
             this.slides.first.active = true;
-            requestAnimationFrame(() => this.slides.find(s => s.active).nativeElement.focus());
+            this.focusSlideElement();
         }
     }
 
@@ -609,7 +609,7 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit {
         if (this.keyboardSupport && this.slides.length > 0) {
             event.preventDefault();
             this.slides.last.active = true;
-            requestAnimationFrame(() => this.slides.find(s => s.active).nativeElement.focus());
+            this.focusSlideElement();
         }
     }
 
@@ -1125,6 +1125,16 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit {
             });
         }
     }
+    private focusSlideElement() {
+        if (this.leaveAnimationPlayer) {
+            this.leaveAnimationPlayer.onDone(() => {
+                this.slides.find(s => s.active).nativeElement.focus();
+            });
+        } else {
+            requestAnimationFrame(() => this.slides.find(s => s.active).nativeElement.focus());
+        }
+    }
+
 }
 
 export interface ISlideEventArgs extends IBaseEventArgs {

src/app/carousel/carousel.sample.ts

@@ -22,9 +22,9 @@ export class CarouselSampleComponent {
 
     public addNewSlide() {
         this.slides.push(
-            {image: 'assets/images/carousel/[email protected]'},
-            {image: 'assets/images/carousel/[email protected]'},
-            {image: 'assets/images/carousel/[email protected]'}
+            {image: 'assets/images/carousel/[email protected]', active: true},
+            {image: 'assets/images/carousel/[email protected]', active: false},
+            {image: 'assets/images/carousel/[email protected]', active: false}
         );
     }