From 6e538c5e54e7a05b39a54a6b8484c99b9ab591eb Mon Sep 17 00:00:00 2001
From: petarmarkov9449 <166535589+petarmarkov9449@users.noreply.github.com>
Date: Fri, 6 Dec 2024 15:50:45 +0100
Subject: [PATCH] fix: (CXSPA-9071) - Add aria-label for the buttons in
 ProductImageZoomView (#19726)

---
 .../image-zoom/assets/translations/en/productImageZoom.json   | 2 ++
 .../product-image-zoom-view.component.html                    | 4 ++++
 .../product-image-zoom-view.component.spec.ts                 | 4 +++-
 3 files changed, 9 insertions(+), 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
index cdd608c97af..4893a1df366 100644
--- 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/feature-libs/product/image-zoom/components/product-image-zoom/product-image-zoom-view/product-image-zoom-view.component.html b/feature-libs/product/image-zoom/components/product-image-zoom/product-image-zoom-view/product-image-zoom-view.component.html
index b849ffcac9a..0a3d48193f8 100644
--- a/feature-libs/product/image-zoom/components/product-image-zoom/product-image-zoom-view/product-image-zoom-view.component.html
+++ b/feature-libs/product/image-zoom/components/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/feature-libs/product/image-zoom/components/product-image-zoom/product-image-zoom-view/product-image-zoom-view.component.spec.ts b/feature-libs/product/image-zoom/components/product-image-zoom/product-image-zoom-view/product-image-zoom-view.component.spec.ts
index 441291d8741..89848c31683 100644
--- a/feature-libs/product/image-zoom/components/product-image-zoom/product-image-zoom-view/product-image-zoom-view.component.spec.ts
+++ b/feature-libs/product/image-zoom/components/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,