feat(a11y): add keyboard prev/next to photo strip and region landmark

2026-06-20 20:32:12 +02:00
parent ce5d520817
commit f463eadbef
2 changed files with 55 additions and 0 deletions
@@ -30,13 +30,42 @@
 <script>
 (function () {
    document.querySelectorAll('.journal-photo-strip').forEach(function (strip) {
+        strip.setAttribute('role', 'region');
+        strip.setAttribute('aria-label', 'Photo strip');
+
+        var slideCount = parseInt(strip.dataset.slides, 10) || 1;
        var dots = strip.nextElementSibling;
        if (!dots || !dots.classList.contains('journal-photo-dots')) return;
        var dotEls = Array.from(dots.querySelectorAll('.journal-photo-dot'));
+
        strip.addEventListener('scroll', function () {
            var idx = Math.round(strip.scrollLeft / strip.offsetWidth);
            dotEls.forEach(function (d, i) { d.classList.toggle('is-active', i === idx); });
        }, { passive: true });
+
+        if (slideCount < 2) return;
+
+        var prev = document.createElement('button');
+        prev.className = 'strip-prev';
+        prev.setAttribute('aria-label', 'Previous photo');
+        prev.textContent = '‹';
+        prev.addEventListener('click', function () {
+            strip.scrollBy({ left: -strip.offsetWidth, behavior: 'smooth' });
+        });
+
+        var next = document.createElement('button');
+        next.className = 'strip-next';
+        next.setAttribute('aria-label', 'Next photo');
+        next.textContent = '›';
+        next.addEventListener('click', function () {
+            strip.scrollBy({ left: strip.offsetWidth, behavior: 'smooth' });
+        });
+
+        var controls = document.createElement('div');
+        controls.className = 'strip-controls';
+        controls.appendChild(prev);
+        controls.appendChild(next);
+        dots.insertAdjacentElement('afterend', controls);
    });
 })();
 </script>