@jsenv/dom 0.17.69 → 0.17.71

package/dist/jsenv_dom.js

@@ -7152,14 +7152,7 @@ const getScrollContainer = (arg, { includeHidden } = {}) => {
     }
     return null;
   }
-  if (element.hasAttribute("popover")) {
-    return getScrollingElement(element.ownerDocument);
-  }
-  if (element.tagName === "DIALOG" && element.matches(":modal")) {
-    return getScrollingElement(element.ownerDocument);
-  }
-  const position = getStyle(element, "position");
-  if (position === "fixed") {
+  if (isScrollBoundary(element)) {
     return getScrollingElement(element.ownerDocument);
   }
   return (
@@ -7190,6 +7183,9 @@ const findScrollContainer = (element, { includeHidden } = {}) => {
     if (parent === document) {
       return null;
     }
+    if (isScrollBoundary(parent)) {
+      return null;
+    }
     if (isScrollable(parent, { includeHidden })) {
       return parent;
     }
@@ -7198,6 +7194,24 @@ const findScrollContainer = (element, { includeHidden } = {}) => {
   return null;
 };
 
+// A popover, a modal dialog or a fixed box is not scrolled by the boxes around
+// it: the page is its scroll container, and the parent walk of any element
+// inside it stops there too. A scrolling box between that boundary and the
+// outer ancestors would otherwise be found, although nothing it scrolls moves
+// the element.
+const isScrollBoundary = (node) => {
+  if (node.nodeType !== 1) {
+    return false;
+  }
+  if (node.hasAttribute("popover")) {
+    return true;
+  }
+  if (node.tagName === "DIALOG" && node.matches(":modal")) {
+    return true;
+  }
+  return getStyle(node, "position") === "fixed";
+};
+
 const getSelfAndAncestorScrolls = (element, startOnParent) => {
   let scrollX = 0;
   let scrollY = 0;
@@ -15870,11 +15884,14 @@ const isAncestorOpen = (ancestor) => {
  *
  * A <dialog> or a [popover] is only ever a surface, and the UA hides a closed
  * one outright (display: none), so nothing inside has a box: answered from the
- * markup, without touching the layout. Anything else — a <details> whose
- * <summary> stays on screen, a bare [aria-expanded] — is asked of the layout
- * instead: a closed custom surface is display:none through the library's own
- * closed-state CSS ([navi-hidden], :not([popover])), so nothing inside one
- * answers true here, while everything a trigger keeps on screen does.
+ * markup, without touching the layout. A trigger says what it is too: its
+ * `aria-controls` names the element its aria-expanded speaks for, so its own
+ * subtree is on screen whether or not that element is — answered from the
+ * markup as well. Anything else — a <details> whose <summary> stays on screen,
+ * a bare [aria-expanded] — is asked of the layout instead: a closed custom
+ * surface is display:none through the library's own closed-state CSS
+ * ([navi-hidden], :not([popover])), so nothing inside one answers true here,
+ * while everything a trigger keeps on screen does.
  *
  * The layout question is a forced style recalculation. Asked once per element
  * from a mount that also writes styles between the questions, each one costs a
@@ -15892,6 +15909,9 @@ const isDisplayedDespiteClosedAncestor = (element, ancestor) => {
   if (ancestor.tagName === "DIALOG" || ancestor.hasAttribute("popover")) {
     return false;
   }
+  if (ancestor.hasAttribute("aria-controls")) {
+    return true;
+  }
   if (typeof element.checkVisibility !== "function") {
     // Nothing to tell the two apart with: leave the caller treating the closed
     // ancestor as hiding this element.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/dom",
-  "version": "0.17.69",
+  "version": "0.17.71",
   "type": "module",
   "description": "DOM utilities for writing frontend code",
   "repository": {