Add files via upload

js/splitflap.js

@@ -1,6 +1,13 @@
 // Simuliert das Umklappen einer mechanischen Bahnhofs-Anzeigetafel (Solari-Board).
 // Jedes Zeichen "rattert" kurz durch ein paar Zufallszeichen, bevor es sich auf
 // den Zielwert setzt - versetzt pro Zeichen, damit es wie eine echte Tafel wirkt.
+//
+// Für Screenreader ist dieses Zeichensalat-Geflacker während der Animation
+// nutzlos bis irreführend. Deshalb wird der sichtbare, animierte Teil in einen
+// eigenen Container mit aria-hidden="true" verschoben, und daneben liegt ein
+// unsichtbarer (.sr-only), aber für Screenreader normal lesbarer Textknoten
+// mit dem fertigen Zielwert - der aktualisiert sich sofort, ohne die
+// Ratter-Zwischenschritte mitzumachen.
 
 const SplitFlap = (() => {
   const CHARSET = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789 :+-.äöüÄÖÜß';
@@ -13,20 +20,36 @@ const SplitFlap = (() => {
   }
 
   function render(el, text) {
+    let srText = el.querySelector(':scope > .flap-cell__sr');
+    if (!srText) {
+      srText = document.createElement('span');
+      srText.className = 'flap-cell__sr sr-only';
+      el.appendChild(srText);
+    }
+    srText.textContent = text;
+
+    let visual = el.querySelector(':scope > .flap-cell__visual');
+    if (!visual) {
+      visual = document.createElement('span');
+      visual.className = 'flap-cell__visual';
+      visual.setAttribute('aria-hidden', 'true');
+      el.appendChild(visual);
+    }
+
     const chars = text.split('');
-    const existing = el.querySelectorAll('.flap-char');
+    const existing = visual.querySelectorAll('.flap-char');
 
     if (existing.length !== chars.length) {
-      el.innerHTML = '';
+      visual.innerHTML = '';
       chars.forEach(() => {
         const span = document.createElement('span');
         span.className = 'flap-char';
         span.textContent = ' ';
-        el.appendChild(span);
+        visual.appendChild(span);
       });
     }
 
-    const spans = el.querySelectorAll('.flap-char');
+    const spans = visual.querySelectorAll('.flap-char');
 
     chars.forEach((targetChar, i) => {
       const span = spans[i];
@@ -50,4 +73,4 @@ const SplitFlap = (() => {
   }
 
   return { render };
-})();
+})();