livechat 0.3.1 → 0.3.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 88beaba89d92d510674dde9c207d9ce3cbe0252859c3deaff9663ee9e9d9cbb6
-  data.tar.gz: d84b3d047e0506b0c37331256364257b4cadbd6c8f44bd6ba89c837e062c7786
+  metadata.gz: 3263710888d695851123f5afeffc0dd73985901e0ad559f5d04562a59c411537
+  data.tar.gz: 9db6f6b5df671b05b594dd174180cc54c2988695aac907ab3f7f3e38c32df732
 SHA512:
-  metadata.gz: 8d06ded8fdcd4e2e649ddece6b6ffeba9261b248482f0fbc4ad50b64bb93bbda2fb93cef4849117e4b0efe1fc6f4f85fd86305f42161c88693dfe6ddf6f41896
-  data.tar.gz: f180c508a50a94ef83086b6433b68945237660d713bb1273e71a75cab4a4b89f9a0fc643ab94b5490f7ed5277e969fd3d940806230d505a38d3214cbc5ac96ae
+  metadata.gz: c5ae2806f1b7f1c8d08b14bc61043c8fe23159873c260a75c3ed6a5b263bc2ada95630af19a323a64c3de774d107e17aef8094454535460bba76cb10c91d5846
+  data.tar.gz: cda4c08755760e0a1a1996be4aa5165e8d7ddf10ca86cd0362905b0d02c5ee1dd8e73f3a2f8dcec3cbb9b3b68a23418d3898f9bca48146365799544ca029d332

data/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 0.3.3
+
+- Accessibility: on phones (where the panel is a full-screen modal) focus is
+  trapped inside it and page scroll is locked behind it; closing restores
+  focus to whatever opened the chat. Errors and the email-saved note are now
+  announced to screen readers. The desktop popover deliberately stays
+  non-modal — you can read the page while chatting.
+
+## 0.3.2
+
+- The chat panel is full-screen on phones (≤480px) — a conversation is an
+  app screen, not a floating card. Inputs are 16px on mobile so iOS Safari
+  never zoom-jumps on focus; the composer respects the home-indicator safe
+  area; thread scrolling no longer rubber-bands the page behind it.
+
 ## 0.3.1
 
 - The Agents column shows initials avatars (deterministic colors, full name

data/lib/livechat/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Livechat
-  VERSION = '0.3.1'
+  VERSION = '0.3.3'
 end

data/lib/livechat/widget.js

@@ -33,6 +33,11 @@
   var emailRowEl = null;
   var errorEl = null;
   var isOpen = false;
+  var lastFocused = null;
+  // On phones the panel is a full-screen modal (focus trapped, page scroll
+  // locked); on desktop it stays a non-modal popover you can chat alongside.
+  var mobileModal = window.matchMedia ? window.matchMedia("(max-width: 480px)") : null;
+  var savedOverflow = null;
   // The id of the newest message actually RENDERED into the list — never
   // advanced by background polls, so reopening the panel refetches exactly
   // the messages it hasn't shown yet.
@@ -112,6 +117,9 @@
     isOpen = false;
     lastRenderedId = 0;
     lastAuthorKey = null;
+    // A Turbo body swap removes the panel without closePanel() running; the
+    // documentElement (and any scroll lock on it) survives the swap.
+    unlockScroll();
 
     root = document.createElement("div");
     root.id = "lvc-root";
@@ -173,6 +181,7 @@
     panel.id = "lvc-panel";
     panel.setAttribute("role", "dialog");
     panel.setAttribute("aria-label", config.appName);
+    panel.addEventListener("keydown", trapFocus);
 
     var header = document.createElement("div");
     header.id = "lvc-header";
@@ -206,6 +215,9 @@
 
     errorEl = document.createElement("div");
     errorEl.id = "lvc-error";
+    // The alert region exists before any text lands in it, so screen
+    // readers announce the message instead of a silent visual update.
+    errorEl.setAttribute("role", "alert");
     errorEl.hidden = true;
     panel.appendChild(errorEl);
 
@@ -252,6 +264,7 @@
   function buildEmailRow() {
     var row = document.createElement("form");
     row.id = "lvc-email";
+    row.setAttribute("aria-live", "polite"); // "we'll also reply by email" is a status
     row.hidden = true;
 
     var label = document.createElement("span");
@@ -297,6 +310,7 @@
     mount();
     if (!isOpen) {
       isOpen = true;
+      lastFocused = document.activeElement;
       sessionSet("livechat_open", "1");
 
       // The panel is built once and then hidden/shown — closing must never
@@ -307,6 +321,8 @@
         root.appendChild(panel);
       }
       panel.hidden = false;
+      panel.setAttribute("aria-modal", isMobileModal() ? "true" : "false");
+      if (isMobileModal()) lockScroll();
       setUnread(0);
       poll();
       schedulePoll();
@@ -325,9 +341,45 @@
     sessionSet("livechat_open", "");
     var panel = document.getElementById("lvc-panel");
     if (panel) panel.hidden = true;
+    unlockScroll();
+    if (lastFocused && document.contains(lastFocused)) lastFocused.focus();
     schedulePoll();
   }
 
+  function isMobileModal() {
+    return !!(mobileModal && mobileModal.matches);
+  }
+
+  // Tab cycles inside the panel only while it is the full-screen mobile
+  // modal; the desktop popover deliberately lets focus reach the page.
+  function trapFocus(event) {
+    if (event.key !== "Tab" || !isMobileModal()) return;
+    var panel = document.getElementById("lvc-panel");
+    var focusable = panel.querySelectorAll("button, [href], input, textarea, select");
+    if (!focusable.length) return;
+    var first = focusable[0];
+    var last = focusable[focusable.length - 1];
+    if (event.shiftKey && document.activeElement === first) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && document.activeElement === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  }
+
+  function lockScroll() {
+    if (savedOverflow !== null) return;
+    savedOverflow = document.documentElement.style.overflow;
+    document.documentElement.style.overflow = "hidden";
+  }
+
+  function unlockScroll() {
+    if (savedOverflow === null) return;
+    document.documentElement.style.overflow = savedOverflow;
+    savedOverflow = null;
+  }
+
   // --- polling ----------------------------------------------------------------
 
   function schedulePoll() {
@@ -548,8 +600,6 @@
       "#lvc-panel[hidden]{display:none}" +
       "#lvc-root[dir=rtl] #lvc-panel{right:auto;left:20px}" +
       "#lvc-root.lvc-no-launcher #lvc-panel{bottom:20px;max-height:calc(100dvh - 40px)}" +
-      "@media(max-width:480px){#lvc-panel{right:12px;bottom:80px}" +
-      "#lvc-root.lvc-no-launcher #lvc-panel{right:12px;bottom:12px;max-height:calc(100dvh - 24px)}}" +
       "#lvc-header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;" +
       "padding:14px 16px;background:var(--lvc-accent);color:var(--lvc-accent-text)}" +
       "#lvc-header strong{display:block;font-size:15px}" +
@@ -557,8 +607,8 @@
       "#lvc-close{border:none;background:none;color:var(--lvc-accent-text);font-size:22px;" +
       "line-height:1;cursor:pointer;padding:2px 6px;border-radius:6px}" +
       "#lvc-close:hover{background:rgba(255,255,255,.15)}" +
-      "#lvc-list{flex:1;overflow-y:auto;padding:14px;background:var(--lvc-bg);display:flex;" +
-      "flex-direction:column;gap:4px}" +
+      "#lvc-list{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:14px;" +
+      "background:var(--lvc-bg);display:flex;flex-direction:column;gap:4px}" +
       // Class rules carry the #lvc-root prefix so they outrank the
       // id-level `#lvc-root *` reset above.
       "#lvc-root .lvc-greeting{color:var(--lvc-muted);font-size:13px;margin-bottom:8px}" +
@@ -594,6 +644,18 @@
       "display:flex;align-items:center;justify-content:center;cursor:pointer}" +
       "#lvc-form button:disabled{opacity:.6;cursor:default}" +
       "#lvc-root[dir=rtl] #lvc-form button svg{transform:scaleX(-1)}" +
+      // Phones get the whole screen — a chat is an app screen, not a popup.
+      // Selectors repeat the id twice so they outrank the rtl/no-launcher
+      // desktop rules regardless of source order.
+      "@media(max-width:480px){" +
+      "#lvc-root #lvc-panel,#lvc-root[dir=rtl] #lvc-panel,#lvc-root.lvc-no-launcher #lvc-panel" +
+      "{left:0;right:0;top:0;bottom:0;width:100%;max-width:100%;height:100dvh;max-height:100dvh;" +
+      "border-radius:0;border:none}" +
+      // 16px stops iOS Safari from zoom-jumping into focused fields.
+      "#lvc-root #lvc-form textarea,#lvc-root #lvc-email input{font-size:16px}" +
+      // Keep the composer above the iPhone home indicator.
+      "#lvc-root #lvc-form{padding-bottom:calc(10px + env(safe-area-inset-bottom))}" +
+      "}" +
       // Lives in host DOM (on data-livechat-open elements), so no #lvc-root prefix.
       ".lvc-opener-badge{display:inline-flex;min-width:18px;height:18px;padding:0 5px;" +
       "margin-inline-start:6px;border-radius:999px;background:#dc2626;color:#fff;" +

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: livechat
 version: !ruby/object:Gem::Version
-  version: 0.3.1
+  version: 0.3.3
 platform: ruby
 authors:
 - Yaroslav Shmarov