@jsenv/dom 0.16.0 → 0.17.1

package/dist/jsenv_dom.js

@@ -4592,13 +4592,6 @@ const DEFAULT_BEHAVIORS = [
     },
     // no fallback: only claims Tab, other keys continue to next entries
   },
-  {
-    // Escape natively dismisses only <dialog> elements
-    test: (el) => el.tagName === "DIALOG" || Boolean(el.closest("dialog")),
-    keys: {
-      escape: "dismiss",
-    },
-  },
   {
     test: (el) => el.matches("input[type='radio'], input[type='checkbox']"),
     keys: {
@@ -4748,6 +4741,18 @@ const DEFAULT_BEHAVIORS = [
       enter: "activate",
     },
   },
+  {
+    // Escape natively dismisses only <dialog> elements. Deliberately late in
+    // the list: the focused element gets first claim on Escape, because the
+    // browser resolves the close request innermost-first. A non-empty
+    // <input type="search"> inside a dialog consumes the first Escape to clear
+    // itself and only a second one reaches the dialog — reporting "dismiss"
+    // here would let our own Escape-to-close shortcuts fire on the first press.
+    test: (el) => el.tagName === "DIALOG" || Boolean(el.closest("dialog")),
+    keys: {
+      escape: "dismiss",
+    },
+  },
   {
     // Non-interactive elements: browser scrolls on Space and arrow keys
     test: () => true,
@@ -5550,7 +5555,22 @@ const performTabNavigation = (
     if (hasNegativeTabIndex(element)) {
       return false;
     }
-    return elementIsFocusable(element, { excludeAriaHidden });
+    if (!elementIsFocusable(element, { excludeAriaHidden })) {
+      return false;
+    }
+    // Native radio-group semantics: within a named radio group only ONE radio
+    // is a Tab stop — the checked one, or the first focusable one when none is
+    // checked. The rest are reachable with arrow keys, not Tab. Without this,
+    // tabbing into a group would land on its first radio instead of its checked
+    // value (e.g. tabbing between two wheels of a WheelGroup).
+    if (
+      element.matches?.('input[type="radio"]') &&
+      element.name &&
+      !radioIsGroupTabStop(element)
+    ) {
+      return false;
+    }
+    return true;
   };
 
   // A focus group "owns" the activeElement when activeElement is inside it.
@@ -5701,6 +5721,43 @@ const performTabNavigation = (
   }
 };
 
+// Whether a radio is the single Tab stop of its native radio group (checked, or
+// the first enabled radio when none is checked). Mirrors how the browser puts
+// only one radio of a group in the Tab order.
+const radioIsGroupTabStop = (radio) => {
+  const scope = radio.form || radio.getRootNode();
+  if (!scope || !scope.querySelectorAll) {
+    return true;
+  }
+  const sameName = scope.querySelectorAll(
+    `input[type="radio"][name="${CSS.escape(radio.name)}"]`,
+  );
+  const radioForm = radio.form || null;
+  let checked = null;
+  let firstEnabled = null;
+  let groupSize = 0;
+  for (const candidate of sameName) {
+    // Radios only form one group when they share the same form owner.
+    if ((candidate.form || null) !== radioForm) {
+      continue;
+    }
+    groupSize++;
+    if (candidate.disabled) {
+      continue;
+    }
+    if (!firstEnabled) {
+      firstEnabled = candidate;
+    }
+    if (candidate.checked && !checked) {
+      checked = candidate;
+    }
+  }
+  if (groupSize <= 1) {
+    return true;
+  }
+  return radio === (checked || firstEnabled);
+};
+
 const isTabEvent$1 = (event) => event.key === "Tab" || event.keyCode === 9;
 
 const hasNegativeTabIndex = (element) => {
@@ -7176,49 +7233,61 @@ const getPaddingSizes = (element) => {
  */
 const trapScrollInside = (element) => {
   const cleanupCallbackSet = new Set();
-  const lockScroll = (el) => {
+
+  // Collect every element to lock first (preceding scrollable siblings + all
+  // ancestor scroll containers).
+  const elementsToLock = [];
+  let previous = element.previousSibling;
+  while (previous) {
+    if (previous.nodeType === 1 && isScrollable(previous)) {
+      elementsToLock.push(previous);
+    }
+    previous = previous.previousSibling;
+  }
+  for (const selfOrAncestorScroll of getSelfAndAncestorScrolls(element)) {
+    elementsToLock.push(selfOrAncestorScroll.scrollContainer);
+  }
+
+  // Phase 1 — MEASURE. Batch every layout/style read (scrollTop, scrollbar
+  // size, padding) before any style write, so the layout that showModal
+  // invalidated is recomputed once rather than thrashing between each write and
+  // the next read. (measureScrollbar still forces its own reflow per element via
+  // its probe node — that one is inherent.)
+  const plans = elementsToLock.map((el) => {
     const savedScrollTop = el.scrollTop;
     const savedScrollLeft = el.scrollLeft;
     const scrollbarGutter = getStyle(el, "scrollbar-gutter");
-    const hasScrollbarGutterStrategy =
-      scrollbarGutter && scrollbarGutter !== "auto";
-    if (hasScrollbarGutterStrategy) {
-      // The element manages its own gutter — just hide overflow, no padding needed.
-      const removeScrollLockStyles = setStyles(el, { overflow: "hidden" });
-      cleanupCallbackSet.add(() => {
-        removeScrollLockStyles();
-        el.scrollTop = savedScrollTop;
-        el.scrollLeft = savedScrollLeft;
-      });
-      return;
+    if (scrollbarGutter && scrollbarGutter !== "auto") {
+      // The element manages its own gutter — just hide overflow, no padding.
+      return {
+        el,
+        savedScrollTop,
+        savedScrollLeft,
+        styles: { overflow: "hidden" },
+      };
     }
     const [scrollbarWidth, scrollbarHeight] = measureScrollbar(el);
     const { right, bottom } = getPaddingSizes(el);
-    const removeScrollLockStyles = setStyles(el, {
-      "padding-right": `${right + scrollbarWidth}px`,
-      "padding-bottom": `${bottom + scrollbarHeight}px`,
-      "overflow": "hidden",
-    });
+    return {
+      el,
+      savedScrollTop,
+      savedScrollLeft,
+      styles: {
+        "padding-right": `${right + scrollbarWidth}px`,
+        "padding-bottom": `${bottom + scrollbarHeight}px`,
+        "overflow": "hidden",
+      },
+    };
+  });
+
+  // Phase 2 — MUTATE. All style writes together.
+  for (const { el, savedScrollTop, savedScrollLeft, styles } of plans) {
+    const removeScrollLockStyles = setStyles(el, styles);
     cleanupCallbackSet.add(() => {
       removeScrollLockStyles();
       el.scrollTop = savedScrollTop;
       el.scrollLeft = savedScrollLeft;
     });
-  };
-  let previous = element.previousSibling;
-  while (previous) {
-    if (previous.nodeType === 1) {
-      if (isScrollable(previous)) {
-        lockScroll(previous);
-      }
-    }
-    previous = previous.previousSibling;
-  }
-
-  const selfAndAncestorScrolls = getSelfAndAncestorScrolls(element);
-  for (const selfOrAncestorScroll of selfAndAncestorScrolls) {
-    const elementToScrollLock = selfOrAncestorScroll.scrollContainer;
-    lockScroll(elementToScrollLock);
   }
 
   return () => {
@@ -11504,6 +11573,10 @@ const MIN_CONTENT_VISIBILITY_RATIO = 0.6;
  *
  * A bit like https://tetherjs.dev/ but different
  */
+// The event type observeSize() reports with — recognized by check() as "the
+// change is in another element, not in the tracked rect".
+const OBSERVED_ELEMENT_SIZE_CHANGE = "observed_element_size_change";
+
 const visibleRectEffect = (
   element,
   update,
@@ -11746,6 +11819,18 @@ const visibleRectEffect = (
       });
     };
 
+    // An observeSize() delivery reports a size change in some *other*
+    // element — this one's own rect and the viewport are both typically
+    // untouched by it, so the dedup below would skip every single one,
+    // defeating the whole point of observeSize (a popover reconsidering its
+    // placement once its own content shrinks/grows, a callout re-measuring
+    // against its message body).
+    if (event.type === OBSERVED_ELEMENT_SIZE_CHANGE) {
+      lastVisibleRect = visibleRect;
+      lastViewportRect = viewportRect;
+      notify();
+      return;
+    }
     const visibleRectChanged =
       !lastVisibleRect ||
       lastVisibleRect.left !== visibleRect.left ||
@@ -12150,7 +12235,7 @@ const visibleRectEffect = (
       pendingFrame = requestAnimationFrame(() => {
         pendingFrame = null;
         check(
-          new CustomEvent("observed_element_size_change", {
+          new CustomEvent(OBSERVED_ELEMENT_SIZE_CHANGE, {
             detail: { width, height },
           }),
         );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/dom",
-  "version": "0.16.0",
+  "version": "0.17.1",
   "type": "module",
   "description": "DOM utilities for writing frontend code",
   "repository": {
@@ -40,8 +40,8 @@
     "@jsenv/core": "../../../",
     "@jsenv/navi": "../navi",
     "@jsenv/snapshot": "../../tooling/snapshot",
-    "@preact/signals": "2.9.3",
-    "preact": "11.0.0-beta.1"
+    "@preact/signals": "2.9.4",
+    "preact": "11.0.0-beta.2"
   },
   "publishConfig": {
     "access": "public"