feat(): initial impl of accessibility for carousel #144

Ks89 · Aug 16, 2018 · 908a239 · 908a239
1 parent 65a2abb
commit 908a239
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 8 deletions.
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
@@ -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
@@ -2,8 +2,12 @@
   <figure id="current-figure">
 
     <a class="nav-left" *ngIf="isShowArrows"
-       (click)="onNavigationEvent('left', $event)">
-      <div class="inside {{isFirstImage && !slideConfig?.infinite ? 'empty-arrow-image' : 'left-arrow-image'}}"></div>
+       [attr.aria-label]="accessibilityConfig.mainNextImageAriaLabel"
+       [tabindex]="isLastImage && !slideConfig?.infinite ? -1 : 0" role="button"
+       (click)="onNavigationEvent('left', $event)" (keyup)="onNavigationEvent('left', $event)">
+      <div class="inside {{isFirstImage && !slideConfig?.infinite ? 'empty-arrow-image' : 'left-arrow-image'}}"
+           aria-hidden="true"
+           [title]="accessibilityConfig.mainNextImageTitle"></div>
     </a>
 
     <ng-content></ng-content>
@@ -21,8 +25,12 @@
                 [innerHTML]="getDescriptionToDisplay()"></figcaption>
 
     <a class="nav-right" *ngIf="isShowArrows"
-       (click)="onNavigationEvent('right', $event)">
-      <div class="inside {{isLastImage && !slideConfig?.infinite ? 'empty-arrow-image' : 'right-arrow-image'}}"></div>
+       [attr.aria-label]="accessibilityConfig.mainNextImageAriaLabel"
+       [tabindex]="isLastImage && !slideConfig?.infinite ? -1 : 0" role="button"
+       (click)="onNavigationEvent('right', $event)" (keyup)="onNavigationEvent('right', $event)">
+      <div class="inside {{isLastImage && !slideConfig?.infinite ? 'empty-arrow-image' : 'right-arrow-image'}}"
+           aria-hidden="true"
+           [title]="accessibilityConfig.mainNextImageTitle"></div>
     </a>
 
     <div id="dots">

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
@@ -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
@@ -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
@@ -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
@@ -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) {}