TMS-936: Image carousel accessibility fixes

devgeniem · Oct 6, 2023 · 52de132 · 52de132
1 parent ec0d258
commit 52de132
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 11 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-936: Image carousel accessibility fixes
+
 ## [1.1.4] - 2023-10-04
 - TMS-978: Reduce single manual-event description line-height & margin
 

diff --git a/partials/layouts/layout-image-carousel.dust b/partials/layouts/layout-image-carousel.dust
@@ -4,7 +4,7 @@
         <div class="columns is-multiline">
 
             {?title}
-                <h3 id="{carousel_id}-title"
+                <h3 id="{carousel_id|attr}-title"
                     class="image-carousel__title column is-block is-half is-offset-one-quarter has-text-centered mt-0 mb-0 {carousel_title_class|attr} {txt_color_class|attr}">
                     {title|html}
                 </h3>
@@ -19,19 +19,19 @@
             <div class="image-carousel__inner column is-full">
                 <button class="button button--icon is-primary is-rounded slick-prev slick-arrow" type="button">
                     {>"ui/icon" icon="chevron-left" /}
-                    <span class="is-sr-only">{Strings.s.gallery.previous|html}</span>
+                    <span class="is-sr-only">{translations.previous|html}</span>
                 </button>
 
                 <div class="image-carousel__items image-carousel__items--primary"
-                     id="{carousel_id}" data-slider-for="{carousel_id}-modal-carousel">
+                     id="{carousel_id|attr}" data-slider-for="{carousel_id|attr}-modal-carousel">
                     {#rows}
-                        <div class="image-carousel__item" id="{id}">
+                        <div class="image-carousel__item" id="{id|attr}">
                             {! Modal trigger !}
                             <button
-                                class="image modal-trigger {shape}"
+                                class="image modal-trigger {shape|attr}"
                                 data-modal-button
-                                data-target="{carousel_id}-modal"
-                                aria-controls="{carousel_id}-modal"
+                                data-target="{carousel_id|attr}-modal"
+                                aria-controls="{carousel_id|attr}-modal"
                                 aria-expanded="false"
                                 aria-haspopup="true"
                                 aria-label="{translations.open}"
@@ -44,27 +44,27 @@
 
                 <button class="button button--icon is-primary is-rounded slick-next slick-arrow" type="button">
                     {>"ui/icon" icon="chevron-right" /}
-                    <span class="is-sr-only">{Strings.s.gallery.next|html}</span>
+                    <span class="is-sr-only">{translations.next|html}</span>
                 </button>
             </div>
         </div>
     </div>
 
     {! The modal !}
-    <div id="{carousel_id}-modal" class="modal modal--large modal--slider" role="dialog" aria-modal="true" aria-labelledby="{carousel_id}">
+    <div id="{carousel_id|attr}-modal" class="modal modal--large modal--slider" role="dialog" aria-modal="true" aria-labelledby="{carousel_id|attr}">
         <div class="modal-background"></div>
 
         <button
             class="button button--icon modal-close-button is-flex is-align-self-flex-end image-carousel__modal-control">
-            <span class="modal-close-button__text">{translations.close}</span>
+            <span class="modal-close-button__text">{translations.close|html}</span>
             {>"ui/icon" icon="close" class="icon--medium" /}
         </button>
         <div class="modal-content">
 
             {! Slider inside the modal !}
             <div class="image-carousel__items image-carousel__items--modal column is-full" id="{carousel_id}-modal-carousel" data-slider-for="{carousel_id}">
                 {#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>