From 254d5069f700b53c16398f64222b263e2909ac9f Mon Sep 17 00:00:00 2001
From: Ricardo <rick@rmendes.net>
Date: Sat, 7 Mar 2026 20:35:32 +0100
Subject: [PATCH] fix: move focus-trap logic from inline attribute to JS method
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The @keydown.tab handler in fediverse-modal.njk contained complex
inline JS with arrow functions, querySelector strings with escaped
quotes, and comparison operators — all of which confused
html-minifier-terser's HTML parser, causing parse errors on every
page that includes the modal (i.e., nearly every page).

Moved the focus-trap logic to a trapFocus() method on the Alpine
component where it belongs.

Confab-Link: http://localhost:8080/sessions/edb1b7b0-da66-4486-bd9c-d1cfa7553b88
---
 _includes/components/fediverse-modal.njk | 9 +--------
 js/fediverse-interact.js                 | 9 +++++++++
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/_includes/components/fediverse-modal.njk b/_includes/components/fediverse-modal.njk
index 6dd693b..0f95228 100644
--- a/_includes/components/fediverse-modal.njk
+++ b/_includes/components/fediverse-modal.njk
@@ -5,14 +5,7 @@
   <div class="fixed inset-0 z-50 flex items-center justify-center p-4"
        @keydown.escape.window="showModal = false"
        x-init="$nextTick(() => { const input = $el.querySelector('input'); if (input) input.focus(); })"
-       @keydown.tab="
-         const focusable = [...$el.querySelectorAll('button, input, a, [tabindex]:not([tabindex=\"-1\"])')].filter(el => !el.closest('[x-show]') || el.closest('[x-show]').style.display !== 'none');
-         if (!focusable.length) return;
-         const first = focusable[0];
-         const 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(); }
-       ">
+       @keydown.tab="trapFocus($event)">
     {# Backdrop #}
     <div class="fixed inset-0 bg-black/40"
          x-transition:enter="transition ease-out duration-200"
diff --git a/js/fediverse-interact.js b/js/fediverse-interact.js
index 82e3ef7..4d1375b 100644
--- a/js/fediverse-interact.js
+++ b/js/fediverse-interact.js
@@ -133,6 +133,15 @@ document.addEventListener("alpine:init", () => {
       }
     },
 
+    trapFocus(event) {
+      const focusable = [...this.$el.querySelectorAll('button, input, a, [tabindex]:not([tabindex="-1"])')].filter(el => !el.closest('[x-show]') || el.closest('[x-show]').style.display !== 'none');
+      if (!focusable.length) return;
+      const first = focusable[0];
+      const 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(); }
+    },
+
     redirectToInstance(domain) {
       if (this.mode === "share") {
         window.location.href = `https://${domain}/share?text=${encodeURIComponent(this.targetUrl)}`;