Add Swiper translations for A11Y feature

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-<lang>.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-<lang>.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).

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-<lang>.json language files.",
+  "date": "2026-07-27",
+  "issues": [659],
+  "pr": null,
+  "requires": [],
+  "frontend": {
+    "modify": ["js/components-core/swiper.component.ts"]
+  }
+}

clint/updates/index.json

@@ -1,3 +1,3 @@
 {
   "schema": 1,
   "generatedAt": "2026-07-27T14:53:29.273Z",
@@ -90,6 +90,19 @@
       "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
+    },
     {
       "id": "20260727-remove-aria-expanded-on-video-toggle",
       "seq": 9,

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`);
+  }
 }

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}}"
+}

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}}"
+}

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}}"
+}