livechat 0.3.2 → 0.3.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5c30e19e783526543e297b77114a6e1d823799c22aca38a2048fc4bb476feb3f
-  data.tar.gz: 6746d78ed02867bd663d2d34c636f68530cc3b818678c1b4b5cd79cb70781eb6
+  metadata.gz: aa83a99e1d1ebe0259347b286862ec7cf7cfffbfe47ea4a624baff36b3ca066e
+  data.tar.gz: 0d017808858c6dfbce423e283b061476a74b3075b42bb70c3f10c54fb74b5622
 SHA512:
-  metadata.gz: 651eedbae0aabd2570b1690cb3f06e961abadbe3922670ed254b4c108f2553341e6a27e43e35b565c61004dd7ee6df751b38d62b6bd996aa1c97f50f377b71ef
-  data.tar.gz: ec6e305609121daf2182095c44bc2bccc098bee0a6d199ba54c46d3b8665c8de4c749eb6adfa34c5884992318701d157a8146a7155c7d9039a782456b7afd446
+  metadata.gz: 97dc8a43bfb5ab7fecd0dabdfaf5f126e3346b97e73f56aa96129331046e74355bbc201a7fc0ab010c1ef0e48a73d15ec7aaadac0dd185c4310480271486984c
+  data.tar.gz: e1469a54e206b39b539d6dacc767568caad7a44da3540d5ff3b746fb0affb74e83224f3ca9f0ea87163f2796656d66b274aaa58332e1cd40ddfda9b441b1028d

data/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 0.3.4
+
+- Docs: show how to wire `current_user` with Rails 8's built-in authentication
+  (`bin/rails generate authentication`), alongside the existing Devise/Warden
+  example — in the README and the generated initializer.
+
+## 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/README.md

@@ -91,6 +91,20 @@ Livechat.configure do |config|
 end
 ```
 
+`current_user` (and any admin gate) receives the raw request, so it works
+with whatever auth you have:
+
+```ruby
+# Devise / Warden:
+config.current_user = ->(request) { request.env["warden"]&.user }
+
+# Rails 8 built-in auth (bin/rails generate authentication):
+config.current_user = lambda do |request|
+  token = request.cookies["session_token"]
+  Session.find_signed(token)&.user if token
+end
+```
+
 ### Brand color
 
 ```ruby

data/lib/generators/livechat/install/templates/initializer.rb

@@ -16,7 +16,15 @@ Livechat.configure do |config|
   # Resolve the current user (optional). Return an object responding to #id,
   # or nil. Signed-in visitors keep one conversation across devices; guests
   # are tracked with a cookie. The same user is the agent when replying.
+  #
+  # Devise / Warden:
   # config.current_user = ->(request) { request.env["warden"]&.user }
+  #
+  # Rails 8 built-in auth (bin/rails generate authentication):
+  # config.current_user = lambda do |request|
+  #   token = request.cookies["session_token"]
+  #   Session.find_signed(token)&.user if token
+  # end
 
   # How visitors appear in the inbox.
   # config.visitor_label = ->(user) { user.name.presence || user.email }

data/lib/livechat/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Livechat
-  VERSION = '0.3.2'
+  VERSION = '0.3.4'
 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.4
 platform: ruby
 authors:
 - Yaroslav Shmarov