TMS-936: Image carousel accessibility fixes

devgeniem · Oct 6, 2023 · c3a36a4 · c3a36a4
1 parent 3f1cb3f
commit c3a36a4
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 17 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.9.2] - 2023-09-04
 
 ### Fixed

diff --git a/partials/layouts/layout-image-carousel.dust b/partials/layouts/layout-image-carousel.dust
@@ -1,37 +1,37 @@
 {?rows}
-<div {?anchor}id="{anchor|s}"{/anchor} class="section image-carousel layout-image-carousel p-8 {accent_color|s}" {bg_style|s}>
+<div {?anchor}id="{anchor|attr}"{/anchor} class="section image-carousel layout-image-carousel p-8 {accent_color|attr}" {bg_style|attr}>
     <div class="container keep-vertical-spacing">
         <div class="columns is-multiline">
 
             {?title}
-                <h3 id="{carousel_id}-title"
-                    class="image-carousel__title column is-block is-half is-offset-one-quarter has-text-centered mt-0 mb-0 {carousel_title_class|s} {txt_color_class|s}">
-                    {title|s}
+                <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>
             {/title}
 
             {?description}
-                <div class="image-carousel__description column is-half is-offset-one-quarter has-text-lead has-text-centered mt-0 {txt_color_class|s}">
-                    {description|s}
+                <div class="image-carousel__description column is-half is-offset-one-quarter has-text-lead has-text-centered mt-0 {txt_color_class|attr}">
+                    {description|kses}
                 </div>
             {/description}
 
             <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|s}</span>
+                    <span class="is-sr-only">{translations.previous|s}</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|s}</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}">
+            <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>