studio-engine 0.62.3 → 0.62.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 158600e252830f127db7e080529137d7082fa9b403c45f3a9f2231ab57c6c65f
-  data.tar.gz: 3f52e2bc6cc7c0cf6fdced63b9eac292bfd52c798548d20a8ba099cb641f3759
+  metadata.gz: 629e819d3b8b6a9c92140a69829e75a3d6d6c3c8e9ff4faeede098ffe7394a1e
+  data.tar.gz: 562d9d5caffa68f7c282cc91cb91369fe132a8e90c63257b97f43bf4d328669b
 SHA512:
-  metadata.gz: fb1378d6c1aa7515925277eb359664daf6bb15d16f5fcec271dd5381dfe86a10bd85ac9224a2df2b0a57bdff1973d976ba204ae4596c156335102600cb7e867a
-  data.tar.gz: 7c9c62ab705a93b178bf32a14bcd9392ea9c97cc7877f8d5defa1a49ced902e9dab8944744250601e15d062ffca2119305cc058958f25784c7802623d06cbcc6
+  metadata.gz: 3bc2df617a2f90f9c46efde0d73f7f39f7b2f063147971303d004b080c80af4710cb4cce605cbb7a608e87c37bcdd58dceaa4a2d0088c791b9024625c3da1fb3
+  data.tar.gz: 5a69fabcce40e7e93c5b8d0a3b88431a74d4047e100854393be1fb5ead4b4bacb0229b7182953e148655fe64a1faa60eacbb6aca426531fb20e34bff30116686

data/app/views/studio/modals/_host.html.erb

@@ -206,6 +206,15 @@
       return table[key] || table.pop || animDefaults[channel].pop;
     }
 
+    // Where focus returns when the last modal closes. A module-level closure, NOT a
+    // store property — see captureFocus below for why a DOM node must never live on
+    // a reactive store.
+    var _returnFocusTo = null;
+    // The backdrop node, kept in the SAME closure and for the same reason: a DOM
+    // node on a reactive store reads back as a proxy and every identity check
+    // against it is false forever. refocus() needs this node after a swap.
+    var _backdropEl = null;
+
     // === Alpine.store('modals') — the stack ============================
     //
     // Idempotent registration (return early if already registered) so
@@ -238,10 +247,127 @@
         // SWAP_IN_MS must match the modal-card-swap-in animation duration in
         // the inline style block above; we clear the flag after that so a
         // fresh open() doesn't re-trigger the slide.
+        // === focus management ==============================================
+        //
+        // THE RETURN TARGET LIVES IN A CLOSURE, NOT ON THE STORE. Alpine.store()
+        // wraps its object in a reactive Proxy, so a DOM node assigned to a store
+        // property reads back as a PROXY of that node. Calling .focus() through the
+        // proxy happens to work, but any identity check against it (=== , contains(),
+        // Set membership) is false forever — the exact defect that made the wallet
+        // watcher discard every account-change event it ever received. Focus code is
+        // full of identity checks, so the node is kept out of the reactive object
+        // entirely.
+        captureFocus: function(el) {
+          _returnFocusTo = document.activeElement;
+          _backdropEl = el;
+          // Focus the backdrop itself rather than the first control: landing on a
+          // button means a stray Enter fires it, and a destructive card should not
+          // be one keystroke from confirming.
+          if (el && el.focus) el.focus();
+        },
+
+        // RE-FOCUS THE BACKDROP AFTER THE TOP ENTRY CHANGES, without re-capturing
+        // the return target.
+        //
+        // THE DEFECT THIS CLOSES. captureFocus runs from x-init on the backdrop,
+        // and that backdrop lives inside <template x-if="current()">. swap() is
+        // open(id, props, { replace: true }) and advance() only patches props, so
+        // current() stays truthy and the OUTER template never re-mounts —
+        // captureFocus never runs again. The INNER content template DOES re-mount
+        // and unmounts whatever was focused; document.activeElement falls back to
+        // the document body, which is not a descendant of the backdrop, so the handler
+        // bound there stops seeing the key and native tabbing resumes. Measured
+        // in a browser: open -> swap -> Shift+Tab x3 walked out to the page behind.
+        //
+        // _returnFocusTo IS DELIBERATELY NOT TOUCHED. Re-capturing here would
+        // overwrite the opener with a node inside the dialog, so closing would
+        // return focus into a card that no longer exists.
+        //
+        // Deferred a tick: the re-mount that unfocuses the old node happens during
+        // Alpine's update, so focusing before it lands would be undone immediately.
+        refocus: function() {
+          var run = function() {
+            if (_backdropEl && _backdropEl.focus && document.contains(_backdropEl)) {
+              _backdropEl.focus();
+            }
+          };
+          if (window.Alpine && window.Alpine.nextTick) window.Alpine.nextTick(run);
+          else setTimeout(run, 0);
+        },
+
+        releaseFocus: function() {
+          var target = _returnFocusTo;
+          _returnFocusTo = null;
+          _backdropEl = null;
+          // Only restore if the element is still in the document — a Turbo visit can
+          // replace the page under an open modal, and focusing a detached node
+          // silently moves focus to the document body, which is worse than leaving it alone.
+          if (target && target.focus && document.contains(target)) target.focus();
+        },
+
+        // Every tabbable node inside the dialog, in document order. Deliberately
+        // recomputed per keypress: modal content is Alpine-rendered and a card can
+        // add or remove controls (a spinner replacing a button) while open, so a
+        // list captured at mount goes stale.
+        focusables: function(el) {
+          if (!el) return [];
+          var sel = 'a[href], button:not([disabled]), input:not([disabled]), ' +
+                    'select:not([disabled]), textarea:not([disabled]), [tabindex]';
+          return Array.prototype.slice.call(el.querySelectorAll(sel)).filter(function(n) {
+            return n.tabIndex >= 0 && n.offsetParent !== null;
+          });
+        },
+
+        // Tab is intercepted (.prevent on the binding) and re-dispatched here.
+        //
+        // THAT ONLY HOLDS WHILE FOCUS IS INSIDE THE BACKDROP, which is a real
+        // condition and not a formality. The binding lives ON the backdrop, so it
+        // sees the key only when activeElement is a descendant. If a re-mount
+        // drops focus to the document body — which is what a swap() or advance()
+        // does to the inner content template — this handler never fires, .prevent
+        // never runs, and native tabbing resumes straight out of the dialog. That
+        // is why refocus() exists and why both phase-2 seams call it. An earlier
+        // version of this comment claimed focus could never leave while open; it
+        // could, and it did.
+        cycleFocus: function(el, event) {
+          var items = this.focusables(el);
+          if (items.length === 0) { if (el && el.focus) el.focus(); return; }
+
+          var idx = items.indexOf(document.activeElement);
+          var next;
+          if (event && event.shiftKey) {
+            next = idx <= 0 ? items[items.length - 1] : items[idx - 1];
+          } else {
+            next = (idx === -1 || idx === items.length - 1) ? items[0] : items[idx + 1];
+          }
+          next.focus();
+        },
+
+        // A dialog with no accessible name announces as just "dialog". Props first
+        // so a card can name itself; the id is the honest fallback.
+        dialogLabel: function() {
+          var entry = this.current();
+          if (!entry) return 'Dialog';
+          var p = entry.props || {};
+          // TRIMMED, not merely truthy. `title: '   '` is a truthy string, so it used to
+          // pass straight through — and the accessible-name computation then trims it to
+          // empty and announces a bare "dialog", the exact outcome this fallback chain
+          // exists to prevent. An empty string already fell through (it is falsy); a
+          // whitespace-only one did not, which is the more likely typo of the two.
+          var named = function(v) {
+            return (typeof v === 'string' && v.trim() !== '') ? v : null;
+          };
+          return named(p.ariaLabel) || named(p.title) || String(entry.id).replace(/[-_]/g, ' ');
+        },
+
         open: function(id, props, opts) {
           props = props || {};
           opts  = opts  || {};
           var self = this;
+          // Set by any branch that re-mounts the INNER content template without
+          // re-mounting the OUTER one — see the push branch below. The replace
+          // branch returns early and calls refocus() from its own phase 2.
+          var remounted = false;
 
           if (opts.replace && this.stack.length > 0) {
             var current = this.current();
@@ -271,6 +397,9 @@
                 var newEntry = { id: id, props: props, _swappingIn: true, _swapDir: dir };
                 self.stack[idx] = newEntry;
                 self._sync();
+                // The content template just re-mounted; put focus back on the
+                // backdrop or the trap releases. See refocus().
+                self.refocus();
                 // Phase 3: clear the swap-in flag + direction after the
                 // slide finishes so a future close() runs the unmount
                 // keyframe cleanly. _settled latches so the host's
@@ -287,10 +416,25 @@
             }
             // Already mid-close — just hot-swap so we don't double up timers.
             this.stack[this.stack.length - 1] = { id: id, props: props };
+            remounted = true;
           } else {
+            // A push onto a NON-EMPTY stack is the third re-mount seam, and the one
+            // the trap missed longest. current() stays truthy, so the OUTER template
+            // never re-mounts and x-init never re-runs captureFocus — while the INNER
+            // content template DOES re-mount and unmounts whatever was focused.
+            // Focus lands on the document body, which is not a descendant of the backdrop, so the
+            // @keydown.tab handler bound there stops firing and native tabbing resumes.
+            // MEASURED on /lab/birthday_gate: open a card, Tab once, push a second
+            // card, then Shift+Tab three times and you walk onto three BACKGROUND-PAGE
+            // buttons behind a still-open dialog.
+            //
+            // Only the FIRST push is safe: current() goes falsy -> truthy, the outer
+            // template mounts, and x-init captures for us.
+            remounted = this.stack.length > 0;
             this.stack.push({ id: id, props: props });
           }
           this._sync();
+          if (remounted) this.refocus();
         },
         // Sugar — `swap('foo', props)` ≡ `open('foo', props, { replace: true })`.
         // Pass opts through so callers can request a back-direction slide
@@ -340,6 +484,9 @@
             if (propsPatch) Object.assign(cur.props, propsPatch);
             cur._swappingOut = false;
             cur._swappingIn = true;
+            // Same re-mount, same release. advance() patches props in place, so
+            // the outer template never re-runs x-init either.
+            self.refocus();
             setTimeout(function() {
               cur._swappingIn = false;
               cur._swapDir = null;
@@ -367,9 +514,24 @@
               self.stack.splice(idx, 1);
               self._sync();
             }
+            // Hand focus back only when the LAST modal leaves. A stacked flow
+            // (open → swap → close) unmounts one dialog and mounts the next, and
+            // restoring to the background page in between would yank focus out of
+            // a flow the user is still inside.
+            //
+            // BUT NOT RESTORING IS NOT THE SAME AS DOING NOTHING. Closing down to an
+            // underlying modal re-mounts the inner template, so focus falls to the document body
+            // with the dialog still open — the trap is off while the user is still
+            // inside it. releaseFocus() was correctly gated on an empty stack; the
+            // missing half was the else. MEASURED on both hosts.
+            if (self.stack.length === 0) self.releaseFocus();
+            else self.refocus();
           }, modalAnim('exit', entry.props && entry.props.exitAnim).ms);
         },
         closeAll: function() {
+          // Turbo/bfcache teardown: the page is going away, so drop the return
+          // target rather than restoring into a document about to be replaced.
+          _returnFocusTo = null;
           // No animation — used by Turbo before-cache + bfcache cleanup
           // where the user is navigating away and we just need the DOM
           // clean immediately.
@@ -389,6 +551,15 @@
             return modal.props && modal.props.dismissible === false;
           });
           this._sync();
+          // Same re-mount, same release: a surviving non-dismissible card is still on
+          // screen, and the cards dropped from under it took focus with them. MEASURED:
+          // activeElement the document body behind a still-open non-dismissible dialog.
+          //
+          // Nothing is done when the stack empties. That is deliberate and different
+          // from close(): this runs on the Turbo/bfcache teardown path, where the page
+          // is going away and closeAll() already declines to restore into a document
+          // about to be replaced.
+          if (this.stack.length > 0) this.refocus();
         },
         // isOpen(id) — is a card with this id ON THE STACK, in any
         // lifecycle state? A card mid-close still counts: close() flips
@@ -532,11 +703,24 @@
       dismissible: false on its props (e.g. processing an on-chain tx
       where an accidental click would orphan a signed but un-confirmed
       transaction). Defaults to dismissible. %>
+  <%# FOCUS AND NAME. Measured on a real page before this: document.activeElement
+      after opening a modal was still the BACKGROUND page's textarea, so a keyboard
+      user sat focused behind an overlay. On the non-dismissible cards that is a
+      genuine trap — escape and click-outside are deliberately gated off there, so
+      there was no way out at all.
+
+      tabindex="-1" makes the backdrop programmatically focusable without adding it
+      to the tab order. The name comes from props (ariaLabel, else title, else the
+      modal id) so a screen reader never announces a bare unnamed dialog. %>
   <div class="fixed inset-0 z-[120] flex items-center justify-center p-4 modal-backdrop-mount"
        :class="$store.modals.current()?._closing && 'modal-backdrop-unmount'"
        style="background:rgba(0,0,0,0.6)"
        role="dialog"
        aria-modal="true"
+       tabindex="-1"
+       x-init="$store.modals.captureFocus($el)"
+       :aria-label="$store.modals.dialogLabel()"
+       @keydown.tab.prevent="$store.modals.cycleFocus($el, $event)"
        @keydown.escape.window="$store.modals.current() && $store.modals.current().props.dismissible !== false && $store.modals.close()"
        @click.self="$store.modals.current() && $store.modals.current().props.dismissible !== false && $store.modals.close()">
     <%# Card animation is class-driven (cardClasses() in the store) so it
@@ -554,7 +738,13 @@
         slide finishes, which reads as a flash mid-transition. _settled
         stays true for the rest of the entry's lifetime so a stale Alpine
         re-evaluation can't retrigger the bounce. %>
-    <div class="bg-surface rounded-xl border border-subtle shadow-2xl p-6 max-w-sm w-full"
+    <%# max-h + overflow-y so a card taller than the viewport SCROLLS instead of
+        clipping its own actions off-screen. Without it the confirm button on a long
+        card is unreachable at small heights — and on a non-dismissible card that is
+        a dead end, since escape and click-outside are gated off. 100dvh, not 100vh:
+        mobile browsers shrink the visual viewport when the URL bar is showing, and
+        vh ignores that. %>
+    <div class="bg-surface rounded-xl border border-subtle shadow-2xl p-6 max-w-sm w-full max-h-[85dvh] overflow-y-auto"
          :class="$store.modals.cardClasses()">
       <%# Consumer-provided content registrations. Each block typically
           contains a <template x-if="$store.modals.current().id === 'X'">

data/app/views/studio/modals/_scoped_host.html.erb

@@ -83,12 +83,96 @@
     // load; this registration lives in a PAGE BODY, so it was absent during that
     // one init. Without the guard, a Turbo Drive visit to this page leaves the
     // store undefined and every x-data on it throws.
+    var _returnFocusTo = null;
+    // The backdrop node, kept in the same closure and for the same proxy reason.
+    var _backdropEl = null;
+
     function registerScopedStore() {
       if (Alpine.store(STORE_NAME)) return;
 
       Alpine.store(STORE_NAME, {
         stack: [],
 
+        // FOCUS — the same contract as the shared host (studio/modals/_host).
+        // Both hosts render [role=dialog]; a fix in only one of them leaves every
+        // page that brings its own store still trapping keyboard users behind an
+        // overlay, which is the "engine-wide" half of this defect.
+        //
+        // The return target is held in the closure below, NOT on the store: an
+        // Alpine store is a reactive Proxy, so a DOM node assigned to it reads back
+        // as a proxy and every identity check against it (===, contains) is false.
+        captureFocus: function(el) {
+          _returnFocusTo = document.activeElement;
+          _backdropEl = el;
+          if (el && el.focus) el.focus();
+        },
+
+        // RE-FOCUS AFTER A REPLACE, without re-capturing the return target. See
+        // the long note in _host.html.erb: captureFocus runs from x-init on the
+        // backdrop, and a replace keeps current() truthy, so the outer template
+        // never re-mounts and x-init never re-runs. The inner content DOES
+        // re-mount and unmounts the focused control, activeElement falls back to
+        // the document body, and the tab handler bound on the backdrop stops seeing
+        // the key. (Written out rather than as a literal tag: this comment ships
+        // inside the rendered script, and studio/emails asserts the page emits no
+        // body element of its own — a tag in prose trips it.)
+        // _returnFocusTo is untouched on purpose — re-capturing would overwrite
+        // the opener with a node inside the dialog.
+        refocus: function() {
+          var run = function() {
+            if (_backdropEl && _backdropEl.focus && document.contains(_backdropEl)) {
+              _backdropEl.focus();
+            }
+          };
+          if (window.Alpine && window.Alpine.nextTick) window.Alpine.nextTick(run);
+          else setTimeout(run, 0);
+        },
+
+        releaseFocus: function() {
+          var target = _returnFocusTo;
+          _returnFocusTo = null;
+          _backdropEl = null;
+          if (target && target.focus && document.contains(target)) target.focus();
+        },
+
+        focusables: function(el) {
+          if (!el) return [];
+          var sel = 'a[href], button:not([disabled]), input:not([disabled]), ' +
+                    'select:not([disabled]), textarea:not([disabled]), [tabindex]';
+          return Array.prototype.slice.call(el.querySelectorAll(sel)).filter(function(n) {
+            return n.tabIndex >= 0 && n.offsetParent !== null;
+          });
+        },
+
+        cycleFocus: function(el, event) {
+          var items = this.focusables(el);
+          if (items.length === 0) { if (el && el.focus) el.focus(); return; }
+
+          var idx = items.indexOf(document.activeElement);
+          var next;
+          if (event && event.shiftKey) {
+            next = idx <= 0 ? items[items.length - 1] : items[idx - 1];
+          } else {
+            next = (idx === -1 || idx === items.length - 1) ? items[0] : items[idx + 1];
+          }
+          next.focus();
+        },
+
+        dialogLabel: function() {
+          var entry = this.current();
+          if (!entry) return 'Dialog';
+          var p = entry.props || {};
+          // TRIMMED, not merely truthy. `title: '   '` is a truthy string, so it used to
+          // pass straight through — and the accessible-name computation then trims it to
+          // empty and announces a bare "dialog", the exact outcome this fallback chain
+          // exists to prevent. An empty string already fell through (it is falsy); a
+          // whitespace-only one did not, which is the more likely typo of the two.
+          var named = function(v) {
+            return (typeof v === 'string' && v.trim() !== '') ? v : null;
+          };
+          return named(p.ariaLabel) || named(p.title) || String(entry.id).replace(/[-_]/g, ' ');
+        },
+
         // open(id, props, opts) — opts.replace swaps the top entry in place
         // (what submitFormWithProgress does to turn crop-photo into saving).
         open: function(id, props, opts) {
@@ -96,12 +180,26 @@
           opts  = opts  || {};
           var entry = { id: id, props: props };
 
+          // Did this call re-mount the INNER content template without re-mounting the
+          // OUTER one? That is the whole question the focus trap turns on.
+          var remounted = false;
           if (opts.replace && this.stack.length > 0) {
             this.stack.splice(this.stack.length - 1, 1, entry);
+            remounted = true;
           } else {
+            // THE COMMENT THIS REPLACES SAID "only on a REPLACE", on the premise that a
+            // fresh push takes current() falsy -> truthy so the outer template mounts and
+            // x-init captures for us. That is TRUE only when the stack was EMPTY, and
+            // silently false for a stacked push: current() was already truthy, so the
+            // outer template does not re-mount, x-init never re-runs, and the inner
+            // template unmounts whatever was focused. Focus lands on the document body — not a
+            // descendant of the backdrop — so the @keydown.tab handler bound there stops
+            // firing and native tabbing walks straight onto the page behind.
+            remounted = this.stack.length > 0;
             this.stack.push(entry);
           }
           this._sync();
+          if (remounted) this.refocus();
         },
 
         swap: function(id, props, opts) {
@@ -121,10 +219,23 @@
             var index = self.stack.indexOf(entry);
             if (index !== -1) self.stack.splice(index, 1);
             self._sync();
+            // Only when the LAST modal leaves — a stacked flow unmounts one dialog
+            // and mounts the next, and restoring in between yanks focus out of a
+            // flow the user is still inside.
+            //
+            // NOT RESTORING IS NOT THE SAME AS DOING NOTHING. Closing down TO an
+            // underlying modal re-mounts the inner template, so focus falls to the document body
+            // with that dialog still open — the trap is off while the user is still
+            // inside it. The gate was right; the else was missing.
+            if (self.stack.length === 0) self.releaseFocus();
+            else self.refocus();
           }, CLOSE_ANIM_MS);
         },
 
         closeAll: function() {
+          // Teardown path (Turbo/bfcache): drop the target rather than restoring
+          // into a document that is about to be replaced.
+          _returnFocusTo = null;
           this.stack = [];
           this._sync();
         },
@@ -136,6 +247,12 @@
             return entry.props && entry.props.dismissible === false;
           });
           this._sync();
+          // Same re-mount, same release: a surviving non-dismissible card is still on
+          // screen and the cards dropped from under it took focus with them. Nothing is
+          // done when the stack empties — deliberately unlike close(): this is the
+          // Turbo/bfcache teardown path, where closeAll() already declines to restore
+          // into a document about to be replaced.
+          if (this.stack.length > 0) this.refocus();
         },
 
         // isOpen(id) — on the stack in ANY lifecycle state, including a card
@@ -201,9 +318,13 @@
        style="background:rgba(0,0,0,0.6)"
        role="dialog"
        aria-modal="true"
+       tabindex="-1"
+       x-init="$store.<%= scoped_store %>.captureFocus($el)"
+       :aria-label="$store.<%= scoped_store %>.dialogLabel()"
+       @keydown.tab.prevent="$store.<%= scoped_store %>.cycleFocus($el, $event)"
        @keydown.escape.window="$store.<%= scoped_store %>.current() && $store.<%= scoped_store %>.current().props.dismissible !== false && $store.<%= scoped_store %>.close()"
        @click.self="$store.<%= scoped_store %>.current() && $store.<%= scoped_store %>.current().props.dismissible !== false && $store.<%= scoped_store %>.close()">
-    <div class="<%= card_class %>" :class="$store.<%= scoped_store %>.cardClasses()">
+    <div class="<%= card_class %> max-h-[85dvh] overflow-y-auto" :class="$store.<%= scoped_store %>.cardClasses()">
       <%# Consumer-provided registrations — one <template x-if> per modal id. %>
       <%= yield if block_given? %>
     </div>

data/app/views/studio/modals/blocks/_success_card.html.erb

@@ -78,6 +78,7 @@
     _remaining: #{redirect_secs},
     _total: #{redirect_secs},
     _redirectTimer: null,
+    _confettiTimer: null,
     startCountdown(url) {
       if (!url) return;
       var self = this;
@@ -92,9 +93,16 @@
       }, 1000);
     },
     fireConfetti() {
-      setTimeout(function() {
+      var self = this;
+      if (self._confettiTimer) clearTimeout(self._confettiTimer);
+      self._confettiTimer = setTimeout(function() {
+        self._confettiTimer = null;
         try { if (window.fireSuccessConfetti) window.fireSuccessConfetti(); } catch (_) {}
       }, 100);
+    },
+    destroy() {
+      if (this._redirectTimer) { clearInterval(this._redirectTimer); this._redirectTimer = null; }
+      if (this._confettiTimer) { clearTimeout(this._confettiTimer); this._confettiTimer = null; }
     }
   }".gsub(/\s+/, ' ').html_safe
 

data/lib/studio/version.rb

@@ -1,3 +1,3 @@
 module Studio
-  VERSION = "0.62.3"
+  VERSION = "0.62.5"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: studio-engine
 version: !ruby/object:Gem::Version
-  version: 0.62.3
+  version: 0.62.5
 platform: ruby
 authors:
 - Alex McRitchie