@rohal12/spindle 0.59.18 → 0.59.19

package/dist/pkg/headless.js

@@ -12480,6 +12480,26 @@ function useViewScope() {
 */
 var SvgContext = createContext(false);
 var SVG_NAMESPACE = "http://www.w3.org/2000/svg";
+/**
+* Elements whose children must be elements of particular types: markdown
+* paragraphs between them would pull the children out of the structure (#423).
+* Text between the children, when it is only whitespace, is dropped.
+*/
+var STRUCTURAL_ELEMENTS = new Set([
+	"table",
+	"thead",
+	"tbody",
+	"tfoot",
+	"tr",
+	"colgroup",
+	"ul",
+	"ol",
+	"menu",
+	"dl",
+	"select",
+	"optgroup",
+	"datalist"
+]);
 /** Elements whose content is literal text, not markdown. */
 var PREFORMATTED_ELEMENTS = new Set([
 	"pre",
@@ -12940,7 +12960,7 @@ function HtmlNodeRenderer({ node }) {
 			locals,
 			inline: isInline
 		});
-		children = summaryAt === -1 ? body(node.children) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		children = STRUCTURAL_ELEMENTS.has(tag) && node.children.every((n) => n.type !== "text" || n.value.trim() === "") ? node.children.filter((n) => n.type !== "text").map((n) => renderSingleNode(n)) : summaryAt === -1 ? body(node.children) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
 			body(node.children.slice(0, summaryAt)),
 			renderSingleNode(node.children[summaryAt]),
 			body(node.children.slice(summaryAt + 1))
@@ -18487,7 +18507,7 @@ function useModalFocus(panelRef, bodySelector, dismissible, onClose) {
 		const entry = { panel };
 		openModals.push(entry);
 		const body = panel.querySelector(bodySelector) ?? panel;
-		(panel.querySelector("[autofocus]") ?? focusables(body)[0] ?? panel).focus();
+		(Array.from(panel.querySelectorAll("[autofocus]")).find(isAvailable) ?? focusables(body)[0] ?? panel).focus();
 		return () => {
 			const i = openModals.indexOf(entry);
 			if (i !== -1) openModals.splice(i, 1);
@@ -18498,8 +18518,33 @@ function useModalFocus(panelRef, bodySelector, dismissible, onClose) {
 	useLayoutEffect(() => {
 		const panel = panelRef.current;
 		if (!panel) return;
+		const top = () => openModals[openModals.length - 1]?.panel === panel;
+		/**
+		* Move focus to the next (or previous) modal control from `from`. The
+		* order is computed here, never left to the browser: its positive-tabindex
+		* sequence spans the whole document and would lead out of the modal
+		* (#424). `from` may be an element of an embedded document, whose frame
+		* element then stands in for it.
+		*/
+		const moveFocus = (from, backwards) => {
+			const items = focusables(panel);
+			const first = items[0];
+			const last = items[items.length - 1];
+			if (!first || !last) {
+				panel.focus();
+				return;
+			}
+			const at = from ? items.indexOf(from) : -1;
+			let next;
+			if (at !== -1) next = items[at + (backwards ? -1 : 1)];
+			else if (from && from !== panel && panel.contains(from)) {
+				const after = (el) => !!(from.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_FOLLOWING);
+				next = backwards ? items.filter((el) => !after(el)).pop() : items.find(after);
+			} else next = backwards ? last : first;
+			(next ?? (backwards ? last : first)).focus();
+		};
 		const onKeyDown = (e) => {
-			if (openModals[openModals.length - 1]?.panel !== panel) return;
+			if (!top()) return;
 			if (e.key === "Escape") {
 				if (!dismissible) return;
 				e.preventDefault();
@@ -18508,24 +18553,60 @@ function useModalFocus(panelRef, bodySelector, dismissible, onClose) {
 				return;
 			}
 			if (e.key !== "Tab") return;
-			const items = focusables(panel);
-			const first = items[0];
-			const last = items[items.length - 1];
-			const active = document.activeElement;
-			const inside = active !== panel && panel.contains(active);
-			if (!first || !last) {
-				e.preventDefault();
-				panel.focus();
-			} else if (e.shiftKey && (active === first || !inside)) {
-				e.preventDefault();
-				last.focus();
-			} else if (!e.shiftKey && (active === last || !inside)) {
-				e.preventDefault();
-				first.focus();
-			}
+			e.preventDefault();
+			moveFocus(document.activeElement, e.shiftKey);
+		};
+		const controller = new AbortController();
+		const { signal } = controller;
+		const frameDocs = /* @__PURE__ */ new Map();
+		const attachFrame = (frame) => {
+			let doc = null;
+			try {
+				doc = frame.contentDocument;
+			} catch {}
+			if (!doc || frameDocs.get(frame) === doc) return;
+			frameDocs.set(frame, doc);
+			const onFrameKeyDown = (e) => {
+				if (!top()) return;
+				if (e.key !== "Tab") return onKeyDown(e);
+				const inner = Array.from(doc.querySelectorAll(FOCUSABLE)).filter((el) => isAvailable(el) && isTabStop(el));
+				const active = doc.activeElement;
+				const edge = e.shiftKey ? inner[0] : inner[inner.length - 1];
+				if (!edge || active === edge || active === doc.body) {
+					e.preventDefault();
+					moveFocus(frame, e.shiftKey);
+				}
+			};
+			doc.addEventListener("keydown", onFrameKeyDown, { signal });
+		};
+		const attachFrames = () => {
+			panel.querySelectorAll("iframe").forEach(attachFrame);
+		};
+		const onLoad = (e) => {
+			if (e.target instanceof HTMLIFrameElement) attachFrame(e.target);
+		};
+		panel.addEventListener("load", onLoad, {
+			capture: true,
+			signal
+		});
+		const frames = new MutationObserver(attachFrames);
+		frames.observe(panel, {
+			childList: true,
+			subtree: true
+		});
+		attachFrames();
+		const onFocusIn = (e) => {
+			const target = e.target;
+			if (!top() || !(target instanceof Node) || panel.contains(target)) return;
+			if (target === document.body || target === document.documentElement) return;
+			moveFocus(null, false);
+		};
+		document.addEventListener("keydown", onKeyDown, { signal });
+		document.addEventListener("focusin", onFocusIn, { signal });
+		return () => {
+			controller.abort();
+			frames.disconnect();
 		};
-		document.addEventListener("keydown", onKeyDown);
-		return () => document.removeEventListener("keydown", onKeyDown);
 	}, [dismissible, onClose]);
 }
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rohal12/spindle",
-  "version": "0.59.18",
+  "version": "0.59.19",
   "type": "module",
   "description": "A Preact-based story format for Twine 2.",
   "license": "Unlicense",

package/src/hooks/use-modal-focus.ts

@@ -165,8 +165,12 @@ export function useModalFocus(
     openModals.push(entry);
 
     const body = panel.querySelector<HTMLElement>(bodySelector) ?? panel;
+    // An autofocus element that can't take focus (hidden, disabled, inert)
+    // must not shadow the eligible controls (#426).
     const initial =
-      panel.querySelector<HTMLElement>('[autofocus]') ??
+      Array.from(panel.querySelectorAll<HTMLElement>('[autofocus]')).find(
+        isAvailable,
+      ) ??
       focusables(body)[0] ??
       panel;
     initial.focus();
@@ -187,8 +191,44 @@ export function useModalFocus(
     const panel = panelRef.current;
     if (!panel) return;
 
+    const top = () => openModals[openModals.length - 1]?.panel === panel;
+
+    /**
+     * Move focus to the next (or previous) modal control from `from`. The
+     * order is computed here, never left to the browser: its positive-tabindex
+     * sequence spans the whole document and would lead out of the modal
+     * (#424). `from` may be an element of an embedded document, whose frame
+     * element then stands in for it.
+     */
+    const moveFocus = (from: Element | null, backwards: boolean) => {
+      const items = focusables(panel);
+      const first = items[0];
+      const last = items[items.length - 1];
+      if (!first || !last) {
+        panel.focus();
+        return;
+      }
+      const at = from ? items.indexOf(from as HTMLElement) : -1;
+      let next: HTMLElement | undefined;
+      if (at !== -1) {
+        next = items[at + (backwards ? -1 : 1)];
+      } else if (from && from !== panel && panel.contains(from)) {
+        // Inside the panel but not a tab stop: continue from its position
+        const after = (el: HTMLElement) =>
+          !!(
+            from.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_FOLLOWING
+          );
+        next = backwards
+          ? items.filter((el) => !after(el)).pop()
+          : items.find(after);
+      } else {
+        next = backwards ? last : first;
+      }
+      (next ?? (backwards ? last : first)).focus();
+    };
+
     const onKeyDown = (e: KeyboardEvent) => {
-      if (openModals[openModals.length - 1]?.panel !== panel) return;
+      if (!top()) return;
 
       if (e.key === 'Escape') {
         if (!dismissible) return;
@@ -199,25 +239,69 @@ export function useModalFocus(
       }
 
       if (e.key !== 'Tab') return;
-      const items = focusables(panel);
-      const first = items[0];
-      const last = items[items.length - 1];
-      const active = document.activeElement;
-      // The panel itself (tabindex=-1) counts as outside the tab sequence.
-      const inside = active !== panel && panel.contains(active);
-      if (!first || !last) {
-        e.preventDefault();
-        panel.focus();
-      } else if (e.shiftKey && (active === first || !inside)) {
-        e.preventDefault();
-        last.focus();
-      } else if (!e.shiftKey && (active === last || !inside)) {
-        e.preventDefault();
-        first.focus();
+      e.preventDefault();
+      moveFocus(document.activeElement, e.shiftKey);
+    };
+
+    // Key events inside an embedded document never reach this one (#425).
+    // Escape closes the dialog from there too; Tab moves on natively within
+    // the frame and is taken over at its first and last controls.
+    const controller = new AbortController();
+    const { signal } = controller;
+    const frameDocs = new Map<HTMLIFrameElement, Document>();
+    const attachFrame = (frame: HTMLIFrameElement) => {
+      let doc: Document | null = null;
+      try {
+        doc = frame.contentDocument;
+      } catch {
+        // Not accessible
       }
+      // Already listening to this document
+      if (!doc || frameDocs.get(frame) === doc) return;
+      frameDocs.set(frame, doc);
+      const onFrameKeyDown = (e: KeyboardEvent) => {
+        if (!top()) return;
+        if (e.key !== 'Tab') return onKeyDown(e);
+        const inner = Array.from(
+          doc!.querySelectorAll<HTMLElement>(FOCUSABLE),
+        ).filter((el) => isAvailable(el) && isTabStop(el));
+        const active = doc!.activeElement;
+        const edge = e.shiftKey ? inner[0] : inner[inner.length - 1];
+        if (!edge || active === edge || active === doc!.body) {
+          e.preventDefault();
+          moveFocus(frame, e.shiftKey);
+        }
+      };
+      doc.addEventListener('keydown', onFrameKeyDown, { signal });
+    };
+    const attachFrames = () => {
+      panel.querySelectorAll('iframe').forEach(attachFrame);
     };
+    // load doesn't bubble; a frame's document is replaced when it navigates
+    const onLoad = (e: Event) => {
+      if (e.target instanceof HTMLIFrameElement) attachFrame(e.target);
+    };
+    panel.addEventListener('load', onLoad, { capture: true, signal });
+    const frames = new MutationObserver(attachFrames);
+    frames.observe(panel, { childList: true, subtree: true });
+    attachFrames();
 
-    document.addEventListener('keydown', onKeyDown);
-    return () => document.removeEventListener('keydown', onKeyDown);
+    // Focus that lands outside the dialog anyway, e.g. leaving a frame whose
+    // document can't be reached, is brought back in.
+    const onFocusIn = (e: FocusEvent) => {
+      const target = e.target;
+      if (!top() || !(target instanceof Node) || panel.contains(target)) return;
+      if (target === document.body || target === document.documentElement) {
+        return;
+      }
+      moveFocus(null, false);
+    };
+
+    document.addEventListener('keydown', onKeyDown, { signal });
+    document.addEventListener('focusin', onFocusIn, { signal });
+    return () => {
+      controller.abort();
+      frames.disconnect();
+    };
   }, [dismissible, onClose]);
 }

package/src/markup/render.tsx

@@ -84,6 +84,27 @@ const SvgContext = createContext(false);
 
 const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
 
+/**
+ * Elements whose children must be elements of particular types: markdown
+ * paragraphs between them would pull the children out of the structure (#423).
+ * Text between the children, when it is only whitespace, is dropped.
+ */
+const STRUCTURAL_ELEMENTS = new Set([
+  'table',
+  'thead',
+  'tbody',
+  'tfoot',
+  'tr',
+  'colgroup',
+  'ul',
+  'ol',
+  'menu',
+  'dl',
+  'select',
+  'optgroup',
+  'datalist',
+]);
+
 /** Elements whose content is literal text, not markdown. */
 const PREFORMATTED_ELEMENTS = new Set(['pre', 'textarea', 'style']);
 export const WidgetChildrenContext = createContext<WidgetChildren | null>(null);
@@ -693,16 +714,22 @@ function HtmlNodeRenderer({ node }: { node: HtmlNode }) {
         tag === 'details' ? leadingSummaryIndex(node.children) : -1;
       const body = (nodes: ASTNode[]) =>
         renderNodes(nodes, { nobr, locals, inline: isInline });
-      children =
-        summaryAt === -1 ? (
-          body(node.children)
-        ) : (
-          <>
-            {body(node.children.slice(0, summaryAt))}
-            {renderSingleNode(node.children[summaryAt]!)}
-            {body(node.children.slice(summaryAt + 1))}
-          </>
-        );
+      const structural =
+        STRUCTURAL_ELEMENTS.has(tag) &&
+        node.children.every((n) => n.type !== 'text' || n.value.trim() === '');
+      children = structural ? (
+        node.children
+          .filter((n) => n.type !== 'text')
+          .map((n) => renderSingleNode(n))
+      ) : summaryAt === -1 ? (
+        body(node.children)
+      ) : (
+        <>
+          {body(node.children.slice(0, summaryAt))}
+          {renderSingleNode(node.children[summaryAt]!)}
+          {body(node.children.slice(summaryAt + 1))}
+        </>
+      );
       if (isInline !== parentInline) {
         children = (
           <InlineContext.Provider value={isInline}>