From ca30960693048f0a8adb80265a2a76cc770e8b60 Mon Sep 17 00:00:00 2001 From: Stefano Cappa Date: Sun, 28 Oct 2018 22:06:04 +0100 Subject: [PATCH] feat(): add accessibility support to carousel's previews #144 --- .../carousel-previews.component.ts | 33 +++++++++++++++++++ .../carousel-previews/carousel-previews.html | 10 +++--- .../carousel-ie11/carousel-ie11.component.ts | 33 ++++++++++++++----- src/app/carousel/carousel.component.ts | 24 +++++++++++--- 4 files changed, 82 insertions(+), 18 deletions(-) diff --git a/projects/ks89/angular-modal-gallery/src/lib/components/carousel/carousel-previews/carousel-previews.component.ts b/projects/ks89/angular-modal-gallery/src/lib/components/carousel/carousel-previews/carousel-previews.component.ts index bbe30560..3036d350 100644 --- a/projects/ks89/angular-modal-gallery/src/lib/components/carousel/carousel-previews/carousel-previews.component.ts +++ b/projects/ks89/angular-modal-gallery/src/lib/components/carousel/carousel-previews/carousel-previews.component.ts @@ -375,6 +375,39 @@ export class CarouselPreviewsComponent extends AccessibleComponent implements On } } + /** + * Method to get aria-label text for a preview image. + * @param Image is the preview + */ + getAriaLabel(preview: Image): string { + if (!preview.plain) { + return preview.modal.ariaLabel || ''; + } + return preview.plain.ariaLabel || preview.modal.ariaLabel || ''; + } + + /** + * Method to get title text for a preview image. + * @param Image is the preview + */ + getTitle(preview: Image): string { + if (!preview.plain) { + return preview.modal.title || ''; + } + return preview.plain.title || preview.modal.title || ''; + } + + /** + * Method to get alt text for a preview image. + * @param Image is the preview + */ + getAlt(preview: Image): string { + if (!preview.plain) { + return preview.modal.alt || ''; + } + return preview.plain.alt || preview.modal.alt || ''; + } + /** * Method used in the template to track ids in ngFor. * @param number index of the array diff --git a/projects/ks89/angular-modal-gallery/src/lib/components/carousel/carousel-previews/carousel-previews.html b/projects/ks89/angular-modal-gallery/src/lib/components/carousel/carousel-previews/carousel-previews.html index 28b1b714..33c54d04 100644 --- a/projects/ks89/angular-modal-gallery/src/lib/components/carousel/carousel-previews/carousel-previews.html +++ b/projects/ks89/angular-modal-gallery/src/lib/components/carousel/carousel-previews/carousel-previews.html @@ -20,9 +20,9 @@ [src]="preview.plain?.img ? preview.plain.img : preview.modal.img" ksSize [sizeConfig]="{width: configPreview?.width, height: configPreview?.maxHeight}" - [attr.aria-label]="preview.modal.ariaLabel ? preview.modal.ariaLabel : ''" - [title]="preview.modal.title ? preview.modal.title : ''" - alt="{{preview.modal.alt ? preview.modal.alt : ''}}" + [attr.aria-label]="getAriaLabel(preview)" + [title]="getTitle(preview)" + alt="{{getAlt(preview)}}" [tabindex]="0" role="img" (click)="onImageEvent(preview, $event, clickAction)" (keyup)="onImageEvent(preview, $event, keyboardAction)"/> @@ -37,8 +37,8 @@ [style.background-attachment]="'scroll'" ksSize [sizeConfig]="{width: configPreview?.width, height: configPreview?.maxHeight}" - [attr.aria-label]="preview.modal.ariaLabel ? preview.modal.ariaLabel : ''" - [title]="preview.modal.title ? preview.modal.title : ''" + [attr.aria-label]="getAriaLabel(preview)" + [title]="getTitle(preview)" [tabindex]="0" role="img" (click)="onImageEvent(preview, $event, clickAction)" (keyup)="onImageEvent(preview, $event, keyboardAction)"> diff --git a/src/app/carousel-ie11/carousel-ie11.component.ts b/src/app/carousel-ie11/carousel-ie11.component.ts index 08620c1e..73f9b65e 100644 --- a/src/app/carousel-ie11/carousel-ie11.component.ts +++ b/src/app/carousel-ie11/carousel-ie11.component.ts @@ -32,7 +32,6 @@ import { Image } from '@ks89/angular-modal-gallery'; styleUrls: ['./carousel-ie11.scss'] }) export class CarouselIe11Component { - imagesRect: Image[] = [ new Image( 0, @@ -40,14 +39,22 @@ export class CarouselIe11Component { img: '/assets/images/gallery/milan-pegasus-gallery-statue.jpg', description: 'Description 1' }, - {img: '/assets/images/gallery/thumbs/t-milan-pegasus-gallery-statue.jpg'} + { + img: '/assets/images/gallery/thumbs/t-milan-pegasus-gallery-statue.jpg', + title: 'First image title', + alt: 'First image alt', + ariaLabel: 'First image aria-label' + } ), - new Image(1, {img: '/assets/images/gallery/pexels-photo-47223.jpeg'}, {img: '/assets/images/gallery/thumbs/t-pexels-photo-47223.jpg'}), + new Image(1, { img: '/assets/images/gallery/pexels-photo-47223.jpeg' }, { img: '/assets/images/gallery/thumbs/t-pexels-photo-47223.jpg' }), new Image( 2, { img: '/assets/images/gallery/pexels-photo-52062.jpeg', - description: 'Description 3' + description: 'Description 3', + title: 'Third image title', + alt: 'Third image alt', + ariaLabel: 'Third image aria-label' }, { img: '/assets/images/gallery/thumbs/t-pexels-photo-52062.jpg', @@ -58,19 +65,27 @@ export class CarouselIe11Component { 3, { img: '/assets/images/gallery/pexels-photo-66943.jpeg', - description: 'Description 4' + description: 'Description 4', + title: 'Fourth image title (modal obj)', + alt: 'Fourth image alt (modal obj)', + ariaLabel: 'Fourth image aria-label (modal obj)' }, - {img: '/assets/images/gallery/thumbs/t-pexels-photo-66943.jpg'} + { + img: '/assets/images/gallery/thumbs/t-pexels-photo-66943.jpg', + title: 'Fourth image title (plain obj)', + alt: 'Fourth image alt (plain obj)', + ariaLabel: 'Fourth image aria-label (plain obj)' + } ), - new Image(4, {img: '/assets/images/gallery/pexels-photo-93750.jpeg'}, {img: '/assets/images/gallery/thumbs/t-pexels-photo-93750.jpg'}), + new Image(4, { img: '/assets/images/gallery/pexels-photo-93750.jpeg' }, { img: '/assets/images/gallery/thumbs/t-pexels-photo-93750.jpg' }), new Image( 5, { img: '/assets/images/gallery/pexels-photo-94420.jpeg', description: 'Description 6' }, - {img: '/assets/images/gallery/thumbs/t-pexels-photo-94420.jpg'} + { img: '/assets/images/gallery/thumbs/t-pexels-photo-94420.jpg' } ), - new Image(6, {img: '/assets/images/gallery/pexels-photo-96947.jpeg'}, {img: '/assets/images/gallery/thumbs/t-pexels-photo-96947.jpg'}) + new Image(6, { img: '/assets/images/gallery/pexels-photo-96947.jpeg' }, { img: '/assets/images/gallery/thumbs/t-pexels-photo-96947.jpg' }) ]; } diff --git a/src/app/carousel/carousel.component.ts b/src/app/carousel/carousel.component.ts index 623360a7..a2697766 100644 --- a/src/app/carousel/carousel.component.ts +++ b/src/app/carousel/carousel.component.ts @@ -45,14 +45,22 @@ export class CarouselComponent { img: '/assets/images/gallery/milan-pegasus-gallery-statue.jpg', description: 'Description 1' }, - { img: '/assets/images/gallery/thumbs/t-milan-pegasus-gallery-statue.jpg' } + { + img: '/assets/images/gallery/thumbs/t-milan-pegasus-gallery-statue.jpg', + title: 'First image title', + alt: 'First image alt', + ariaLabel: 'First image aria-label' + } ), new Image(1, { img: '/assets/images/gallery/pexels-photo-47223.jpeg' }, { img: '/assets/images/gallery/thumbs/t-pexels-photo-47223.jpg' }), new Image( 2, { img: '/assets/images/gallery/pexels-photo-52062.jpeg', - description: 'Description 3' + description: 'Description 3', + title: 'Third image title', + alt: 'Third image alt', + ariaLabel: 'Third image aria-label' }, { img: '/assets/images/gallery/thumbs/t-pexels-photo-52062.jpg', @@ -63,9 +71,17 @@ export class CarouselComponent { 3, { img: '/assets/images/gallery/pexels-photo-66943.jpeg', - description: 'Description 4' + description: 'Description 4', + title: 'Fourth image title (modal obj)', + alt: 'Fourth image alt (modal obj)', + ariaLabel: 'Fourth image aria-label (modal obj)' }, - { img: '/assets/images/gallery/thumbs/t-pexels-photo-66943.jpg' } + { + img: '/assets/images/gallery/thumbs/t-pexels-photo-66943.jpg', + title: 'Fourth image title (plain obj)', + alt: 'Fourth image alt (plain obj)', + ariaLabel: 'Fourth image aria-label (plain obj)' + } ), new Image(4, { img: '/assets/images/gallery/pexels-photo-93750.jpeg' }, { img: '/assets/images/gallery/thumbs/t-pexels-photo-93750.jpg' }), new Image(