Skip to content

Commit

Permalink
feat(): add accessibility support to carousel's previews #144
Browse files Browse the repository at this point in the history
  • Loading branch information
@Ks89
Ks89 committed Oct 28, 2018
1 parent cb6f207 commit ca30960
Show file tree
Hide file tree
Showing 4 changed files with 82 additions and 18 deletions.
33 changes: 33 additions & 0 deletions ...odal-gallery/src/lib/components/carousel/carousel-previews/carousel-previews.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
10 changes: 5 additions & 5 deletions ...ngular-modal-gallery/src/lib/components/carousel/carousel-previews/carousel-previews.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)"/>
</ng-container>
Expand All @@ -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)"></div>
</ng-template>
Expand Down
33 changes: 24 additions & 9 deletions src/app/carousel-ie11/carousel-ie11.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,22 +32,29 @@ import { Image } from '@ks89/angular-modal-gallery';
styleUrls: ['./carousel-ie11.scss']
})
export class CarouselIe11Component {

imagesRect: Image[] = [
new Image(
0,
{
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',
Expand All @@ -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' })
];
}
24 changes: 20 additions & 4 deletions src/app/carousel/carousel.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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(
Expand Down

0 comments on commit ca30960

Please sign in to comment.