testimonials 0.1.3 → 0.1.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ca7fa3a534c13036edc28e6206c06b5e4ef82949cafaeee614a2d196509c2176
-  data.tar.gz: 140a7b0783d3284076def56a598a0c70bb72f1208b2a6158b62c09d634eeaeb2
+  metadata.gz: 64ae77e28152ded7574c56692bb5331588c89971c29822e6ef01d654667098bb
+  data.tar.gz: 74a32a67c21d0e26005d2caba5ea4fce687219b90ec9a0cd6d04f7d932ad6e25
 SHA512:
-  metadata.gz: 6eebe2d3c06afff74b999f4a8a29120a97d3a2e78eeb0ff1429df26bf14a9303c66861665489fdb10104c9f7557bca3ad140f466ddb4a4b2a2116d465c3bc302
-  data.tar.gz: 343195af39cd476f4a74728ab5e11997efa834806c7213aa3ab3b61bba933a6f2d89ccb6d255a9463b9089f9a4ebba5af078ff968db4b2adfff1fe1c6ad97cb3
+  metadata.gz: 23c1e3c61c49b77b5d39dd07b35479ffcf6b815a7d58c55de60a87a23e043c4871fc959ee888c130395dd82af4cb92793c8d1932ba5071026e5f9f13e693fbd0
+  data.tar.gz: 05f4489279978023649bcdf01c1a7421752a28221a73c22658442b83aae90ad584d50f04c034c41f0e1b816ff18ef694dd4009297403accaa9c0ab3b119a75c0

data/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 0.1.4
+
+- Validation and submit errors are announced to screen readers: every
+  `.tml-error` container is a `role="alert"` region from creation, and text
+  is inserted only after the region is exposed.
+- Page scroll is locked behind the open widget dialog and restored on close;
+  a Turbo body swap that removes the overlay releases the lock too. The
+  inline collection-page form is unaffected.
+
 ## 0.1.3
 
 - Video playback no longer pauses itself moments after play in Firefox: the

data/lib/testimonials/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Testimonials
-  VERSION = '0.1.3'
+  VERSION = '0.1.4'
 end

data/lib/testimonials/widget.js

@@ -29,6 +29,7 @@
   var Z = 2147482000;
   var overlay = null;
   var lastFocused = null;
+  var savedOverflow = null; // documentElement overflow to restore when the modal closes
   var state = null; // one open session: { kind, auto, stage, rating, videoBlob, ... }
   var media = { stream: null, recorder: null, chunks: [], timer: null };
 
@@ -67,6 +68,10 @@
     config = readConfig() || config;
     injectStyles();
 
+    // A Turbo body swap can remove the overlay without close() running; the
+    // lock lives on documentElement, which survives the swap, so release it.
+    if (!document.getElementById("tml-overlay")) unlockScroll();
+
     if (config.mode === "page") {
       renderInline();
       return;
@@ -147,6 +152,7 @@
 
     overlay.appendChild(dialog);
     document.body.appendChild(overlay);
+    lockScroll();
     overlay.addEventListener("keydown", trapFocus);
 
     if (auto) postEvent(kind, "shown");
@@ -161,9 +167,21 @@
     overlay.remove();
     overlay = null;
     state = null;
+    unlockScroll();
     if (lastFocused && lastFocused.focus) lastFocused.focus();
   }
 
+  function lockScroll() {
+    if (savedOverflow === null) savedOverflow = document.documentElement.style.overflow;
+    document.documentElement.style.overflow = "hidden";
+  }
+
+  function unlockScroll() {
+    if (savedOverflow === null) return;
+    document.documentElement.style.overflow = savedOverflow;
+    savedOverflow = null;
+  }
+
   function dialogEl() {
     return overlay ? overlay.querySelector("#tml-dialog") : document.querySelector("[data-testimonials-inline] .tml-inline");
   }
@@ -301,6 +319,7 @@
     form.appendChild(consentField());
 
     var error = el("p", "tml-error");
+    error.setAttribute("role", "alert");
     error.hidden = true;
     form.appendChild(error);
 
@@ -470,6 +489,7 @@
     stage.appendChild(hint);
 
     var error = el("p", "tml-error");
+    error.setAttribute("role", "alert");
     error.hidden = true;
     stage.appendChild(error);
 
@@ -640,6 +660,7 @@
     stage.appendChild(playback);
 
     var error = el("p", "tml-error");
+    error.setAttribute("role", "alert");
     error.hidden = true;
     stage.appendChild(error);
 
@@ -747,6 +768,7 @@
     }
 
     var error = el("p", "tml-error");
+    error.setAttribute("role", "alert");
     error.hidden = true;
     form.appendChild(error);
 
@@ -952,8 +974,10 @@
   function showError(form, text) {
     var error = form.querySelector(".tml-error");
     if (!error) return;
-    error.textContent = text;
+    // Unhide first: text landing in an already-exposed alert region is
+    // reliably announced; revealing role+text together sometimes isn't.
     error.hidden = false;
+    error.textContent = text;
   }
 
   // --- styles -------------------------------------------------------------------

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: testimonials
 version: !ruby/object:Gem::Version
-  version: 0.1.3
+  version: 0.1.4
 platform: ruby
 authors:
 - Yaroslav Shmarov