Accessibility improvements

projects/carousel/src/lib/carousel-slide/carousel-slide.component.html

@@ -1,5 +1,6 @@
 <ng-template>
-  <div class="carousel-slide" [style.background-image]="image">
+  <div>
+    <span class="carousel-slide" role="img" [attr.aria-label]="image.altText ? image.altText : null" [style.background-image]="image.url"></span>
     <div class="carousel-slide-content"><ng-content></ng-content></div>
     <div
       *ngIf="!hideOverlay"

projects/carousel/src/lib/carousel-slide/carousel-slide.component.ts

@@ -7,7 +7,7 @@ import {
   ViewChild
 } from '@angular/core';
 
-import { MatCarouselSlide } from './carousel-slide';
+import { MatCarouselSlide, MatCarouselImage } from './carousel-slide';
 
 @Component({
   selector: 'mat-carousel-slide',
@@ -16,16 +16,16 @@ import { MatCarouselSlide } from './carousel-slide';
 })
 export class MatCarouselSlideComponent
   implements ListKeyManagerOption, MatCarouselSlide, OnInit {
-  @Input() public image: string;
+  @Input() public image: MatCarouselImage;
   @Input() public overlayColor = '#00000040';
   @Input() public hideOverlay = false;
   @Input() public disabled = false; // implements ListKeyManagerOption
 
   @ViewChild(TemplateRef) public templateRef: TemplateRef<any>;
 
   public ngOnInit(): void {
-    if (this.image) {
-      this.image = `url("${this.image}")`;
+    if (this.image && this.image.url) {
+      this.image.url = `url("${this.image.url}")`;
     }
   }
 }

projects/carousel/src/lib/carousel-slide/carousel-slide.ts

@@ -1,6 +1,11 @@
 export interface MatCarouselSlide {
-  image: string;
+  image: MatCarouselImage;
   overlayColor: string;
   hideOverlay: boolean;
   disabled: boolean;
 }
+
+export interface MatCarouselImage{
+  url: string;
+  altText: string;
+}

projects/carousel/src/lib/carousel.component.html

@@ -32,6 +32,7 @@
     [color]="color"
     [disabled]="!loop && currentIndex == 0"
     (click)="previous()"
+    attr.aria-label="Previous Slide"
   >
     <mat-icon>arrow_back</mat-icon>
   </button>
@@ -42,6 +43,7 @@
     [color]="color"
     [disabled]="!loop && currentIndex == slidesList.length - 1"
     (click)="next()"
+    attr.aria-label="Next Slide"
   >
     <mat-icon>arrow_forward</mat-icon>
   </button>
@@ -60,6 +62,7 @@
       [disabled]="i == currentIndex"
       (click)="slideTo(i)"
       (focus)="carouselContainer.focus()"
+      attr.aria-label="View Slide {{i+1}}"
     ></button>
   </div>
 </div>

projects/carousel/src/lib/carousel.component.spec.ts

@@ -7,12 +7,14 @@ import { MatIconModule } from '@angular/material/icon';
 
 import { MatCarouselComponent } from './carousel.component';
 import { MatCarouselModule } from './carousel.module';
+import { By } from '@angular/platform-browser';
+import { MatCarouselImage } from './carousel-slide/carousel-slide';
 
 @Component({
   selector: 'mat-carousel-test-wrapper-component',
   template: `
     <mat-carousel [autoplay]="false">
-      <mat-carousel-slide *ngFor="let slide of slides"></mat-carousel-slide>
+      <mat-carousel-slide *ngFor="let slide of slides" [image]="{altText: null, url: null}"></mat-carousel-slide>
     </mat-carousel>
   `
 })
@@ -23,6 +25,7 @@ class MatCarouselTestWrapperComponent {
 describe('MatCarouselComponent', () => {
   let component: MatCarouselComponent;
   let fixture: ComponentFixture<MatCarouselTestWrapperComponent>;
+  let carouselSlide:HTMLSpanElement;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
@@ -39,8 +42,8 @@ describe('MatCarouselComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(MatCarouselTestWrapperComponent);
     component = fixture.debugElement.children[0].componentInstance;
-
     fixture.detectChanges();
+    carouselSlide = fixture.debugElement.query(By.css('span.carousel-slide')).nativeElement;
   });
 
   it('should create', () => {
@@ -86,4 +89,18 @@ describe('MatCarouselComponent', () => {
     component.previous();
     expect(component.currentIndex).toBe(0);
   });
+
+  it('should have aria-label equal to supplied altText on slides', () => {
+    const image: MatCarouselImage = {altText: 'alt text', url: 'url'};
+    component.slidesList.forEach(slide => slide.image = image);
+    fixture.detectChanges();
+    expect(carouselSlide.getAttribute("aria-label")).toEqual(image.altText);
+  })
+
+  it('should not have aria-label on slides when altText is not supplied', () => {
+    const image: MatCarouselImage = {altText: null, url: 'url'};
+    component.slidesList.forEach(slide => slide.image = image);
+    fixture.detectChanges();
+    expect(carouselSlide.getAttribute("aria-label")).toBeNull();
+  })
 });