diff --git a/projects/ks89/angular-modal-gallery/src/lib/components/accessibility-default.ts b/projects/ks89/angular-modal-gallery/src/lib/components/accessibility-default.ts index 32d2cc15..e6b80186 100644 --- a/projects/ks89/angular-modal-gallery/src/lib/components/accessibility-default.ts +++ b/projects/ks89/angular-modal-gallery/src/lib/components/accessibility-default.ts @@ -32,5 +32,21 @@ export const KS_DEFAULT_ACCESSIBILITY_CONFIG: AccessibilityConfig = { previewScrollPrevAriaLabel: 'Scroll previous previews', previewScrollPrevTitle: 'Scroll previous previews', previewScrollNextAriaLabel: 'Scroll next previews', - previewScrollNextTitle: 'Scroll next previews' + previewScrollNextTitle: 'Scroll next previews', + + carouselContainerAriaLabel: 'Current image and navigation', + carouselContainerTitle: '', + carouselPrevImageAriaLabel: 'Previous image', + carouselPrevImageTitle: 'Previous image', + carouselNextImageAriaLabel: 'Next image', + carouselNextImageTitle: 'Next image', + carouselDotsContainerAriaLabel: 'Image navigation dots', + carouselDotsContainerTitle: '', + carouselDotAriaLabel: 'Navigate to image number', + carouselPreviewsContainerAriaLabel: 'Image previews', + carouselPreviewsContainerTitle: '', + carouselPreviewScrollPrevAriaLabel: 'Scroll previous previews', + carouselPreviewScrollPrevTitle: 'Scroll previous previews', + carouselPreviewScrollNextAriaLabel: 'Scroll next previews', + carouselPreviewScrollNextTitle: 'Scroll next previews' }; diff --git a/projects/ks89/angular-modal-gallery/src/lib/components/carousel/carousel.html b/projects/ks89/angular-modal-gallery/src/lib/components/carousel/carousel.html index ad452936..bd7021f3 100644 --- a/projects/ks89/angular-modal-gallery/src/lib/components/carousel/carousel.html +++ b/projects/ks89/angular-modal-gallery/src/lib/components/carousel/carousel.html @@ -2,8 +2,12 @@
-
+ [attr.aria-label]="accessibilityConfig.mainNextImageAriaLabel" + [tabindex]="isLastImage && !slideConfig?.infinite ? -1 : 0" role="button" + (click)="onNavigationEvent('left', $event)" (keyup)="onNavigationEvent('left', $event)"> +
@@ -21,8 +25,12 @@ [innerHTML]="getDescriptionToDisplay()"> -
+ [attr.aria-label]="accessibilityConfig.mainNextImageAriaLabel" + [tabindex]="isLastImage && !slideConfig?.infinite ? -1 : 0" role="button" + (click)="onNavigationEvent('right', $event)" (keyup)="onNavigationEvent('right', $event)"> +
diff --git a/projects/ks89/angular-modal-gallery/src/lib/model/accessibility.interface.ts b/projects/ks89/angular-modal-gallery/src/lib/model/accessibility.interface.ts index 08c0e160..e634e92b 100644 --- a/projects/ks89/angular-modal-gallery/src/lib/model/accessibility.interface.ts +++ b/projects/ks89/angular-modal-gallery/src/lib/model/accessibility.interface.ts @@ -55,4 +55,20 @@ export interface AccessibilityConfig { previewScrollPrevTitle: string; previewScrollNextAriaLabel: string; previewScrollNextTitle: string; + + carouselContainerAriaLabel: string; + carouselContainerTitle: string; + carouselPrevImageAriaLabel: string; + carouselPrevImageTitle: string; + carouselNextImageAriaLabel: string; + carouselNextImageTitle: string; + carouselDotsContainerAriaLabel: string; + carouselDotsContainerTitle: string; + carouselDotAriaLabel: string; + carouselPreviewsContainerAriaLabel: string; + carouselPreviewsContainerTitle: string; + carouselPreviewScrollPrevAriaLabel: string; + carouselPreviewScrollPrevTitle: string; + carouselPreviewScrollNextAriaLabel: string; + carouselPreviewScrollNextTitle: string; } diff --git a/src/app/carousel/carousel.component.ts b/src/app/carousel/carousel.component.ts index 89180273..33c64225 100644 --- a/src/app/carousel/carousel.component.ts +++ b/src/app/carousel/carousel.component.ts @@ -223,7 +223,23 @@ export class CarouselComponent { previewScrollPrevAriaLabel: 'CUSTOM Scroll previous previews', previewScrollPrevTitle: 'CUSTOM Scroll previous previews', previewScrollNextAriaLabel: 'CUSTOM Scroll next previews', - previewScrollNextTitle: 'CUSTOM Scroll next previews' + previewScrollNextTitle: 'CUSTOM Scroll next previews', + + carouselContainerAriaLabel: 'Current image and navigation', + carouselContainerTitle: '', + carouselPrevImageAriaLabel: 'Previous image', + carouselPrevImageTitle: 'Previous image', + carouselNextImageAriaLabel: 'Next image', + carouselNextImageTitle: 'Next image', + carouselDotsContainerAriaLabel: 'Image navigation dots', + carouselDotsContainerTitle: '', + carouselDotAriaLabel: 'Navigate to image number', + carouselPreviewsContainerAriaLabel: 'Image previews', + carouselPreviewsContainerTitle: '', + carouselPreviewScrollPrevAriaLabel: 'Scroll previous previews', + carouselPreviewScrollPrevTitle: 'Scroll previous previews', + carouselPreviewScrollNextAriaLabel: 'Scroll next previews', + carouselPreviewScrollNextTitle: 'Scroll next previews' }; constructor(private galleryService: GalleryService, private sanitizer: DomSanitizer) {} diff --git a/src/app/modal-gallery/modal-gallery.component.ts b/src/app/modal-gallery/modal-gallery.component.ts index 2e88a430..58f90fe1 100644 --- a/src/app/modal-gallery/modal-gallery.component.ts +++ b/src/app/modal-gallery/modal-gallery.component.ts @@ -521,7 +521,23 @@ export class ModalGalleryComponent { previewScrollPrevAriaLabel: 'CUSTOM Scroll previous previews', previewScrollPrevTitle: 'CUSTOM Scroll previous previews', previewScrollNextAriaLabel: 'CUSTOM Scroll next previews', - previewScrollNextTitle: 'CUSTOM Scroll next previews' + previewScrollNextTitle: 'CUSTOM Scroll next previews', + + carouselContainerAriaLabel: 'Current image and navigation', + carouselContainerTitle: '', + carouselPrevImageAriaLabel: 'Previous image', + carouselPrevImageTitle: 'Previous image', + carouselNextImageAriaLabel: 'Next image', + carouselNextImageTitle: 'Next image', + carouselDotsContainerAriaLabel: 'Image navigation dots', + carouselDotsContainerTitle: '', + carouselDotAriaLabel: 'Navigate to image number', + carouselPreviewsContainerAriaLabel: 'Image previews', + carouselPreviewsContainerTitle: '', + carouselPreviewScrollPrevAriaLabel: 'Scroll previous previews', + carouselPreviewScrollPrevTitle: 'Scroll previous previews', + carouselPreviewScrollNextAriaLabel: 'Scroll next previews', + carouselPreviewScrollNextTitle: 'Scroll next previews' }; constructor(private galleryService: GalleryService, private sanitizer: DomSanitizer) {} diff --git a/src/app/plain-gallery/plain-gallery.component.ts b/src/app/plain-gallery/plain-gallery.component.ts index c730d963..7ae43f0e 100644 --- a/src/app/plain-gallery/plain-gallery.component.ts +++ b/src/app/plain-gallery/plain-gallery.component.ts @@ -187,7 +187,23 @@ export class PlainGalleryComponent { previewScrollPrevAriaLabel: 'CUSTOM Scroll previous previews', previewScrollPrevTitle: 'CUSTOM Scroll previous previews', previewScrollNextAriaLabel: 'CUSTOM Scroll next previews', - previewScrollNextTitle: 'CUSTOM Scroll next previews' + previewScrollNextTitle: 'CUSTOM Scroll next previews', + + carouselContainerAriaLabel: 'Current image and navigation', + carouselContainerTitle: '', + carouselPrevImageAriaLabel: 'Previous image', + carouselPrevImageTitle: 'Previous image', + carouselNextImageAriaLabel: 'Next image', + carouselNextImageTitle: 'Next image', + carouselDotsContainerAriaLabel: 'Image navigation dots', + carouselDotsContainerTitle: '', + carouselDotAriaLabel: 'Navigate to image number', + carouselPreviewsContainerAriaLabel: 'Image previews', + carouselPreviewsContainerTitle: '', + carouselPreviewScrollPrevAriaLabel: 'Scroll previous previews', + carouselPreviewScrollPrevTitle: 'Scroll previous previews', + carouselPreviewScrollNextAriaLabel: 'Scroll next previews', + carouselPreviewScrollNextTitle: 'Scroll next previews' }; constructor(private galleryService: GalleryService, private sanitizer: DomSanitizer) {}