From 4922db67d3dc2140479cdb1bd4f346d246d77e2d Mon Sep 17 00:00:00 2001
From: ddincheva <desislava9dincheva@gmail.com>
Date: Thu, 28 Jan 2021 12:21:28 +0200
Subject: [PATCH] fix(IgxCarousel): add correct aria attributes #8202

---
 .../src/lib/carousel/carousel.component.html  | 10 +++----
 .../src/lib/carousel/carousel.component.ts    | 30 +++++++------------
 src/app/carousel/carousel.sample.html         |  2 +-
 3 files changed, 16 insertions(+), 26 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/carousel/carousel.component.html b/projects/igniteui-angular/src/lib/carousel/carousel.component.html
index fc3d157e715..706329575a7 100644
--- a/projects/igniteui-angular/src/lib/carousel/carousel.component.html
+++ b/projects/igniteui-angular/src/lib/carousel/carousel.component.html
@@ -28,25 +28,25 @@
         [id]="setId(slide)"
         [attr.role]="'tab'"
         [attr.aria-label]="setAriaLabel(slide)"
+        [attr.aria-controls]="'panel-' + slide.index"
         [attr.aria-selected]="slide.active">
         <ng-container *ngTemplateOutlet="getIndicatorTemplate; context: {$implicit: slide};"></ng-container>
     </div>
 </div>
-<span [id]="labelId" [ngStyle]="{visibility: 'hidden'}">Carousel content with  {{ total }} slides.</span>
 
 <div *ngIf="showIndicatorsLabel" [ngClass]="indicatorsOrientationClass">
-    <span class="igx-carousel__label">{{getCarouselLabel}}</span>
+    <span id="igxCarouselLbl" class="igx-carousel__label">{{getCarouselLabel}}</span>
 </div>
 
-<div class="igx-carousel__inner">
+<div class="igx-carousel__inner" aria-live="polite">
     <ng-content></ng-content>
 </div>
 
-<div *ngIf="navigation && slides.length" role="button" tabindex="0" class="igx-carousel__arrow--prev" [attr.aria-label]="resourceStrings.igx_carousel_previous_slide" (click)="prev()">
+<div *ngIf="navigation && slides.length" role="button" tabindex="0" class="igx-carousel__arrow--prev" [attr.aria-label]="resourceStrings.igx_carousel_previous_slide" (keydown.enter)="prev()" (click)="prev()">
     <ng-container *ngTemplateOutlet="getPrevButtonTemplate; context: {$implicit: prevButtonDisabled};"></ng-container>
 </div>
 
-<div *ngIf="navigation && slides.length" role="button" tabindex="0" class="igx-carousel__arrow--next" [attr.aria-label]="resourceStrings.igx_carousel_next_slide" (click)="next()">
+<div *ngIf="navigation && slides.length" role="button" tabindex="0" class="igx-carousel__arrow--next" [attr.aria-label]="resourceStrings.igx_carousel_next_slide" (keydown.enter)="next()" (click)="next()">
     <ng-container *ngTemplateOutlet="getNextButtonTemplate; context: {$implicit: nextButtonDisabled};"></ng-container>
 </div>
 
diff --git a/projects/igniteui-angular/src/lib/carousel/carousel.component.ts b/projects/igniteui-angular/src/lib/carousel/carousel.component.ts
index 11b08dddef1..9779910d4bb 100644
--- a/projects/igniteui-angular/src/lib/carousel/carousel.component.ts
+++ b/projects/igniteui-angular/src/lib/carousel/carousel.component.ts
@@ -106,11 +106,13 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit {
      */
     @HostBinding('attr.role') public role = 'region';
 
+    /** @hidden */
     @HostBinding('attr.aria-roledescription')
     public roleDescription = 'carousel';
 
+    /** @hidden */
     @HostBinding('attr.aria-labelledby')
-    public labelId = 'igxCarouselLabel';
+    public labelId = `igxCarouselLbl`; // tab-${this.current + 1}-3
 
     /**
      * Sets the `id` of the carousel.
@@ -125,19 +127,6 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit {
     @Input()
     public id = `igx-carousel-${NEXT_ID++}`;
 
-    /**
-     * Returns the `tabIndex` of the carousel component.
-     * ```typescript
-     * let tabIndex =  this.carousel.tabIndex;
-     * ```
-     *
-     * @memberof IgxCarouselComponent
-     */
-    @HostBinding('attr.tabindex')
-    get tabIndex() {
-        return 0;
-    }
-
     /**
      * Returns the class of the carousel component.
      * ```typescript
@@ -479,7 +468,7 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit {
      * @memberOf IgxCarouselComponent
      */
     public get total(): number {
-        return this.slides.length;
+        return this.slides?.length;
     }
 
     /**
@@ -568,7 +557,7 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit {
         if (this.keyboardSupport) {
             event.preventDefault();
             this.next();
-            requestAnimationFrame(() => this.nativeElement.focus());
+            requestAnimationFrame(() => this.slides.find(s => s.active).nativeElement.focus());
         }
     }
 
@@ -578,7 +567,7 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit {
         if (this.keyboardSupport) {
             event.preventDefault();
             this.prev();
-            requestAnimationFrame(() => this.nativeElement.focus());
+            requestAnimationFrame(() => this.slides.find(s => s.active).nativeElement.focus());
         }
     }
 
@@ -604,16 +593,17 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit {
         if (this.keyboardSupport && this.slides.length > 0) {
             event.preventDefault();
             this.slides.first.active = true;
-            requestAnimationFrame(() => this.nativeElement.focus());
+            requestAnimationFrame(() => this.slides.find(s => s.active).nativeElement.focus());
         }
     }
 
+    /** @hidden */
     @HostListener('keydown.end', ['$event'])
     public onKeydownEnd(event) {
         if (this.keyboardSupport && this.slides.length > 0) {
             event.preventDefault();
             this.slides.last.active = true;
-            requestAnimationFrame(() => this.nativeElement.focus());
+            requestAnimationFrame(() => this.slides.find(s => s.active).nativeElement.focus());
         }
     }
 
@@ -715,7 +705,7 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit {
 
     /** @hidden */
     public setId(slide) {
-        return `tab-${slide.index + 1}-${this.total}`;
+        return `tab-${slide.index}-${this.total}`;
     }
     /**
      * Returns the slide corresponding to the provided `index` or null.
diff --git a/src/app/carousel/carousel.sample.html b/src/app/carousel/carousel.sample.html
index df4ab78c621..bba155e9d80 100644
--- a/src/app/carousel/carousel.sample.html
+++ b/src/app/carousel/carousel.sample.html
@@ -21,7 +21,7 @@ <h4 class="sample-title">Desktop</h4>
             <button igxButton="raised" (click)="changeSlidesRemove()">Change slides remove</button>
             <button igxButton="raised" (click)="changeOrientation()">changeOrientation</button>
             <div style="height: 800px;">
-                <igx-carousel #car [interval]="interval" [pause]="pause" [loop]="loop">
+                <igx-carousel #car  [pause]="pause" [loop]="true">
                     <igx-slide *ngFor="let slide of slides;" [active]="slide.active">
                         <img [src]="slide.image">
                     </igx-slide>