testimonials 0.1.2 → 0.1.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 309373c0011231499172ab20a6b84e8d399e396500bab2a084574868176592ab
-  data.tar.gz: 838980f3fab1d43dace344a2a37d82a25c87d670a16d16b8e2303516c5735c91
+  metadata.gz: 64ae77e28152ded7574c56692bb5331588c89971c29822e6ef01d654667098bb
+  data.tar.gz: 74a32a67c21d0e26005d2caba5ea4fce687219b90ec9a0cd6d04f7d932ad6e25
 SHA512:
-  metadata.gz: 239c0d79748f8424c2e2fe063fcd541430e06fce52a7ae7b9bc18b35141c71889278c89a1fa9a602b3ae8a22675985d7fd12cc7dbb417e8aa1b5e3625046b27d
-  data.tar.gz: c407a4d0f78f5690aa8b1694236023869211a526e07cc1221949b6994fe73d09058b194739e654f8ecfe0b04a5d1541455dd5d203b6ecb40c4adc3f61360ce68
+  metadata.gz: 23c1e3c61c49b77b5d39dd07b35479ffcf6b815a7d58c55de60a87a23e043c4871fc959ee888c130395dd82af4cb92793c8d1932ba5071026e5f9f13e693fbd0
+  data.tar.gz: 05f4489279978023649bcdf01c1a7421752a28221a73c22658442b83aae90ad584d50f04c034c41f0e1b816ff18ef694dd4009297403accaa9c0ab3b119a75c0

data/CHANGELOG.md

@@ -1,5 +1,22 @@
 # 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
+  `#t=0.1` poster-frame fragment made Firefox seek a MediaRecorder webm that
+  has no seek index, stalling the stream. The fragment is gone (widget and
+  dashboard); `preload="metadata"` still paints the first frame in Chrome
+  and Firefox.
+
 ## 0.1.2
 
 - The widget dialog goes full-screen on mobile (no bottom sheet, no animations):

data/app/views/testimonials/testimonials/show.html.erb

@@ -17,9 +17,11 @@
 
 <div class="card pad" style="margin-bottom: 16px;">
   <% if @testimonial.video_attached? %>
-    <%# #t=0.1 makes the browser paint that frame as the thumbnail. %>
+    <%# No #t=0.1 fragment: MediaRecorder webm has no seek index, and
+        Firefox honors media fragments literally — the pending seek stalls
+        playback right after play. preload="metadata" paints the frame. %>
     <video class="playback" controls preload="metadata"
-           src="<%= testimonial_video_path(@testimonial) %>#t=0.1"></video>
+           src="<%= testimonial_video_path(@testimonial) %>"></video>
     <p class="muted">
       <%= link_to "⬇ #{t('testimonials.dashboard.download_video', default: 'Download video')}",
                   testimonial_video_path(@testimonial, download: 1) %>

data/lib/testimonials/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Testimonials
-  VERSION = '0.1.2'
+  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);
 
@@ -390,7 +409,13 @@
       playback.controls = true;
       playback.playsInline = true;
       playback.preload = "metadata";
-      playback.src = state.existingVideoUrl + "#t=0.1";
+      // No #t=0.1 fragment here either (see the review-stage comment):
+      // MediaRecorder webm has no seek index, and Firefox honors the
+      // fragment literally — the pending seek stalls playback a moment
+      // after play. preload="metadata" already paints the first frame in
+      // Chrome and Firefox; iOS shows the controls on a blank frame, which
+      // beats a player that pauses itself.
+      playback.src = state.existingVideoUrl;
       wrap.appendChild(playback);
       wrap.appendChild(attachedVideoChip(form, wrap, playback, function () {
         state.removeExistingVideo = true;
@@ -464,6 +489,7 @@
     stage.appendChild(hint);
 
     var error = el("p", "tml-error");
+    error.setAttribute("role", "alert");
     error.hidden = true;
     stage.appendChild(error);
 
@@ -634,6 +660,7 @@
     stage.appendChild(playback);
 
     var error = el("p", "tml-error");
+    error.setAttribute("role", "alert");
     error.hidden = true;
     stage.appendChild(error);
 
@@ -741,6 +768,7 @@
     }
 
     var error = el("p", "tml-error");
+    error.setAttribute("role", "alert");
     error.hidden = true;
     form.appendChild(error);
 
@@ -946,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.2
+  version: 0.1.4
 platform: ruby
 authors:
 - Yaroslav Shmarov