fix: (CXSPA-9071) - Add aria-label for the buttons in ProductImageZoo…

…mView (#19726)
SAP · Dec 6, 2024 · 6e538c5 · 6e538c5
1 parent 790fe55
commit 6e538c5
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 1 deletion.
diff --git a/feature-libs/product/image-zoom/assets/translations/en/productImageZoom.json b/feature-libs/product/image-zoom/assets/translations/en/productImageZoom.json
@@ -4,6 +4,8 @@
   },
   "productImageZoomDialog": {
     "zoomedInImage": "Zoomed in image",
+    "previousSlide": "Previous slide",
+    "nextSlide": "Next slide",
     "close": "Close"
   }
 }
diff --git a/...ponents/product-image-zoom/product-image-zoom-view/product-image-zoom-view.component.html b/...ponents/product-image-zoom/product-image-zoom-view/product-image-zoom-view.component.html
@@ -3,6 +3,8 @@
     <div class="cx-navigate-image">
       <button
         class="btn btn-link"
+        [attr.aria-label]="'productImageZoomDialog.previousSlide' | cxTranslate"
+        [attr.title]="'productImageZoomDialog.previousSlide' | cxTranslate"
         *ngIf="getPreviousProduct(thumbs) | async as previousProduct"
         (click)="openImage(previousProduct.container)"
       >
@@ -81,6 +83,8 @@
     <div class="cx-navigate-image">
       <button
         class="btn btn-link"
+        [attr.aria-label]="'productImageZoomDialog.nextSlide' | cxTranslate"
+        [attr.title]="'productImageZoomDialog.nextSlide' | cxTranslate"
         *ngIf="getNextProduct(thumbs) | async as nextProduct"
         (click)="openImage(nextProduct.container)"
       >

diff --git a/...ents/product-image-zoom/product-image-zoom-view/product-image-zoom-view.component.spec.ts b/...ents/product-image-zoom/product-image-zoom-view/product-image-zoom-view.component.spec.ts
@@ -16,6 +16,7 @@ import { By } from '@angular/platform-browser';
 import {
   FeatureConfigService,
   FeaturesConfigModule,
+  I18nTestingModule,
   ImageGroup,
   Product,
 } from '@spartacus/core';
@@ -26,6 +27,7 @@ import {
   CurrentProductService,
 } from '@spartacus/storefront';
 import { EMPTY, Observable, of } from 'rxjs';
+
 import { ProductImageZoomViewComponent } from './product-image-zoom-view.component';
 
 const firstImage = {
@@ -134,7 +136,7 @@ describe('ProductImageZoomViewComponent', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      imports: [FeaturesConfigModule],
+      imports: [I18nTestingModule, FeaturesConfigModule],
       declarations: [
         ProductImageZoomViewComponent,
         MockIconComponent,