From 80b5555a45b1ef6190e9b5bd5b1065c2a4189d59 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Erik=20V=C3=A4nttinen?= <eepi1994@hotmail.com>
Date: Fri, 6 Oct 2023 11:30:30 +0300
Subject: [PATCH 1/2] TMS-936: Image carousel accessibility fixes

---
 CHANGELOG.MD                                |  2 ++
 partials/layouts/layout-image-carousel.dust | 30 ++++++++++-----------
 2 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/CHANGELOG.MD b/CHANGELOG.MD
index 9a8a6a6..731e314 100644
--- 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.6.2] - 2023-04-27
 
 ### Fixed
diff --git a/partials/layouts/layout-image-carousel.dust b/partials/layouts/layout-image-carousel.dust
index bd8f0a8..8666284 100644
--- 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}">
+<div {?anchor}id="{anchor|attr}"{/anchor} class="section image-carousel layout-image-carousel p-8 {accent_color|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}">
-                    {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}">
+                    {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">
-                    {description|s}
+                    {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|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 has-zoom-on-hover"
                                 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-white is-outlined 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>

From 3ace970a0e386aa9be5a03d9a817116c22f0acd8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Erik=20V=C3=A4nttinen?= <eepi1994@hotmail.com>
Date: Wed, 11 Oct 2023 23:09:21 +0300
Subject: [PATCH 2/2] 1.6.3

---
 CHANGELOG.MD | 2 ++
 style.css    | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.MD b/CHANGELOG.MD
index 731e314..e8f6edd 100644
--- 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]
 
+## [1.6.3] - 2023-10-12
+
 - TMS-936: Image carousel accessibility fixes
 
 ## [1.6.2] - 2023-04-27
diff --git a/style.css b/style.css
index 933cec9..b8842bf 100644
--- a/style.css
+++ b/style.css
@@ -1,7 +1,7 @@
 /*
  * Theme Name:  TMS Theme Sara Hilden
  * Description: Tampere Multisite Sara Hilden Theme
- * Version:     1.6.2
+ * Version:     1.6.3
  * Author:      Geniem
  * Author URI:  https://geniem.fi
  * Template:    tms-theme-base