Skip to content

Commit

Permalink
Merge pull request #155 from devgeniem/TMS-936
Browse files Browse the repository at this point in the history
TMS-936: Image carousel accessibility fixes
  • Loading branch information
eebbi authored Oct 11, 2023
2 parents 9961272 + aee1e57 commit 53c6d06
Show file tree
Hide file tree
Showing 3 changed files with 20 additions and 16 deletions.
4 changes: 4 additions & 0 deletions CHANGELOG.MD
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.

## [Unreleased]

## [1.18.2] - 2023-10-12

- TMS-936: Image carousel accessibility fixes

## [1.18.1] - 2023-05-24

### Changed
Expand Down
30 changes: 15 additions & 15 deletions partials/layouts/layout-image-carousel.dust
Original file line number Diff line number Diff line change
@@ -1,38 +1,38 @@
{?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"
<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-3">
{title|s}
{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 mb-6">
{description|s}
{description|kses}
</div>
{/description}

<div class="image-carousel__inner column is-full ">
<button class="button button--icon is-primary 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 {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}"
Expand All @@ -44,26 +44,26 @@
</div>
<button class="button button--icon is-primary 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 modal-close-button is-primary 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">
{@image id=image.id alt=image.alt title=image.description size="fullhd" width="{image.sizes.fullhd-width}" height="{image.sizes.fullhd-height}" loading="" /}

{>"ui/image/image-block__meta" /}
Expand Down
2 changes: 1 addition & 1 deletion style.css
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/*
* Theme Name: TMS Theme Muumimuseo
* Description: Tampere Multisite Muumimuseo Theme
* Version: 1.18.1
* Version: 1.18.2
* Author: Geniem
* Author URI: https://geniem.fi
* Template: tms-theme-base
Expand Down

0 comments on commit 53c6d06

Please sign in to comment.