From ed0f0fc713e0221053bbb584f54e7693c92668cb Mon Sep 17 00:00:00 2001 From: Emily Berghen Date: Mon, 27 Jul 2026 12:21:12 +0200 Subject: [PATCH 1/2] Add Swiper translations for A11Y feature --- .../js/components-core/swiper.component.ts | 37 ++++++++++++++----- frontend/js/i18n/s-swiper-en.json | 7 ++++ frontend/js/i18n/s-swiper-fr.json | 7 ++++ frontend/js/i18n/s-swiper-nl.json | 7 ++++ 4 files changed, 48 insertions(+), 10 deletions(-) create mode 100644 frontend/js/i18n/s-swiper-en.json create mode 100644 frontend/js/i18n/s-swiper-fr.json create mode 100644 frontend/js/i18n/s-swiper-nl.json diff --git a/frontend/js/components-core/swiper.component.ts b/frontend/js/components-core/swiper.component.ts index 9ccb302f..d59d57bc 100644 --- a/frontend/js/components-core/swiper.component.ts +++ b/frontend/js/components-core/swiper.component.ts @@ -1,21 +1,38 @@ import Swiper from 'swiper'; +import { SiteLang } from '../utils/site-lang'; import { Navigation, A11y } from 'swiper/modules'; import 'swiper/css'; // import 'swiper/css/navigation'; export default class SwiperComponent { + private siteLang = SiteLang.getLang(); + private lang; + constructor() { - const swiper = new Swiper('.swiper', { - modules: [Navigation, A11y], - slidesPerView: 'auto', - // slideToClickedSlide: true, - watchSlidesProgress: true, - navigation: { - nextEl: '.swiper-button-next', - prevEl: '.swiper-button-prev', - lockClass: 'hidden', - }, + this.getLang().then(() => { + const swiper = new Swiper('.swiper', { + modules: [Navigation, A11y], + slidesPerView: 'auto', + // slideToClickedSlide: true, + watchSlidesProgress: true, + navigation: { + nextEl: '.swiper-button-next', + prevEl: '.swiper-button-prev', + lockClass: 'hidden', + }, + a11y: { + prevSlideMessage: this.lang.prevSlideMessage, + nextSlideMessage: this.lang.nextSlideMessage, + firstSlideMessage: this.lang.firstSlideMessage, + lastSlideMessage: this.lang.lastSlideMessage, + paginationBulletMessage: this.lang.paginationBulletMessage, + }, + }); }); } + + private async getLang() { + this.lang = await import(`../i18n/s-swiper-${this.siteLang}.json`); + } } diff --git a/frontend/js/i18n/s-swiper-en.json b/frontend/js/i18n/s-swiper-en.json new file mode 100644 index 00000000..633d43f7 --- /dev/null +++ b/frontend/js/i18n/s-swiper-en.json @@ -0,0 +1,7 @@ +{ + "firstSlideMessage": "This is the first slide", + "lastSlideMessage": "This is the last slide", + "nextSlideMessage": "Next slide", + "prevSlideMessage": "Previous slide", + "paginationBulletMessage": "Go to slide {{index}}" +} diff --git a/frontend/js/i18n/s-swiper-fr.json b/frontend/js/i18n/s-swiper-fr.json new file mode 100644 index 00000000..53dd822f --- /dev/null +++ b/frontend/js/i18n/s-swiper-fr.json @@ -0,0 +1,7 @@ +{ + "firstSlideMessage": "C'est la première diapositive", + "lastSlideMessage": "C'est la dernière diapositive", + "nextSlideMessage": "Diapositive suivante", + "prevSlideMessage": "Diapositive précédente", + "paginationBulletMessage": "Aller à la diapositive {{index}}" +} diff --git a/frontend/js/i18n/s-swiper-nl.json b/frontend/js/i18n/s-swiper-nl.json new file mode 100644 index 00000000..1746cb13 --- /dev/null +++ b/frontend/js/i18n/s-swiper-nl.json @@ -0,0 +1,7 @@ +{ + "firstSlideMessage": "Dit is de eerste slide", + "lastSlideMessage": "Dit is de laatste slide", + "nextSlideMessage": "Volgende slide", + "prevSlideMessage": "Vorige slide", + "paginationBulletMessage": "Ga naar slide {{index}}" +} From 2c0aebb541cdd608c0cd32c5c579a311b95d70e5 Mon Sep 17 00:00:00 2001 From: Emily Berghen Date: Mon, 27 Jul 2026 15:54:23 +0200 Subject: [PATCH 2/2] Add update file --- .../CHANGELOG.md | 42 +++++++++++++++++++ .../update.json | 12 ++++++ clint/updates/index.json | 15 ++++++- 3 files changed, 68 insertions(+), 1 deletion(-) create mode 100644 clint/updates/20260727-add-swiper-accessibility-announcements/CHANGELOG.md create mode 100644 clint/updates/20260727-add-swiper-accessibility-announcements/update.json diff --git a/clint/updates/20260727-add-swiper-accessibility-announcements/CHANGELOG.md b/clint/updates/20260727-add-swiper-accessibility-announcements/CHANGELOG.md new file mode 100644 index 00000000..3e60bed1 --- /dev/null +++ b/clint/updates/20260727-add-swiper-accessibility-announcements/CHANGELOG.md @@ -0,0 +1,42 @@ +# Add Swiper accessibility announcements + +**Release date:** 2026-07-27 + +## Summary + +The swiper component now feeds translated messages to Swiper's `A11y` module, so screen reader +users hear meaningful labels on the navigation buttons and pagination bullets instead of the +English defaults. The strings live in new `s-swiper-.json` language files and are loaded for +the current site language, following the same pattern as the other components. + +## Highlights + +- ✅ **Translated screen reader messages** — `prevSlideMessage`, `nextSlideMessage`, `firstSlideMessage`, `lastSlideMessage` and `paginationBulletMessage` are passed to the `A11y` module +- ✅ **Language files for NL, FR and EN** — `frontend/js/i18n/s-swiper-nl.json`, `-fr.json` and `-en.json` +- ✅ **Language-aware initialisation** — the swiper is initialised after its language file resolves, using `SiteLang.getLang()` + +## Added + +- `frontend/js/i18n/s-swiper-en.json`, `s-swiper-fr.json`, `s-swiper-nl.json` (automated) + +## Changed + +- `frontend/js/components-core/swiper.component.ts`: imports `SiteLang`, awaits the matching + language file and passes the messages through the `a11y` option of the Swiper config (automated) + +# Manual intervention + +> ⚠️ **ATTENTION**: +> +> - `swiper.component.ts` is force-synced by this update. If your project customised that file, +> your changes are overwritten — check the file after updating and re-apply your customisations +> on top of the new language-aware `constructor` / `getLang` structure. +> - The language file is resolved from `document.documentElement.lang`. If your project runs a site +> language other than `nl`, `fr` or `en`, add a matching +> `frontend/js/i18n/s-swiper-.json` (copy `s-swiper-en.json` and translate it), otherwise +> the dynamic import fails and the swiper does not initialise. +> - Run `yarn build` (or restart `yarn dev`) after updating so the new language files are bundled. + +## Docs + +You can find the [documentation on our docs](https://statikbe.github.io/craft/frontend/components/swiper.html). diff --git a/clint/updates/20260727-add-swiper-accessibility-announcements/update.json b/clint/updates/20260727-add-swiper-accessibility-announcements/update.json new file mode 100644 index 00000000..0f52093a --- /dev/null +++ b/clint/updates/20260727-add-swiper-accessibility-announcements/update.json @@ -0,0 +1,12 @@ +{ + "id": "20260727-add-swiper-accessibility-announcements", + "title": "Add Swiper accessibility announcements", + "description": "Adds translated screen reader announcements to the swiper component through the Swiper A11y module, loaded from new s-swiper-.json language files.", + "date": "2026-07-27", + "issues": [659], + "pr": null, + "requires": [], + "frontend": { + "modify": ["js/components-core/swiper.component.ts"] + } +} diff --git a/clint/updates/index.json b/clint/updates/index.json index 34e89034..817aea45 100644 --- a/clint/updates/index.json +++ b/clint/updates/index.json @@ -1,6 +1,6 @@ { "schema": 1, - "generatedAt": "2026-06-19T14:44:06.354Z", + "generatedAt": "2026-07-27T13:49:13.619Z", "updates": [ { "id": "1.0.1", @@ -89,6 +89,19 @@ "requires": [], "legacyVersion": "1.0.9", "hasOps": false + }, + { + "id": "20260727-add-swiper-accessibility-announcements", + "seq": 9, + "title": "Add Swiper accessibility announcements", + "date": "2026-07-27", + "issues": [ + 659 + ], + "pr": null, + "requires": [], + "legacyVersion": null, + "hasOps": true } ] }