Merge pull request #477 from devgeniem/TMS-936

TMS-936: Image carousel accessibility fixes

CHANGELOG.MD

@@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+- TMS-936: Image carousel accessibility fixes
 - TMS-933: Modaal accessibility fixes
 
 ## [1.50.0] - 2023-10-04

assets/scripts/image-carousel.js

@@ -88,7 +88,7 @@ export default class ImageCarousel {
                 asNavFor: '#' + modalCarousel.attr( 'data-slider-for' ),
                 prevArrow: buttons.prevArrow,
                 nextArrow: buttons.nextArrow,
-                regionLabel: translations.modal_carousel,
+                regionLabel: translations.browsing_images,
                 arrowsPlacement: 'afterSlides',
             } );
 
@@ -125,7 +125,9 @@ export default class ImageCarousel {
             // Make the centered image selectable, rest disabled.
             // This way user can't open the "wrong" image and get confused of the results.
             $( slick.$slider ).find( '.slick-slide button' ).removeAttr( 'disabled' );
+            $( slick.$slider ).find( '.slick-slide button' ).removeAttr( 'aria-hidden' );
             $( slick.$slider ).find( '.slick-slide:not(.slick-current) button' ).attr( 'disabled', '' );
+            $( slick.$slider ).find( '.slick-slide:not(.slick-current) button' ).attr( 'aria-hidden', 'true' );
 
             // Transalate Slick Slider stuff
             this.translateCarousels( translations );