svemagie/blog-eleventy-indiekit
1
0
Fork 0
mirror of https://github.com/svemagie/blog-eleventy-indiekit.git synced 2026-04-02 08:44:56 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: move focus-trap logic from inline attribute to JS method

Browse Source 
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
This commit is contained in:
Ricardo
2026-03-07 20:35:32 +01:00
parent 6ff40c8317
commit 254d5069f7
2 changed files with 10 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
_includes/components/fediverse-modal.njk
View File

@@ -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"

9
js/fediverse-interact.js
View File

@@ -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)}`;