TMS-1048: Fix screen reader texts for exhibition-carousel

devgeniem · Jun 3, 2024 · b0ae382 · b0ae382
1 parent fe49af6
commit b0ae382
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 2 deletions.
diff --git a/CHANGELOG.MD b/CHANGELOG.MD
@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+- TMS-1048: Fix screen reader texts to show on exhibition-carousel
+
 ## [1.3.5] - 2024-05-20
 
 - TMS-1028: Add social-media link column to footer

diff --git a/lib/Formatters/ExhibitionCarouselFormatter.php b/lib/Formatters/ExhibitionCarouselFormatter.php
@@ -58,6 +58,8 @@ public function format( array $data ) : array {
             $post_item->post_url = get_permalink( $post_item->ID );
         }
 
+        $data['translations'] = ( new \Strings() )->s()['gallery'] ?? [];
+
         return $data;
     }
 }
diff --git a/partials/layouts/layout-image-carousel.dust b/partials/layouts/layout-image-carousel.dust
@@ -34,7 +34,7 @@
                                 aria-controls="{carousel_id|attr}-modal"
                                 aria-expanded="false"
                                 aria-haspopup="true"
-                                aria-label="{translations.open}"
+                                aria-label="{translations.open|attr}"
                             >
                                 {@image id=image.id alt=image.alt title=image.alt size="medium_vertical" class="objectfit-image" width="{image.sizes.medium_vertical-width}" loading="" /}
                             </button>
@@ -64,7 +64,7 @@
             {! Slider inside the modal !}
             <div class="image-carousel__items image-carousel__items--modal column is-full" id="{carousel_id|attr}-modal-carousel" data-slider-for="{carousel_id|attr}">
                 {#rows}
-                    <div class="image-carousel__item" id="{id}-modal">
+                    <div class="image-carousel__item" id="{id|attr}-modal">
                         <div class="img-wrapper">
                         {@image id=image.id alt=image.alt title=image.alt size="fullhd" width="{image.sizes.fullhd-width}" height="{image.sizes.fullhd-height}" loading="" /}
                         </div>