From fbdc01d6bb9520688e5f2cb8d3a8fa96eafa4f68 Mon Sep 17 00:00:00 2001 From: liamrid <39536131+lenart91@users.noreply.github.com> Date: Tue, 15 Jan 2019 05:44:07 +0000 Subject: [PATCH 1/5] Add: ARIA info to carousel-slide --- .../src/lib/carousel-slide/carousel-slide.component.html | 3 ++- .../src/lib/carousel-slide/carousel-slide.component.ts | 8 ++++---- .../carousel/src/lib/carousel-slide/carousel-slide.ts | 7 ++++++- 3 files changed, 12 insertions(+), 6 deletions(-) diff --git a/projects/carousel/src/lib/carousel-slide/carousel-slide.component.html b/projects/carousel/src/lib/carousel-slide/carousel-slide.component.html index 934f33c..03b42a7 100644 --- a/projects/carousel/src/lib/carousel-slide/carousel-slide.component.html +++ b/projects/carousel/src/lib/carousel-slide/carousel-slide.component.html @@ -1,5 +1,6 @@ -
+
+
; public ngOnInit(): void { - if (this.image) { - this.image = `url("${this.image}")`; + if (this.image && this.image.url) { + this.image.url = `url("${this.image.url}")`; } } } diff --git a/projects/carousel/src/lib/carousel-slide/carousel-slide.ts b/projects/carousel/src/lib/carousel-slide/carousel-slide.ts index 678cec6..fe54f8a 100644 --- a/projects/carousel/src/lib/carousel-slide/carousel-slide.ts +++ b/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; +} From 71cd507b5cb151c82b37e34e9ec0b768138f3514 Mon Sep 17 00:00:00 2001 From: liamrid <39536131+lenart91@users.noreply.github.com> Date: Thu, 14 Feb 2019 14:29:58 +0000 Subject: [PATCH 2/5] Add: ARIA-label to carousel buttons. --- projects/carousel/src/lib/carousel.component.html | 3 +++ 1 file changed, 3 insertions(+) diff --git a/projects/carousel/src/lib/carousel.component.html b/projects/carousel/src/lib/carousel.component.html index 7521473..9431438 100644 --- a/projects/carousel/src/lib/carousel.component.html +++ b/projects/carousel/src/lib/carousel.component.html @@ -32,6 +32,7 @@ [color]="color" [disabled]="!loop && currentIndex == 0" (click)="previous()" + aria-label="Previous Slide" > arrow_back @@ -42,6 +43,7 @@ [color]="color" [disabled]="!loop && currentIndex == slidesList.length - 1" (click)="next()" + aria-label="Next Slide" > arrow_forward @@ -60,6 +62,7 @@ [disabled]="i == currentIndex" (click)="slideTo(i)" (focus)="carouselContainer.focus()" + attr.aria-label="View Slide {{i+1}}" >
From 5a848d8865831d6c17c2a50aa8d43391998afe1c Mon Sep 17 00:00:00 2001 From: liamrid <39536131+lenart91@users.noreply.github.com> Date: Thu, 14 Feb 2019 14:54:43 +0000 Subject: [PATCH 3/5] Use attr.aria-label --- projects/carousel/src/lib/carousel.component.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/carousel/src/lib/carousel.component.html b/projects/carousel/src/lib/carousel.component.html index 9431438..ec28ac4 100644 --- a/projects/carousel/src/lib/carousel.component.html +++ b/projects/carousel/src/lib/carousel.component.html @@ -32,7 +32,7 @@ [color]="color" [disabled]="!loop && currentIndex == 0" (click)="previous()" - aria-label="Previous Slide" + attr.aria-label="Previous Slide" > arrow_back @@ -43,7 +43,7 @@ [color]="color" [disabled]="!loop && currentIndex == slidesList.length - 1" (click)="next()" - aria-label="Next Slide" + attr.aria-label="Next Slide" > arrow_forward From 146246f684329da5a49b33ca4844a239707c4d68 Mon Sep 17 00:00:00 2001 From: liamrid <39536131+lenart91@users.noreply.github.com> Date: Thu, 14 Feb 2019 18:26:06 +0000 Subject: [PATCH 4/5] Update spec with new test cases. --- .../src/lib/carousel.component.spec.ts | 21 +++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/projects/carousel/src/lib/carousel.component.spec.ts b/projects/carousel/src/lib/carousel.component.spec.ts index 1d5e940..e40efe1 100644 --- a/projects/carousel/src/lib/carousel.component.spec.ts +++ b/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 { MatCarouselImage } from '@ngmodule/material-carousel/public_api'; +import { By } from '@angular/platform-browser'; @Component({ selector: 'mat-carousel-test-wrapper-component', template: ` - + ` }) @@ -23,6 +25,7 @@ class MatCarouselTestWrapperComponent { describe('MatCarouselComponent', () => { let component: MatCarouselComponent; let fixture: ComponentFixture; + 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(); + }) }); From 10ad2cf8da99820e715c3a3a6f3033d6d21d208b Mon Sep 17 00:00:00 2001 From: liamrid <39536131+lenart91@users.noreply.github.com> Date: Thu, 14 Feb 2019 18:32:22 +0000 Subject: [PATCH 5/5] Fix MatCarouselImage import on spec. --- projects/carousel/src/lib/carousel.component.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/carousel/src/lib/carousel.component.spec.ts b/projects/carousel/src/lib/carousel.component.spec.ts index e40efe1..79d55bb 100644 --- a/projects/carousel/src/lib/carousel.component.spec.ts +++ b/projects/carousel/src/lib/carousel.component.spec.ts @@ -7,8 +7,8 @@ import { MatIconModule } from '@angular/material/icon'; import { MatCarouselComponent } from './carousel.component'; import { MatCarouselModule } from './carousel.module'; -import { MatCarouselImage } from '@ngmodule/material-carousel/public_api'; import { By } from '@angular/platform-browser'; +import { MatCarouselImage } from './carousel-slide/carousel-slide'; @Component({ selector: 'mat-carousel-test-wrapper-component',