Skip to content

Commit 6e538c5

Browse files
fix: (CXSPA-9071) - Add aria-label for the buttons in ProductImageZoomView (#19726)
1 parent 790fe55 commit 6e538c5

File tree

3 files changed

+9
-1
lines changed

3 files changed

+9
-1
lines changed

feature-libs/product/image-zoom/assets/translations/en/productImageZoom.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
},
55
"productImageZoomDialog": {
66
"zoomedInImage": "Zoomed in image",
7+
"previousSlide": "Previous slide",
8+
"nextSlide": "Next slide",
79
"close": "Close"
810
}
911
}

feature-libs/product/image-zoom/components/product-image-zoom/product-image-zoom-view/product-image-zoom-view.component.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
<div class="cx-navigate-image">
44
<button
55
class="btn btn-link"
6+
[attr.aria-label]="'productImageZoomDialog.previousSlide' | cxTranslate"
7+
[attr.title]="'productImageZoomDialog.previousSlide' | cxTranslate"
68
*ngIf="getPreviousProduct(thumbs) | async as previousProduct"
79
(click)="openImage(previousProduct.container)"
810
>
@@ -81,6 +83,8 @@
8183
<div class="cx-navigate-image">
8284
<button
8385
class="btn btn-link"
86+
[attr.aria-label]="'productImageZoomDialog.nextSlide' | cxTranslate"
87+
[attr.title]="'productImageZoomDialog.nextSlide' | cxTranslate"
8488
*ngIf="getNextProduct(thumbs) | async as nextProduct"
8589
(click)="openImage(nextProduct.container)"
8690
>

feature-libs/product/image-zoom/components/product-image-zoom/product-image-zoom-view/product-image-zoom-view.component.spec.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { By } from '@angular/platform-browser';
1616
import {
1717
FeatureConfigService,
1818
FeaturesConfigModule,
19+
I18nTestingModule,
1920
ImageGroup,
2021
Product,
2122
} from '@spartacus/core';
@@ -26,6 +27,7 @@ import {
2627
CurrentProductService,
2728
} from '@spartacus/storefront';
2829
import { EMPTY, Observable, of } from 'rxjs';
30+
2931
import { ProductImageZoomViewComponent } from './product-image-zoom-view.component';
3032

3133
const firstImage = {
@@ -134,7 +136,7 @@ describe('ProductImageZoomViewComponent', () => {
134136

135137
beforeEach(async () => {
136138
TestBed.configureTestingModule({
137-
imports: [FeaturesConfigModule],
139+
imports: [I18nTestingModule, FeaturesConfigModule],
138140
declarations: [
139141
ProductImageZoomViewComponent,
140142
MockIconComponent,

0 commit comments

Comments
 (0)