fix(IgxCarousel): add correct aria attributes #8202

IgniteUI · Jan 28, 2021 · 4922db6 · 4922db6
1 parent 1a234c2
commit 4922db6
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 26 deletions.
diff --git 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
@@ -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
@@ -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>