livechat 0.3.2 → 0.3.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5c30e19e783526543e297b77114a6e1d823799c22aca38a2048fc4bb476feb3f
-  data.tar.gz: 6746d78ed02867bd663d2d34c636f68530cc3b818678c1b4b5cd79cb70781eb6
+  metadata.gz: 3263710888d695851123f5afeffc0dd73985901e0ad559f5d04562a59c411537
+  data.tar.gz: 9db6f6b5df671b05b594dd174180cc54c2988695aac907ab3f7f3e38c32df732
 SHA512:
-  metadata.gz: 651eedbae0aabd2570b1690cb3f06e961abadbe3922670ed254b4c108f2553341e6a27e43e35b565c61004dd7ee6df751b38d62b6bd996aa1c97f50f377b71ef
-  data.tar.gz: ec6e305609121daf2182095c44bc2bccc098bee0a6d199ba54c46d3b8665c8de4c749eb6adfa34c5884992318701d157a8146a7155c7d9039a782456b7afd446
+  metadata.gz: c5ae2806f1b7f1c8d08b14bc61043c8fe23159873c260a75c3ed6a5b263bc2ada95630af19a323a64c3de774d107e17aef8094454535460bba76cb10c91d5846
+  data.tar.gz: cda4c08755760e0a1a1996be4aa5165e8d7ddf10ca86cd0362905b0d02c5ee1dd8e73f3a2f8dcec3cbb9b3b68a23418d3898f9bca48146365799544ca029d332

data/CHANGELOG.md

@@ -1,5 +1,13 @@
 # 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

data/lib/livechat/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Livechat
-  VERSION = '0.3.2'
+  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() {

metadata

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