interestfor 1.0.12 → 1.0.14

package/README.md

@@ -140,7 +140,7 @@ browsers:
 
 
 ## Implementation
-The polyfill adds event listeners to document.body that monitor for hover
+The polyfill adds event listeners to the document that monitor for hover
 or keyboard events relevant for the `interestfor` API. When interesting
 events happen to elements with the `interestfor` attribute or elements that
 are the targets of those elements, it fires `interest` and `loseinterest`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "interestfor",
-  "version": "1.0.12",
+  "version": "1.0.14",
   "description": "A polyfill for the `interestfor` API",
   "keywords": "interestfor, interesttarget, polyfill, hover-triggering",
   "homepage": "https://github.com/mfreed7/interestfor#readme",

package/src/interestfor.js

@@ -52,10 +52,10 @@
         e.stopImmediatePropagation();
       }
     };
-    document.body.addEventListener(interestEventName, cancel, {
+    document.addEventListener(interestEventName, cancel, {
       capture: true,
     });
-    document.body.addEventListener(loseInterestEventName, cancel, {
+    document.addEventListener(loseInterestEventName, cancel, {
       capture: true,
     });
   }
@@ -414,9 +414,7 @@
         invokersWithInterest.add(invoker);
         invoker.classList.add("interest-source");
         target.classList.add("interest-target");
-        if (!isPlainHint(target)) {
-          invoker.setAttribute("aria-expanded", "true");
-        }
+        syncAriaExpanded(invoker);
         if (getComputedStyle(invoker).anchorName === 'none' &&
             getComputedStyle(target).positionAnchor === 'auto') {
           const anchorName = `--interest-anchor-${Math.random()
@@ -459,6 +457,7 @@
     resetInterestState(invoker);
     if (shouldHide && isPopoverOpen(target)) {
       hideTargetPopover(invoker, target);
+      syncAriaExpanded(invoker);
     }
     return true;
   }
@@ -486,9 +485,6 @@
         target[targetDataField] = null;
         target.classList.remove("interest-target");
       }
-      if (!isPlainHint(target)) {
-        invoker.setAttribute("aria-expanded", "false");
-      }
     }
     if (data.anchorName) {
       invoker.style.anchorName = "";
@@ -499,6 +495,7 @@
     }
     data.state = InterestState.NoInterest;
     data.target = null;
+    syncAriaExpanded(invoker);
   }
 
   function hideTargetPopover(invoker, target) {
@@ -534,10 +531,9 @@
   ].join(",");
 
   // Accessibility utilities
+  // Plain vs. rich hints are distinguished by the contents of the target,
+  // regardless of the popover type.
   function isPlainHint(target) {
-    if (target.getAttribute("popover")?.toLowerCase() !== "hint") {
-      return false;
-    }
     // Anything focusable is not plain.
     if (target.querySelector(focusableSelector)) {
       return false;
@@ -553,7 +549,16 @@
     for (const el of elementsWithRoles) {
       const role = el.getAttribute("role").toLowerCase();
       // Allowed roles are those that don't add semantics for a screen reader to explore.
-      if (!["presentation", "none", "generic", "image"].includes(role)) {
+      if (
+        ![
+          "presentation",
+          "none",
+          "generic",
+          "image",
+          "tooltip",
+          "paragraph",
+        ].includes(role)
+      ) {
         return false;
       }
     }
@@ -638,13 +643,56 @@
     return normalizeText(el.getAttribute("title"));
   }
 
+  function idrefListIncludes(el, attr, id) {
+    const value = el.getAttribute(attr) || "";
+    return value.trim().split(/\s+/).includes(id);
+  }
+
+  // Returns true if `invoker` references `target` via `popovertarget` or
+  // `commandfor`, i.e. activating the invoker (also) toggles the target.
+  function activationTogglesTarget(invoker, target) {
+    const refersTo = (attr, prop) => {
+      if (prop in invoker) {
+        return invoker[prop] === target;
+      }
+      return !!target.id && invoker.getAttribute(attr) === target.id;
+    };
+    return (
+      refersTo("popovertarget", "popoverTargetElement") ||
+      refersTo("commandfor", "commandForElement")
+    );
+  }
+
+  function isLink(el) {
+    return (
+      el instanceof HTMLAnchorElement ||
+      el instanceof HTMLAreaElement ||
+      (!!window.SVGAElement && el instanceof SVGAElement)
+    );
+  }
+
+  // Sets `aria-expanded` on the invoker, if it is managed by the polyfill. For
+  // popover targets, this reflects whether the popover is open (which might
+  // be because of something other than interest, e.g. `popovertarget`). For
+  // other targets, it reflects whether the invoker has interest.
+  function syncAriaExpanded(invoker) {
+    const data = invoker[dataField];
+    if (!data || !data.managesAriaExpanded || !data.a11yTarget) {
+      return;
+    }
+    const target = data.a11yTarget;
+    const expanded = target.hasAttribute("popover")
+      ? isPopoverOpen(target)
+      : data.state !== InterestState.NoInterest && data.target === target;
+    invoker.setAttribute("aria-expanded", expanded ? "true" : "false");
+  }
+
   function setupAccessibility(invoker, target) {
     if (!target.id) {
       return;
     }
     if (isPlainHint(target)) {
-      const labelledBy = invoker.getAttribute("aria-labelledby") || "";
-      if (labelledBy.trim().split(/\s+/).includes(target.id)) {
+      if (idrefListIncludes(invoker, "aria-labelledby", target.id)) {
         return;
       }
       const name = getAccessibleName(invoker);
@@ -656,16 +704,36 @@
       } else if (
         hintText &&
         hintText !== name &&
-        !invoker.hasAttribute("aria-describedby")
+        !invoker.hasAttribute("aria-describedby") &&
+        // For toggletips, where activating the invoker reveals the hint,
+        // describing the invoker with the hint would read the hint twice.
+        !invoker.hasAttribute("aria-expanded") &&
+        !activationTogglesTarget(invoker, target)
       ) {
         invoker.setAttribute("aria-describedby", target.id);
       }
     } else {
       // Rich hint
-      if (!invoker.hasAttribute("aria-details")) {
+      const data = invoker[dataField];
+      // If the author already related the target to the invoker, don't add
+      // more relationships.
+      const authorRelated =
+        idrefListIncludes(invoker, "aria-describedby", target.id) ||
+        idrefListIncludes(invoker, "aria-labelledby", target.id);
+      if (!authorRelated && !invoker.hasAttribute("aria-details")) {
         invoker.setAttribute("aria-details", target.id);
       }
-      invoker.setAttribute("aria-expanded", "false");
+      // Don't overwrite an author-provided `aria-expanded`. Also, activating
+      // a link navigates rather than expanding the hint, so only links whose
+      // hint contains focusable content get `aria-expanded`.
+      data.managesAriaExpanded =
+        !authorRelated &&
+        !invoker.hasAttribute("aria-expanded") &&
+        (!isLink(invoker) || !!target.querySelector(focusableSelector));
+      if (data.managesAriaExpanded) {
+        target.addEventListener("toggle", data.onTargetToggle);
+        syncAriaExpanded(invoker);
+      }
       if (!target.hasAttribute("role")) {
         target.setAttribute("role", "tooltip");
       }
@@ -678,6 +746,8 @@
         state: InterestState.NoInterest,
         target: null,
         a11yTarget: null,
+        managesAriaExpanded: false,
+        onTargetToggle: () => syncAriaExpanded(el),
         gainedTimer: null,
         lostTimer: null,
         longPressTimer: null,
@@ -690,9 +760,16 @@
         },
       };
     }
+    const data = el[dataField];
     const target = GetInterestForTarget(el);
-    if (target && el[dataField].a11yTarget !== target) {
-      el[dataField].a11yTarget = target;
+    if (target && data.a11yTarget !== target) {
+      if (data.managesAriaExpanded) {
+        // Stop managing `aria-expanded` for the previous target.
+        data.a11yTarget?.removeEventListener("toggle", data.onTargetToggle);
+        el.removeAttribute("aria-expanded");
+        data.managesAriaExpanded = false;
+      }
+      data.a11yTarget = target;
       setupAccessibility(el, target);
     }
   }
@@ -989,13 +1066,13 @@
         touchInProgress = false;
       }
     };
-    document.body.addEventListener("pointerover", clearTouch);
-    document.body.addEventListener("pointerdown", clearTouch);
-    document.body.addEventListener("mouseover", (e) => handler(e, Source.Hover));
-    document.body.addEventListener("mouseout", (e) => handler(e, Source.DeHover));
-    document.body.addEventListener("focusin", (e) => handler(e, Source.Focus));
-    document.body.addEventListener("focusout", (e) => handler(e, Source.Blur));
-    document.body.addEventListener("keydown", (e) => {
+    document.addEventListener("pointerover", clearTouch);
+    document.addEventListener("pointerdown", clearTouch);
+    document.addEventListener("mouseover", (e) => handler(e, Source.Hover));
+    document.addEventListener("mouseout", (e) => handler(e, Source.DeHover));
+    document.addEventListener("focusin", (e) => handler(e, Source.Focus));
+    document.addEventListener("focusout", (e) => handler(e, Source.Blur));
+    document.addEventListener("keydown", (e) => {
       touchInProgress = false;
       if (e.key === "Escape" && !e.defaultPrevented) {
         // Lose interest in all invokers, most recent first. These
@@ -1010,31 +1087,46 @@
         });
       }
     });
+
+    // WebKit (iOS) long-press workarounds:
+    // 1. On Android, holding for ~500ms fires `pointercancel` and `touchcancel`,
+    //    so the popover can open immediately when `longPressTimer` fires while
+    //    the finger is still down. On iOS WebKit, holding a button with
+    //    `user-select: none` does not cancel the touch stream; when the finger
+    //    is later lifted, iOS fires `pointerup` (which triggers WebKit's native
+    //    popover light-dismiss because the popover was not open at
+    //    `pointerdown`) followed by `touchend` and synthesized mouse/`click`
+    //    events. On iOS only, record that the 500ms hold succeeded
+    //    (`longPressActive`), and on `touchend` (which fires after `pointerup`),
+    //    call `preventDefault()` to suppress the synthesized `click` and open
+    //    the popover then.
+    // 2. Unlike Android (which applies a native touch slop before firing
+    //    `touchmove`), iOS WebKit dispatches `touchmove` on tiny finger jitter
+    //    during a stationary hold. On iOS only, ignore `touchmove` events within
+    //    10px of `touchstart` (matching UIKit's default `allowableMovement` on
+    //    `UILongPressGestureRecognizer`).
+    const longPressMoveSlop = 10;
+    const isIOS = () => /iPad|iPhone|iPod/.test(navigator.userAgent);
+    
+    
     // Touch support
     const longPressTime = 500;
-    // WebKit (iOS) long-press workaround:
-    // On Android, holding for ~500ms fires `pointercancel` and `touchcancel`,
-    // so the popover can open immediately when `longPressTimer` fires while the
-    // finger is still down. On iOS WebKit, holding a button with
-    // `user-select: none` does not cancel the touch stream; when the finger is
-    // later lifted, iOS fires `pointerup` (which triggers WebKit's native
-    // popover light-dismiss because the popover was not open at `pointerdown`)
-    // followed by `touchend` and synthesized mouse/`click` events.
-    // On iOS only, record that the 500ms hold succeeded (`longPressActive`),
-    // and on `touchend` (which fires after `pointerup`), call `preventDefault()`
-    // to suppress the synthesized `click` and open the popover then.
-    const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
-    document.body.addEventListener("touchstart", (e) => {
+    document.addEventListener("touchstart", (e) => {
       touchInProgress = true;
       const invoker = e.target.closest("button[interestfor]");
       if (invoker) {
         initializeDataField(invoker);
+        const ios = isIOS();
+        if (ios && e.touches?.length === 1) {
+          invoker[dataField].touchStartX = e.touches[0].clientX;
+          invoker[dataField].touchStartY = e.touches[0].clientY;
+        }
         invoker[dataField].longPressActive = false;
         invoker[dataField].longPressTimer = setTimeout(() => {
           // Long-press shows interest immediately, and that interest is not
           // lost by de-hovering or blurring the invoker.
           if (invoker[dataField].state === InterestState.NoInterest) {
-            if (isIOS) {
+            if (ios) {
               invoker[dataField].longPressActive = true;
             } else {
               GainOrLoseInterest(
@@ -1051,13 +1143,20 @@
     const cancelLongPress = (e) => {
       const invoker = e.target.closest("button[interestfor]");
       if (invoker && invoker[dataField]) {
+        if (isIOS() && e.type === "touchmove" && e.touches?.length === 1) {
+          const dx = e.touches[0].clientX - invoker[dataField].touchStartX;
+          const dy = e.touches[0].clientY - invoker[dataField].touchStartY;
+          if (Math.hypot(dx, dy) <= longPressMoveSlop) {
+            return;
+          }
+        }
         clearTimeout(invoker[dataField].longPressTimer);
         invoker[dataField].longPressTimer = null;
         invoker[dataField].longPressActive = false;
       }
     };
-    document.body.addEventListener("touchmove", cancelLongPress);
-    document.body.addEventListener(
+    document.addEventListener("touchmove", cancelLongPress);
+    document.addEventListener(
       "touchend",
       (e) => {
         const invoker = e.target.closest("button[interestfor]");

package/src/interestfor.min.js

@@ -5,4 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 
 
-!function(){const e="interestfor",t="interest",n="loseinterest",r="--interest-delay-start",o="--interest-delay-end",s="--interest-delay",i="--interest-button-content",a="--interest-button-polyfill-content",l="interest-button",c="__interestForData",u="__interestForTargetData",d="__interestForButton",f="__interestForButtonInvoker",m="__interestForExplicitTarget",p="http://www.w3.org/1999/xlink",h=new Set,b=new Set,g=new Set;let y=!1;if(window.interestForPolyfillInstalled)return;window.interestForPolyfillInstalled=!0;const E=HTMLButtonElement.prototype.hasOwnProperty("interestForElement");if(E&&!window.interestForUsePolyfillAlways)return;if(E){const e=e=>{e.isTrusted&&(e.preventDefault(),e.stopImmediatePropagation())};document.body.addEventListener(t,e,{capture:!0}),document.body.addEventListener(n,e,{capture:!0})}window.InterestEvent&&!window.interestForUsePolyfillAlways||(window.InterestEvent=class extends Event{#e;constructor(e,t={}){super(e,t);const{source:n}=t;if(null!=n&&!(n instanceof Element))throw new TypeError("source must be an element");this.#e=n}get[Symbol.toStringTag](){return"InterestEvent"}get source(){const e=this.#e;if(!e)return null;const t=P(e);return t!==P(this.target||document)?t.host:e}});const w="none",v="full",T="explicit",A="hover",L="dehover",N="focus",x="blur";function P(e){return e&&"function"==typeof e.getRootNode?e.getRootNode():e&&e.parentNode?P(e.parentNode):e}function k(e,r,o,s={}){if(!e||!r)return!1;if(!e.isConnected||I(e)!==r||o===w&&F(r)!==e)return!1;if(o!==w){z(e),e[c].state!==w&&e[c].target!==r&&D(e);const n=F(r);if(n){if(n===e)return o===T&&(n[c].state=T),n[c].clearLostTask(),!1;if(!k(n,r,w))return!1;if(!e.isConnected||I(e)!==r)return!1}return function(e,n,r){const o=e[c];switch(r){case v:case T:if(o.state!==w)throw new Error("Invalid state");if(!n.dispatchEvent(new InterestEvent(t,{source:e,cancelable:!0})))return!1;if(o.state=r,o.target=n,o.clearGainedTask(),n[u]||(n[u]={}),n[u].invoker=e,n.hasAttribute("popover")&&(n.addEventListener("beforetoggle",_),n[u].shownByInterest=!1,!$(n))){try{n.showPopover({source:e})}catch{}n[u].shownByInterest=$(n)}if(h.add(e),e.classList.add("interest-source"),n.classList.add("interest-target"),H(n)||e.setAttribute("aria-expanded","true"),"none"===getComputedStyle(e).anchorName&&"auto"===getComputedStyle(n).positionAnchor){const t=`--interest-anchor-${Math.random().toString(36).substring(2)}`;e.style.anchorName=t,n.style.positionAnchor=t,o.anchorName=t}break;default:throw new Error("Invalid state")}return!0}(e,r,o)}return function(e,{force:t=!1,closePopovers:r=!0}={}){const o=e[c];if(clearTimeout(o.gainedTimer),clearTimeout(o.lostTimer),o.state===w)return!0;const s=o.target,i=s.dispatchEvent(new InterestEvent(n,{source:e,cancelable:!t}));if(!i)return!1;const a=s[u],l=r&&a?.invoker===e&&a.shownByInterest;D(e),l&&$(s)&&function(e,t){const n=e[c],r=t.contains(document.activeElement);r&&(n.suppressNextFocusInterest=!0);try{t.hidePopover()}catch{}r&&(n.suppressNextFocusInterest=!1)}(e,s);return!0}(e,s)}function S(e){const t=1e3*O(e,o);if(!M(t))return;const n=e[c];n.clearLostTask();const r=n.target;n.lostTimer=setTimeout(()=>{k(e,r,w)},t)}function F(e){const t=e[u]?.invoker||null;if(!t)return null;const n=t[c];return n&&n.state!==w&&n.target===e&&I(t)===e?t:null}function I(t){if(!t.hasAttribute(e)||!t.isConnected||!function(e){if(e instanceof HTMLButtonElement)return!e.matches(":disabled");if(e instanceof HTMLAnchorElement||e instanceof HTMLAreaElement)return e.hasAttribute("href");if(window.SVGAElement&&e instanceof SVGAElement)return e.hasAttribute("href")||e.hasAttributeNS(p,"href");return!1}(t))return null;const n=C(t);return n&&n.isConnected?n:null}function C(t){const n=t.getAttribute(e);if(null===n)return null;const r=t[m];if(r&&""===n)return function(e,t){const n=P(e);let r=P(t);for(;r;){if(r===n)return!0;r=r instanceof ShadowRoot?P(r.host):null}return!1}(r,t)?r:null;if(""===n)return null;const o=P(t);return"function"==typeof o.getElementById?o.getElementById(n):null}function $(e){try{return e.matches(":popover-open")}catch{return!1}}function _(e){if("closed"!==e.newState)return;const t=e.currentTarget,n=F(t);if(n){if(t.contains(document.activeElement)){const e=n[c];e.suppressNextFocusInterest=!0,setTimeout(()=>{e.suppressNextFocusInterest=!1},0)}k(n,t,w,{closePopovers:!1})}}function M(e){return e>=0&&e<=2147483647}function B(e){const t=String(e).trim(),n=t.match(/^([\d.]+(?:e[+-]?\d+)?)s$/i);if(n)return parseFloat(n[1]);const r=t.match(/^([\d.]+(?:e[+-]?\d+)?)ms$/i);return r?parseFloat(r[1])/1e3:/\b(infinity|nan)\b/i.test(t)?1/0:parseFloat(t)||0}function O(e,t){const n=getComputedStyle(e),o=n.getPropertyValue(t).trim();if("normal"!==o.toLowerCase())return B(o);const i=n.getPropertyValue(s).trim();if(i&&"normal"!==i.toLowerCase()){const e=i.split(/\s+/).filter(e=>e.length>0);if(e.length>0){const n=e[0],o=e.length>1?e[1]:n;let s;if(s=t===r?n:o,"normal"!==s.toLowerCase())return B(s)}}return t===r?.25:.15}function D(e){const t=e[c];if(!t)return;if(clearTimeout(t.gainedTimer),clearTimeout(t.lostTimer),t.state===w)return;const n=t.target;h.delete(e),e.classList.remove("interest-source"),n&&(n[u]?.invoker===e&&(n.removeEventListener("beforetoggle",_),n[u]=null,n.classList.remove("interest-target")),H(n)||e.setAttribute("aria-expanded","false")),t.anchorName&&(e.style.anchorName="",n&&(n.style.positionAnchor=""),t.anchorName=null),t.state=w,t.target=null}const V=["a[href]","area[href]","input:not([disabled])","select:not([disabled])","textarea:not([disabled])","button:not([disabled])","iframe","object","embed","[contenteditable]",'[tabindex]:not([tabindex="-1"])'].join(",");function H(e){if("hint"!==e.getAttribute("popover")?.toLowerCase())return!1;if(e.querySelector(V))return!1;if(e.querySelector("h1,h2,h3,h4,h5,h6,ul,ol,li,table,nav,header,footer,main,aside,article,section,form,blockquote,details,summary,dialog"))return!1;const t=e.querySelectorAll("[role]");for(const e of t){const t=e.getAttribute("role").toLowerCase();if(!["presentation","none","generic","image"].includes(t))return!1}return!0}function G(e){return e?e.replace(/\s+/g," ").trim():""}function j(e,t=!1){if(e.nodeType===Node.TEXT_NODE)return e.data;if(e.nodeType!==Node.ELEMENT_NODE)return"";if(!t&&(e.hasAttribute("hidden")||"true"===e.getAttribute("aria-hidden")||"script"===e.localName||"style"===e.localName))return"";const n=e.getAttribute("aria-label");if(n)return n;if("img"===e.localName||"area"===e.localName)return e.getAttribute("alt")||"";let r="";for(const t of e.childNodes)r+=j(t);return r}function q(e,t){if(t.id)if(H(t)){if((e.getAttribute("aria-labelledby")||"").trim().split(/\s+/).includes(t.id))return;const n=function(e){const t=e.getAttribute("aria-labelledby");if(t){const n=P(e);if("function"==typeof n.getElementById){const e=[];for(const r of t.trim().split(/\s+/)){const t=r?n.getElementById(r):null;t&&e.push(G(j(t,!0)))}const r=G(e.join(" "));if(r)return r}}const n=G(e.getAttribute("aria-label"));if(n)return n;if(e.labels?.length){const t=G([...e.labels].map(e=>j(e,!0)).join(" "));if(t)return t}return G(j(e,!0))||G(e.getAttribute("title"))}(e),r=G(j(t,!0));n?r&&r!==n&&!e.hasAttribute("aria-describedby")&&e.setAttribute("aria-describedby",t.id):r&&e.setAttribute("aria-labelledby",t.id)}else e.hasAttribute("aria-details")||e.setAttribute("aria-details",t.id),e.setAttribute("aria-expanded","false"),t.hasAttribute("role")||t.setAttribute("role","tooltip")}function z(e){e[c]||(e[c]={state:w,target:null,a11yTarget:null,gainedTimer:null,lostTimer:null,longPressTimer:null,suppressNextFocusInterest:!1,clearGainedTask(){clearTimeout(this.gainedTimer)},clearLostTask(){clearTimeout(this.lostTimer)}});const t=I(e);t&&e[c].a11yTarget!==t&&(e[c].a11yTarget=t,q(e,t))}function R(e){if(e[f])return e[f];if(e.assignedSlot)return e.assignedSlot;if(e.parentElement)return e.parentElement;const t=e.parentNode;return t instanceof ShadowRoot?t.host:null}function U(e){const t=new Set;if(0===h.size)return t;const n=e=>{const r=F(e);r&&!t.has(r)&&(t.add(r),n(r));const o=R(e);o&&!t.has(o)&&n(o)};return n(e),t}function X(e,t){if(y)return;if(!e.isConnected)return;const n=I(e);n&&z(e);const o=e[c];if(t===A||t===N){let s=!1;o&&(o.clearLostTask(),s=t===N&&o.suppressNextFocusInterest,o.suppressNextFocusInterest=!1);for(const t of U(e))t[c].clearLostTask();n&&!s&&o.state===w&&function(e,t){const n=I(e);if(!n)return;const o=1e3*O(e,r);M(o)&&(e[c].clearGainedTask(),e[c].gainedTimer=setTimeout(()=>{k(e,n,t)},o))}(e,v)}else if(o&&(o.clearGainedTask(),o.state===v&&S(e)),t===x||!e.matches(":hover"))for(const t of U(e))S(t)}function J(e){return e instanceof HTMLElement&&"area"!==e.localName&&!!e.parentNode&&!!I(e)}function K(e){const t=getComputedStyle(e).getPropertyValue(i).trim();return t&&"none"!==t&&"normal"!==t?t:null}function Q(){const e=this[f];e&&k(e,I(e),T)}function W(e,t){let n=e[d];t?(n||(n=e.ownerDocument.createElement("span"),n.className=l,n.setAttribute("aria-hidden","true"),n[f]=e,n.addEventListener("click",Q),e[d]=n,b.add(e)),n.style.getPropertyValue(a)!==t&&n.style.setProperty(a,t),e.nextSibling!==n&&e.after(n)):n&&(n.remove(),e[d]=null,b.delete(e))}function Y(t){const n=[];for(const r of t){let t=null;const o=I(r);o?(g.delete(r),J(r)&&(t=K(r))):r.isConnected&&r.hasAttribute(e)?g.add(r):g.delete(r),n.push([r,o,t])}for(const[e,t,r]of n)t&&z(e),W(e,r)}function Z(t){const n=new Set;let r=!1;const o=t=>{if(t.nodeType===Node.ELEMENT_NODE&&!t[f]){t.hasAttribute(e)&&n.add(t);for(const r of t.querySelectorAll(`[${e}]`))n.add(r)}};for(const s of t){if("childList"===s.type){for(const e of s.addedNodes)e.nodeType!==Node.ELEMENT_NODE||e[f]||(r=!0,o(e));continue}const t=s.target;switch(s.attributeName){case e:null!==s.oldValue&&D(t),""!==t.getAttribute(e)&&(t[m]=null),n.add(t);break;case"id":r=!0;break;default:o(t)}}for(const e of[...h]){const t=e[c].target;e.isConnected&&t&&t.isConnected||D(e)}if(r)for(const e of g)n.add(e);for(const e of[...b])n.has(e)||(J(e)?e.nextSibling!==e[d]&&e.after(e[d]):W(e,null));Y(n)}function ee(){!function(){const t=document.createElement("style");t.textContent=`@property ${r} {syntax: "normal | <time>"; inherits: false; initial-value: normal;}\n      @property ${o} {syntax: "normal | <time>"; inherits: false; initial-value: normal;}\n      @property ${s} {syntax: "*"; inherits: false;}\n      @property ${i} {syntax: "*"; inherits: false;}`,document.head.appendChild(t);const n=`span.${l}[aria-hidden]`,u=document.createElement("style");u.textContent=`:where(button[${e}]) {\n        -webkit-user-select: none;\n        user-select: none;\n      }\n      :where(${n}) {\n        display: inline-block;\n        vertical-align: middle;\n        color: inherit;\n        background-color: transparent;\n        box-sizing: border-box;\n        min-inline-size: 24px;\n        min-block-size: 24px;\n        min-block-size: max(24px, 1lh);\n        align-content: center;\n        text-align: center;\n        -webkit-user-select: none;\n        user-select: none;\n        cursor: help;\n      }\n      :where(${n}:hover) {\n        background-color: color-mix(in oklab, currentColor 10%, transparent);\n      }\n      :where(${n}:active) {\n        background-color: color-mix(in oklab, currentColor 20%, transparent);\n      }\n      :where(${n})::before {\n        content: var(${a});\n      }`,document.head.prepend(u),document[c]={globalPropsStyle:t,uaStyle:u}}(),function(){const e=(e,t)=>{const n=e.composedPath(),r=n.length?n[0]:e.target;if(r instanceof Element)for(let e=r;e;e=R(e))X(e,t)},t=e=>{"touch"!==e.pointerType&&(y=!1)};document.body.addEventListener("pointerover",t),document.body.addEventListener("pointerdown",t),document.body.addEventListener("mouseover",t=>e(t,A)),document.body.addEventListener("mouseout",t=>e(t,L)),document.body.addEventListener("focusin",t=>e(t,N)),document.body.addEventListener("focusout",t=>e(t,x)),document.body.addEventListener("keydown",e=>{y=!1,"Escape"!==e.key||e.defaultPrevented||[...h].reverse().forEach(e=>{k(e,e[c].target,w,{force:!0})})});const n=/iPad|iPhone|iPod/.test(navigator.userAgent);document.body.addEventListener("touchstart",e=>{y=!0;const t=e.target.closest("button[interestfor]");t&&(z(t),t[c].longPressActive=!1,t[c].longPressTimer=setTimeout(()=>{t[c].state===w&&(n?t[c].longPressActive=!0:k(t,I(t),T)),t[c].longPressTimer=null},500))});const r=e=>{const t=e.target.closest("button[interestfor]");t&&t[c]&&(clearTimeout(t[c].longPressTimer),t[c].longPressTimer=null,t[c].longPressActive=!1)};document.body.addEventListener("touchmove",r),document.body.addEventListener("touchend",e=>{const t=e.target.closest("button[interestfor]"),n=t?.[c]?.longPressActive;r(e),n&&(e.cancelable&&e.preventDefault(),t[c].state===w&&k(t,I(t),T))},{passive:!1})}(),new MutationObserver(Z).observe(document,{childList:!0,subtree:!0,attributes:!0,attributeOldValue:!0,attributeFilter:[e,"id","href","disabled"]}),Y(document.querySelectorAll(`[${e}]`)),console.log(`interestfor polyfill installed (native: ${E}).`)}!function(){const t={configurable:!0,enumerable:!0,get(){return C(this)},set(t){if(null==t)this[m]=null,this.removeAttribute(e);else{if(!(t instanceof Element))throw new TypeError("Failed to set the 'interestForElement' property: The provided value is not of type 'Element'.");this[m]=t,this.setAttribute(e,"")}}};[window.HTMLButtonElement,window.HTMLAnchorElement,window.HTMLAreaElement,window.SVGAElement].forEach(e=>{!e||Object.prototype.hasOwnProperty.call(e.prototype,"interestForElement")&&!window.interestForUsePolyfillAlways||Object.defineProperty(e.prototype,"interestForElement",t)})}(),"complete"===document.readyState?ee():window.addEventListener("load",ee)}();
+!function(){const e="interestfor",t="interest",n="loseinterest",r="--interest-delay-start",o="--interest-delay-end",s="--interest-delay",i="--interest-button-content",a="--interest-button-polyfill-content",l="interest-button",c="__interestForData",u="__interestForTargetData",d="__interestForButton",f="__interestForButtonInvoker",m="__interestForExplicitTarget",p="http://www.w3.org/1999/xlink",h=new Set,g=new Set,b=new Set;let y=!1;if(window.interestForPolyfillInstalled)return;window.interestForPolyfillInstalled=!0;const E=HTMLButtonElement.prototype.hasOwnProperty("interestForElement");if(E&&!window.interestForUsePolyfillAlways)return;if(E){const e=e=>{e.isTrusted&&(e.preventDefault(),e.stopImmediatePropagation())};document.addEventListener(t,e,{capture:!0}),document.addEventListener(n,e,{capture:!0})}window.InterestEvent&&!window.interestForUsePolyfillAlways||(window.InterestEvent=class extends Event{#e;constructor(e,t={}){super(e,t);const{source:n}=t;if(null!=n&&!(n instanceof Element))throw new TypeError("source must be an element");this.#e=n}get[Symbol.toStringTag](){return"InterestEvent"}get source(){const e=this.#e;if(!e)return null;const t=S(e);return t!==S(this.target||document)?t.host:e}});const v="none",w="full",T="explicit",A="hover",L="dehover",x="focus",N="blur";function S(e){return e&&"function"==typeof e.getRootNode?e.getRootNode():e&&e.parentNode?S(e.parentNode):e}function P(e,r,o,s={}){if(!e||!r)return!1;if(!e.isConnected||I(e)!==r||o===v&&F(r)!==e)return!1;if(o!==v){X(e),e[c].state!==v&&e[c].target!==r&&H(e);const n=F(r);if(n){if(n===e)return o===T&&(n[c].state=T),n[c].clearLostTask(),!1;if(!P(n,r,v))return!1;if(!e.isConnected||I(e)!==r)return!1}return function(e,n,r){const o=e[c];switch(r){case w:case T:if(o.state!==v)throw new Error("Invalid state");if(!n.dispatchEvent(new InterestEvent(t,{source:e,cancelable:!0})))return!1;if(o.state=r,o.target=n,o.clearGainedTask(),n[u]||(n[u]={}),n[u].invoker=e,n.hasAttribute("popover")&&(n.addEventListener("beforetoggle",M),n[u].shownByInterest=!1,!$(n))){try{n.showPopover({source:e})}catch{}n[u].shownByInterest=$(n)}if(h.add(e),e.classList.add("interest-source"),n.classList.add("interest-target"),j(e),"none"===getComputedStyle(e).anchorName&&"auto"===getComputedStyle(n).positionAnchor){const t=`--interest-anchor-${Math.random().toString(36).substring(2)}`;e.style.anchorName=t,n.style.positionAnchor=t,o.anchorName=t}break;default:throw new Error("Invalid state")}return!0}(e,r,o)}return function(e,{force:t=!1,closePopovers:r=!0}={}){const o=e[c];if(clearTimeout(o.gainedTimer),clearTimeout(o.lostTimer),o.state===v)return!0;const s=o.target,i=s.dispatchEvent(new InterestEvent(n,{source:e,cancelable:!t}));if(!i)return!1;const a=s[u],l=r&&a?.invoker===e&&a.shownByInterest;H(e),l&&$(s)&&(!function(e,t){const n=e[c],r=t.contains(document.activeElement);r&&(n.suppressNextFocusInterest=!0);try{t.hidePopover()}catch{}r&&(n.suppressNextFocusInterest=!1)}(e,s),j(e));return!0}(e,s)}function k(e){const t=1e3*V(e,o);if(!_(t))return;const n=e[c];n.clearLostTask();const r=n.target;n.lostTimer=setTimeout(()=>{P(e,r,v)},t)}function F(e){const t=e[u]?.invoker||null;if(!t)return null;const n=t[c];return n&&n.state!==v&&n.target===e&&I(t)===e?t:null}function I(t){if(!t.hasAttribute(e)||!t.isConnected||!function(e){if(e instanceof HTMLButtonElement)return!e.matches(":disabled");if(e instanceof HTMLAnchorElement||e instanceof HTMLAreaElement)return e.hasAttribute("href");if(window.SVGAElement&&e instanceof SVGAElement)return e.hasAttribute("href")||e.hasAttributeNS(p,"href");return!1}(t))return null;const n=C(t);return n&&n.isConnected?n:null}function C(t){const n=t.getAttribute(e);if(null===n)return null;const r=t[m];if(r&&""===n)return function(e,t){const n=S(e);let r=S(t);for(;r;){if(r===n)return!0;r=r instanceof ShadowRoot?S(r.host):null}return!1}(r,t)?r:null;if(""===n)return null;const o=S(t);return"function"==typeof o.getElementById?o.getElementById(n):null}function $(e){try{return e.matches(":popover-open")}catch{return!1}}function M(e){if("closed"!==e.newState)return;const t=e.currentTarget,n=F(t);if(n){if(t.contains(document.activeElement)){const e=n[c];e.suppressNextFocusInterest=!0,setTimeout(()=>{e.suppressNextFocusInterest=!1},0)}P(n,t,v,{closePopovers:!1})}}function _(e){return e>=0&&e<=2147483647}function B(e){const t=String(e).trim(),n=t.match(/^([\d.]+(?:e[+-]?\d+)?)s$/i);if(n)return parseFloat(n[1]);const r=t.match(/^([\d.]+(?:e[+-]?\d+)?)ms$/i);return r?parseFloat(r[1])/1e3:/\b(infinity|nan)\b/i.test(t)?1/0:parseFloat(t)||0}function V(e,t){const n=getComputedStyle(e),o=n.getPropertyValue(t).trim();if("normal"!==o.toLowerCase())return B(o);const i=n.getPropertyValue(s).trim();if(i&&"normal"!==i.toLowerCase()){const e=i.split(/\s+/).filter(e=>e.length>0);if(e.length>0){const n=e[0],o=e.length>1?e[1]:n;let s;if(s=t===r?n:o,"normal"!==s.toLowerCase())return B(s)}}return t===r?.25:.15}function H(e){const t=e[c];if(!t)return;if(clearTimeout(t.gainedTimer),clearTimeout(t.lostTimer),t.state===v)return;const n=t.target;h.delete(e),e.classList.remove("interest-source"),n&&n[u]?.invoker===e&&(n.removeEventListener("beforetoggle",M),n[u]=null,n.classList.remove("interest-target")),t.anchorName&&(e.style.anchorName="",n&&(n.style.positionAnchor=""),t.anchorName=null),t.state=v,t.target=null,j(e)}const O=["a[href]","area[href]","input:not([disabled])","select:not([disabled])","textarea:not([disabled])","button:not([disabled])","iframe","object","embed","[contenteditable]",'[tabindex]:not([tabindex="-1"])'].join(",");function D(e){return e?e.replace(/\s+/g," ").trim():""}function G(e,t=!1){if(e.nodeType===Node.TEXT_NODE)return e.data;if(e.nodeType!==Node.ELEMENT_NODE)return"";if(!t&&(e.hasAttribute("hidden")||"true"===e.getAttribute("aria-hidden")||"script"===e.localName||"style"===e.localName))return"";const n=e.getAttribute("aria-label");if(n)return n;if("img"===e.localName||"area"===e.localName)return e.getAttribute("alt")||"";let r="";for(const t of e.childNodes)r+=G(t);return r}function q(e,t,n){return(e.getAttribute(t)||"").trim().split(/\s+/).includes(n)}function j(e){const t=e[c];if(!t||!t.managesAriaExpanded||!t.a11yTarget)return;const n=t.a11yTarget,r=n.hasAttribute("popover")?$(n):t.state!==v&&t.target===n;e.setAttribute("aria-expanded",r?"true":"false")}function z(e,t){var n;if(t.id)if(function(e){if(e.querySelector(O))return!1;if(e.querySelector("h1,h2,h3,h4,h5,h6,ul,ol,li,table,nav,header,footer,main,aside,article,section,form,blockquote,details,summary,dialog"))return!1;const t=e.querySelectorAll("[role]");for(const e of t){const t=e.getAttribute("role").toLowerCase();if(!["presentation","none","generic","image","tooltip","paragraph"].includes(t))return!1}return!0}(t)){if(q(e,"aria-labelledby",t.id))return;const n=function(e){const t=e.getAttribute("aria-labelledby");if(t){const n=S(e);if("function"==typeof n.getElementById){const e=[];for(const r of t.trim().split(/\s+/)){const t=r?n.getElementById(r):null;t&&e.push(D(G(t,!0)))}const r=D(e.join(" "));if(r)return r}}const n=D(e.getAttribute("aria-label"));if(n)return n;if(e.labels?.length){const t=D([...e.labels].map(e=>G(e,!0)).join(" "));if(t)return t}return D(G(e,!0))||D(e.getAttribute("title"))}(e),r=D(G(t,!0));n?!r||r===n||e.hasAttribute("aria-describedby")||e.hasAttribute("aria-expanded")||function(e,t){const n=(n,r)=>r in e?e[r]===t:!!t.id&&e.getAttribute(n)===t.id;return n("popovertarget","popoverTargetElement")||n("commandfor","commandForElement")}(e,t)||e.setAttribute("aria-describedby",t.id):r&&e.setAttribute("aria-labelledby",t.id)}else{const r=e[c],o=q(e,"aria-describedby",t.id)||q(e,"aria-labelledby",t.id);o||e.hasAttribute("aria-details")||e.setAttribute("aria-details",t.id),r.managesAriaExpanded=!(o||e.hasAttribute("aria-expanded")||(n=e,(n instanceof HTMLAnchorElement||n instanceof HTMLAreaElement||window.SVGAElement&&n instanceof SVGAElement)&&!t.querySelector(O))),r.managesAriaExpanded&&(t.addEventListener("toggle",r.onTargetToggle),j(e)),t.hasAttribute("role")||t.setAttribute("role","tooltip")}}function X(e){e[c]||(e[c]={state:v,target:null,a11yTarget:null,managesAriaExpanded:!1,onTargetToggle:()=>j(e),gainedTimer:null,lostTimer:null,longPressTimer:null,suppressNextFocusInterest:!1,clearGainedTask(){clearTimeout(this.gainedTimer)},clearLostTask(){clearTimeout(this.lostTimer)}});const t=e[c],n=I(e);n&&t.a11yTarget!==n&&(t.managesAriaExpanded&&(t.a11yTarget?.removeEventListener("toggle",t.onTargetToggle),e.removeAttribute("aria-expanded"),t.managesAriaExpanded=!1),t.a11yTarget=n,z(e,n))}function R(e){if(e[f])return e[f];if(e.assignedSlot)return e.assignedSlot;if(e.parentElement)return e.parentElement;const t=e.parentNode;return t instanceof ShadowRoot?t.host:null}function Y(e){const t=new Set;if(0===h.size)return t;const n=e=>{const r=F(e);r&&!t.has(r)&&(t.add(r),n(r));const o=R(e);o&&!t.has(o)&&n(o)};return n(e),t}function U(e,t){if(y)return;if(!e.isConnected)return;const n=I(e);n&&X(e);const o=e[c];if(t===A||t===x){let s=!1;o&&(o.clearLostTask(),s=t===x&&o.suppressNextFocusInterest,o.suppressNextFocusInterest=!1);for(const t of Y(e))t[c].clearLostTask();n&&!s&&o.state===v&&function(e,t){const n=I(e);if(!n)return;const o=1e3*V(e,r);_(o)&&(e[c].clearGainedTask(),e[c].gainedTimer=setTimeout(()=>{P(e,n,t)},o))}(e,w)}else if(o&&(o.clearGainedTask(),o.state===w&&k(e)),t===N||!e.matches(":hover"))for(const t of Y(e))k(t)}function J(e){return e instanceof HTMLElement&&"area"!==e.localName&&!!e.parentNode&&!!I(e)}function K(e){const t=getComputedStyle(e).getPropertyValue(i).trim();return t&&"none"!==t&&"normal"!==t?t:null}function Q(){const e=this[f];e&&P(e,I(e),T)}function W(e,t){let n=e[d];t?(n||(n=e.ownerDocument.createElement("span"),n.className=l,n.setAttribute("aria-hidden","true"),n[f]=e,n.addEventListener("click",Q),e[d]=n,g.add(e)),n.style.getPropertyValue(a)!==t&&n.style.setProperty(a,t),e.nextSibling!==n&&e.after(n)):n&&(n.remove(),e[d]=null,g.delete(e))}function Z(t){const n=[];for(const r of t){let t=null;const o=I(r);o?(b.delete(r),J(r)&&(t=K(r))):r.isConnected&&r.hasAttribute(e)?b.add(r):b.delete(r),n.push([r,o,t])}for(const[e,t,r]of n)t&&X(e),W(e,r)}function ee(t){const n=new Set;let r=!1;const o=t=>{if(t.nodeType===Node.ELEMENT_NODE&&!t[f]){t.hasAttribute(e)&&n.add(t);for(const r of t.querySelectorAll(`[${e}]`))n.add(r)}};for(const s of t){if("childList"===s.type){for(const e of s.addedNodes)e.nodeType!==Node.ELEMENT_NODE||e[f]||(r=!0,o(e));continue}const t=s.target;switch(s.attributeName){case e:null!==s.oldValue&&H(t),""!==t.getAttribute(e)&&(t[m]=null),n.add(t);break;case"id":r=!0;break;default:o(t)}}for(const e of[...h]){const t=e[c].target;e.isConnected&&t&&t.isConnected||H(e)}if(r)for(const e of b)n.add(e);for(const e of[...g])n.has(e)||(J(e)?e.nextSibling!==e[d]&&e.after(e[d]):W(e,null));Z(n)}function te(){!function(){const t=document.createElement("style");t.textContent=`@property ${r} {syntax: "normal | <time>"; inherits: false; initial-value: normal;}\n      @property ${o} {syntax: "normal | <time>"; inherits: false; initial-value: normal;}\n      @property ${s} {syntax: "*"; inherits: false;}\n      @property ${i} {syntax: "*"; inherits: false;}`,document.head.appendChild(t);const n=`span.${l}[aria-hidden]`,u=document.createElement("style");u.textContent=`:where(button[${e}]) {\n        -webkit-user-select: none;\n        user-select: none;\n      }\n      :where(${n}) {\n        display: inline-block;\n        vertical-align: middle;\n        color: inherit;\n        background-color: transparent;\n        box-sizing: border-box;\n        min-inline-size: 24px;\n        min-block-size: 24px;\n        min-block-size: max(24px, 1lh);\n        align-content: center;\n        text-align: center;\n        -webkit-user-select: none;\n        user-select: none;\n        cursor: help;\n      }\n      :where(${n}:hover) {\n        background-color: color-mix(in oklab, currentColor 10%, transparent);\n      }\n      :where(${n}:active) {\n        background-color: color-mix(in oklab, currentColor 20%, transparent);\n      }\n      :where(${n})::before {\n        content: var(${a});\n      }`,document.head.prepend(u),document[c]={globalPropsStyle:t,uaStyle:u}}(),function(){const e=(e,t)=>{const n=e.composedPath(),r=n.length?n[0]:e.target;if(r instanceof Element)for(let e=r;e;e=R(e))U(e,t)},t=e=>{"touch"!==e.pointerType&&(y=!1)};document.addEventListener("pointerover",t),document.addEventListener("pointerdown",t),document.addEventListener("mouseover",t=>e(t,A)),document.addEventListener("mouseout",t=>e(t,L)),document.addEventListener("focusin",t=>e(t,x)),document.addEventListener("focusout",t=>e(t,N)),document.addEventListener("keydown",e=>{y=!1,"Escape"!==e.key||e.defaultPrevented||[...h].reverse().forEach(e=>{P(e,e[c].target,v,{force:!0})})});const n=()=>/iPad|iPhone|iPod/.test(navigator.userAgent);document.addEventListener("touchstart",e=>{y=!0;const t=e.target.closest("button[interestfor]");if(t){X(t);const r=n();r&&1===e.touches?.length&&(t[c].touchStartX=e.touches[0].clientX,t[c].touchStartY=e.touches[0].clientY),t[c].longPressActive=!1,t[c].longPressTimer=setTimeout(()=>{t[c].state===v&&(r?t[c].longPressActive=!0:P(t,I(t),T)),t[c].longPressTimer=null},500)}});const r=e=>{const t=e.target.closest("button[interestfor]");if(t&&t[c]){if(n()&&"touchmove"===e.type&&1===e.touches?.length){const n=e.touches[0].clientX-t[c].touchStartX,r=e.touches[0].clientY-t[c].touchStartY;if(Math.hypot(n,r)<=10)return}clearTimeout(t[c].longPressTimer),t[c].longPressTimer=null,t[c].longPressActive=!1}};document.addEventListener("touchmove",r),document.addEventListener("touchend",e=>{const t=e.target.closest("button[interestfor]"),n=t?.[c]?.longPressActive;r(e),n&&(e.cancelable&&e.preventDefault(),t[c].state===v&&P(t,I(t),T))},{passive:!1})}(),new MutationObserver(ee).observe(document,{childList:!0,subtree:!0,attributes:!0,attributeOldValue:!0,attributeFilter:[e,"id","href","disabled"]}),Z(document.querySelectorAll(`[${e}]`)),console.log(`interestfor polyfill installed (native: ${E}).`)}!function(){const t={configurable:!0,enumerable:!0,get(){return C(this)},set(t){if(null==t)this[m]=null,this.removeAttribute(e);else{if(!(t instanceof Element))throw new TypeError("Failed to set the 'interestForElement' property: The provided value is not of type 'Element'.");this[m]=t,this.setAttribute(e,"")}}};[window.HTMLButtonElement,window.HTMLAnchorElement,window.HTMLAreaElement,window.SVGAElement].forEach(e=>{!e||Object.prototype.hasOwnProperty.call(e.prototype,"interestForElement")&&!window.interestForUsePolyfillAlways||Object.defineProperty(e.prototype,"interestForElement",t)})}(),"complete"===document.readyState?te():window.addEventListener("load",te)}();

package/test/interest_test_matrix.html

@@ -0,0 +1,298 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Interest Invokers, Command Invokers &amp; Hint Popovers Test Page</title>
+  <style>
+    body { font-family: sans-serif; line-height: 1.6; margin: 16px; }
+    section { border-bottom: 1px solid #ccc; padding: 12px 0; }
+    h2 { margin: 0 0 8px; font-size: 1rem; }
+    /* Minimal implicit-anchor offset so concurrent popovers do not completely occlude triggers */
+    [popover] { inset: auto; margin: 4px; position-area: block-end; }
+    [popover="hint"] { position-area: inline-end; }
+  </style>
+  <script src="../src/interestfor.js"></script>
+</head>
+<body>
+
+  <h1>Invoker &amp; Popover Permutations Test Suite</h1>
+
+  <!-- ===================================================================== -->
+  <!-- 1. Interest invokers pointing to plain hints                          -->
+  <!-- ===================================================================== -->
+  <section id="test-1">
+    <h2>1. Plain Hints (<code>interestfor</code> + non-interactive content)</h2>
+
+    <button id="btn-plain-text" interestfor="hint-plain-text">
+      1a. Plain text hint
+    </button>
+    <div id="hint-plain-text" popover="hint">
+      Basic plain text inside a hint popover.
+    </div>
+
+    <button id="btn-plain-p" interestfor="hint-plain-p">
+      1b. Paragraph hint (&lt;p&gt; / role="paragraph")
+    </button>
+    <div id="hint-plain-p" popover="hint">
+      <p role="paragraph">Paragraph node with explicit role="paragraph" inside a plain hint.</p>
+      <p>Second standard &lt;p&gt; element with implicit paragraph semantics.</p>
+    </div>
+
+    <button id="btn-plain-tooltip" interestfor="hint-plain-tooltip">
+      1c. Explicit role="tooltip" plain hint
+    </button>
+    <div id="hint-plain-tooltip" popover="hint" role="tooltip">
+      Plain hint with explicit role="tooltip".
+    </div>
+  </section>
+
+  <!-- ===================================================================== -->
+  <!-- 2. Interest invokers pointing to rich hints                           -->
+  <!-- ===================================================================== -->
+  <section id="test-2">
+    <h2>2. Rich Hints (<code>interestfor</code> + interactive/structured popovers)</h2>
+
+    <!-- Adjacent in DOM: tests whether aria-details is omitted when popover is next sibling -->
+    <button id="btn-rich-adjacent" interestfor="hint-rich-adjacent">
+      2a. Rich hint (DOM-adjacent)
+    </button>
+    <div id="hint-rich-adjacent" popover="hint">
+      <h3>Rich Hovercard (Adjacent)</h3>
+      <p>Contains interactive elements to trigger rich-hint semantics.</p>
+      <a href="#test-2">Explore details</a>
+      <button type="button">Action inside rich hint</button>
+    </div>
+
+    <!-- Non-adjacent in DOM: tests automatic aria-details + aria-expanded wiring -->
+    <button id="btn-rich-separated" interestfor="hint-rich-separated">
+      2b. Rich hint (Non-adjacent in DOM)
+    </button>
+
+    <span>Spacer sibling between trigger and target popover.</span>
+
+    <div id="hint-rich-separated" popover="hint">
+      <h3>Rich Hovercard (Separated in DOM)</h3>
+      <p>Tests browser-managed <code>aria-expanded</code> and <code>aria-details</code> relationships.</p>
+      <input type="text" placeholder="Focusable input in rich hint">
+      <button type="button">Save</button>
+    </div>
+  </section>
+
+  <!-- ===================================================================== -->
+  <!-- 3. Dual-purpose button invokers                                       -->
+  <!-- ===================================================================== -->
+  <section id="test-3">
+    <h2>3. Dual-Purpose Button Invokers (<code>interestfor</code> + <code>commandfor</code> / <code>popovertarget</code>)</h2>
+
+    <!-- 3a. interestfor (hint) + commandfor (secondary auto popover) -->
+    <button id="btn-dual-command-popover"
+            interestfor="hint-dual-1"
+            commandfor="popover-secondary-action"
+            command="toggle-popover">
+      3a. Hover for hint / Click to toggle secondary popover (commandfor)
+    </button>
+    <div id="hint-dual-1" popover="hint" role="tooltip">
+      Preview tooltip via interestfor.
+    </div>
+    <div id="popover-secondary-action" popover="auto">
+      <p>Secondary action popover opened via <code>commandfor</code> + <code>command="toggle-popover"</code>.</p>
+      <button type="button">Inner control</button>
+    </div>
+
+    <!-- 3b. interestfor (hint) + commandfor (modal dialog) -->
+    <button id="btn-dual-command-dialog"
+            interestfor="hint-dual-2"
+            commandfor="dialog-action"
+            command="show-modal">
+      3b. Hover for hint / Click to open modal dialog (commandfor)
+    </button>
+    <div id="hint-dual-2" popover="hint" role="tooltip">
+      Opens modal dialog when activated.
+    </div>
+    <dialog id="dialog-action">
+      <p>Dialog opened via <code>commandfor="dialog-action" command="show-modal"</code>.</p>
+      <button commandfor="dialog-action" command="close">Close Dialog</button>
+    </dialog>
+
+    <!-- 3c. interestfor + commandfor pointing to the SAME popover (hover to preview, click to pin) -->
+    <button id="btn-dual-same-target"
+            interestfor="hint-shared-target"
+            commandfor="hint-shared-target"
+            command="show-popover">
+      3c. Same target: Hover to preview / Click to keep open
+    </button>
+    <div id="hint-shared-target" popover="hint">
+      <p>Shared rich hint target for both <code>interestfor</code> and <code>commandfor</code>.</p>
+      <button type="button">Interactive child</button>
+    </div>
+
+    <!-- 3d. interestfor + legacy popovertarget -->
+    <button id="btn-dual-popovertarget"
+            interestfor="hint-dual-3"
+            popovertarget="popover-legacy-target"
+            popovertargetaction="toggle">
+      3d. Hover for hint / Click via popovertarget
+    </button>
+    <div id="hint-dual-3" popover="hint" role="tooltip">
+      Hint on a button using popovertarget.
+    </div>
+    <div id="popover-legacy-target" popover="auto">
+      <p>Secondary popover controlled by <code>popovertarget</code>.</p>
+    </div>
+  </section>
+
+  <!-- ===================================================================== -->
+  <!-- 4. Nested interest invokers inside their own popover                  -->
+  <!-- ===================================================================== -->
+  <section id="test-4">
+    <h2>4. Nested Interest Invokers Inside Their Own Popover</h2>
+
+    <button id="btn-open-outer-rich" interestfor="popover-self-host" commandfor="popover-self-host" command="toggle-popover">
+      4a. Open / Interest Outer Rich Hint (#popover-self-host)
+    </button>
+
+    <div id="popover-self-host" popover="hint">
+      <h3>Outer Rich Hint (#popover-self-host)</h3>
+      <p>Contains an invoker pointing back to this enclosing popover, and another pointing to a second rich hint:</p>
+
+      <!-- Invoker placed INSIDE the very popover it controls -->
+      <button id="btn-self-nested" interestfor="popover-self-host">
+        4b. Self-referencing invoker inside #popover-self-host
+      </button>
+
+      <!-- Invoker inside #popover-self-host interacting with another rich hint -->
+      <button id="btn-nested-to-second-rich" interestfor="popover-nested-rich-2">
+        4c. Invoker inside #popover-self-host -&gt; #popover-nested-rich-2
+      </button>
+    </div>
+
+    <div id="popover-nested-rich-2" popover="hint">
+      <h3>Second Rich Hint (#popover-nested-rich-2)</h3>
+      <p>Triggered from inside #popover-self-host.</p>
+      <!-- Also includes a self-referencing invoker inside itself -->
+      <button id="btn-self-nested-2" interestfor="popover-nested-rich-2">
+        4d. Self-referencing invoker inside #popover-nested-rich-2
+      </button>
+      <a href="#test-4">Nested interactive link</a>
+    </div>
+  </section>
+
+  <!-- ===================================================================== -->
+  <!-- 5. Hyperlink interest invokers (<a href> + interestfor)               -->
+  <!-- ===================================================================== -->
+  <section id="test-5">
+    <h2>5. Hyperlink Interest Invokers (<code>&lt;a href&gt;</code> + <code>interestfor</code>)</h2>
+
+    <p>
+      Hover or focus the profile link for
+      <a id="link-rich-hovercard" href="#profile-destination" interestfor="hovercard-profile">@mfreed7</a>
+      or the documentation link for
+      <a id="link-plain-hint" href="#docs-destination" interestfor="hovercard-plain">Popover API Spec</a>.
+    </p>
+
+    <div id="hovercard-profile" popover="hint">
+      <h3>Mason (@mfreed7)</h3>
+      <p>Browser Engineer working on Blink / Open UI.</p>
+      <a href="#follow">Follow</a>
+      <button type="button">Message</button>
+    </div>
+
+    <div id="hovercard-plain" popover="hint" role="tooltip">
+      Plain tooltip preview for a standard navigable hyperlink.
+    </div>
+  </section>
+
+  <!-- ===================================================================== -->
+  <!-- 6. Author-defined ARIA states combined with interest invokers         -->
+  <!-- ===================================================================== -->
+  <section id="test-6">
+    <h2>6. Author-Defined ARIA States + <code>interestfor</code></h2>
+
+    <p id="author-desc">Author-supplied description text via aria-describedby.</p>
+    <div id="author-details">Author-supplied extra details node via aria-details.</div>
+
+    <!-- Explicit aria-expanded="false" and aria-describedby on a button pointing to a rich hint -->
+    <button id="btn-author-aria-false"
+            interestfor="hint-author-rich"
+            aria-expanded="false"
+            aria-describedby="author-desc">
+      6a. Button with explicit aria-expanded="false" + aria-describedby
+    </button>
+
+    <!-- Explicit aria-expanded="true" and aria-details on a button pointing to a rich hint -->
+    <button id="btn-author-aria-true"
+            interestfor="hint-author-rich"
+            aria-expanded="true"
+            aria-details="author-details">
+      6b. Button with explicit aria-expanded="true" + aria-details
+    </button>
+
+    <!-- Explicit aria-expanded and aria-describedby on a hyperlink invoker -->
+    <a id="link-author-aria"
+       href="#section-6"
+       interestfor="hint-author-plain"
+       aria-expanded="false"
+       aria-describedby="author-desc">
+      6c. Link with explicit aria-expanded="false" + aria-describedby
+    </a>
+
+    <div id="hint-author-rich" popover="hint">
+      <h3>Rich Hint Target for Author-Defined ARIA Triggers</h3>
+      <button type="button">Interactive Button</button>
+    </div>
+
+    <div id="hint-author-plain" popover="hint" role="tooltip">
+      Plain hint target for author-ARIA link trigger.
+    </div>
+  </section>
+
+  <!-- ===================================================================== -->
+  <!-- 7. Interest invokers combined with has-interest-for state             -->
+  <!-- ===================================================================== -->
+  <section id="test-7">
+    <h2>7. Interest Invokers + <code>has-interest-for</code> &amp; <code>aria-expanded</code></h2>
+
+    <!-- Boolean has-interest-for alongside primary disclosure aria-expanded="false" -->
+    <button id="btn-has-interest-collapsed"
+            interestfor="hint-has-interest-rich"
+            commandfor="panel-primary-disclosure"
+            command="toggle-popover"
+            has-interest-for
+            aria-expanded="false">
+      7a. Control with has-interest-for + aria-expanded="false" (Primary Collapsed)
+    </button>
+
+    <!-- Explicit ID/value has-interest-for alongside primary disclosure aria-expanded="true" -->
+    <button id="btn-has-interest-expanded"
+            interestfor="hint-has-interest-plain"
+            has-interest-for="hint-has-interest-plain"
+            aria-expanded="true">
+      7b. Control with has-interest-for="hint-has-interest-plain" + aria-expanded="true" (Primary Expanded)
+    </button>
+
+    <!-- Hyperlink with has-interest-for + aria-expanded -->
+    <a id="link-has-interest"
+       href="#section-7"
+       interestfor="hint-has-interest-rich"
+       has-interest-for
+       aria-expanded="false">
+      7c. Link with has-interest-for + aria-expanded="false"
+    </a>
+
+    <div id="hint-has-interest-rich" popover="hint">
+      <h3>Rich Hint on a <code>has-interest-for</code> Control</h3>
+      <p>Tests disambiguation between primary disclosure state and interest popover state.</p>
+      <button type="button">Hint Action</button>
+    </div>
+
+    <div id="hint-has-interest-plain" popover="hint" role="tooltip">
+      Plain hint on a control with has-interest-for and aria-expanded="true".
+    </div>
+
+    <div id="panel-primary-disclosure" popover="auto">
+      <p>Primary disclosure popover controlled by 7a.</p>
+    </div>
+  </section>
+
+</body>
+</html>

package/test/test.html

@@ -192,6 +192,191 @@ async function runTests() {
     assert_equals(invoker.getAttribute("aria-labelledby"), "delayed_target");
   });
 
+  await test("Plain vs. rich classification ignores popover type, and allows role=tooltip/paragraph", async () => {
+    const { invoker: autoInv, target: autoTip } = createPair({
+      invokerHTML: "Help",
+      popoverType: "auto",
+      targetHTML: "Plain text in an auto popover",
+    });
+    const { invoker: manualInv, target: manualTip } = createPair({
+      invokerHTML: "Help",
+      popoverType: "manual",
+      targetHTML: "Plain text in a manual popover",
+    });
+    const { invoker: roleInv, target: roleTip } = createPair({
+      invokerHTML: "Help",
+      popoverType: "hint",
+      targetHTML: '<div role="tooltip"><span role="paragraph">Some text</span></div>',
+    });
+    const { invoker: richAutoInv, target: richAutoTip } = createPair({
+      invokerHTML: "Help",
+      popoverType: "hint",
+      targetHTML: "<ul><li>Rich</li></ul>",
+    });
+    await nextTick();
+    for (const [inv, tip, label] of [
+      [autoInv, autoTip, "popover=auto"],
+      [manualInv, manualTip, "popover=manual"],
+      [roleInv, roleTip, "role=tooltip/paragraph"],
+    ]) {
+      assert_equals(inv.getAttribute("aria-describedby"), tip.id, `${label} -> aria-describedby`);
+      assert_equals(inv.getAttribute("aria-details"), null, `${label} -> no aria-details`);
+      assert_equals(inv.getAttribute("aria-expanded"), null, `${label} -> no aria-expanded`);
+    }
+    assert_equals(richAutoInv.getAttribute("aria-details"), richAutoTip.id, "rich hint popover -> aria-details");
+    assert_equals(richAutoInv.getAttribute("aria-expanded"), "false", "rich hint popover -> aria-expanded");
+  });
+
+  await test("Plain-hint toggletips (popovertarget, commandfor, author aria-expanded) don't get aria-describedby", async () => {
+    const targetId1 = "toggletip_1";
+    const { invoker: ptInv } = createPair({
+      targetId: targetId1,
+      invokerAttrs: { "aria-label": "More info", popovertarget: targetId1, popovertargetaction: "show" },
+      invokerHTML: "?",
+      targetHTML: "Some helpful text",
+    });
+    const targetId2 = "toggletip_2";
+    const { invoker: cfInv } = createPair({
+      targetId: targetId2,
+      invokerAttrs: { "aria-label": "More info", commandfor: targetId2, command: "show-popover" },
+      invokerHTML: "?",
+      targetHTML: "Some helpful text",
+    });
+    const { invoker: expInv } = createPair({
+      invokerAttrs: { "aria-label": "More info", "aria-expanded": "false" },
+      invokerHTML: "?",
+      targetHTML: "Some helpful text",
+    });
+    // Control: popovertarget pointing elsewhere still gets aria-describedby.
+    const other = document.createElement("div");
+    other.id = "toggletip_other";
+    other.setAttribute("popover", "auto");
+    sandbox.appendChild(other);
+    const { invoker: ctlInv, target: ctlTip } = createPair({
+      invokerAttrs: { "aria-label": "More info", popovertarget: other.id },
+      invokerHTML: "?",
+      targetHTML: "Some helpful text",
+    });
+    await nextTick();
+    assert_equals(ptInv.getAttribute("aria-describedby"), null, "popovertarget");
+    assert_equals(cfInv.getAttribute("aria-describedby"), null, "commandfor");
+    assert_equals(expInv.getAttribute("aria-describedby"), null, "author aria-expanded");
+    assert_equals(expInv.getAttribute("aria-expanded"), "false", "author aria-expanded unchanged");
+    assert_equals(ctlInv.getAttribute("aria-describedby"), ctlTip.id, "popovertarget to another element");
+  });
+
+  await test("Rich hint: author aria-expanded is preserved through interest changes", async () => {
+    const { invoker, target } = createPair({
+      invokerAttrs: { "aria-expanded": "true" },
+      targetHTML: '<a href="#">Rich</a>',
+    });
+    await nextTick();
+    assert_equals(invoker.getAttribute("aria-details"), target.id, "aria-details still added");
+    assert_equals(invoker.getAttribute("aria-expanded"), "true", "after init");
+    hover(invoker);
+    await wait(30);
+    assert_true(target.matches(":popover-open"), "popover opened");
+    dehover(invoker);
+    await wait(30);
+    assert_false(target.matches(":popover-open"), "popover closed");
+    assert_equals(invoker.getAttribute("aria-expanded"), "true", "after losing interest");
+  });
+
+  await test("Rich hint: author aria-describedby/aria-labelledby referencing target suppresses aria-details and aria-expanded", async () => {
+    const id1 = "rich_described";
+    const { invoker: descInv, target: descTip } = createPair({
+      targetId: id1,
+      invokerAttrs: { "aria-describedby": `other ${id1}` },
+      targetHTML: '<a href="#">Rich</a>',
+    });
+    const id2 = "rich_labelled";
+    const { invoker: lblInv } = createPair({
+      targetId: id2,
+      invokerAttrs: { "aria-labelledby": id2 },
+      targetHTML: '<a href="#">Rich</a>',
+    });
+    await nextTick();
+    for (const [inv, label] of [[descInv, "describedby"], [lblInv, "labelledby"]]) {
+      assert_equals(inv.getAttribute("aria-details"), null, `${label} -> no aria-details`);
+      assert_equals(inv.getAttribute("aria-expanded"), null, `${label} -> no aria-expanded`);
+    }
+    hover(descInv);
+    await wait(30);
+    assert_true(descTip.matches(":popover-open"), "popover opened");
+    assert_equals(descInv.getAttribute("aria-expanded"), null, "not set on interest");
+  });
+
+  await test("Rich hint on <a href>: aria-expanded only if the hint contains focusable content", async () => {
+    const { invoker: plainLink, target: plainLinkTip } = createPair({
+      invokerTag: "a",
+      invokerHTML: "@user",
+      targetHTML: "<h3>User</h3><p>Bio</p>",
+    });
+    const { invoker: focusLink } = createPair({
+      invokerTag: "a",
+      invokerHTML: "@user",
+      targetHTML: '<h3>User</h3><button>Follow</button>',
+    });
+    await nextTick();
+    assert_equals(plainLink.getAttribute("aria-details"), plainLinkTip.id, "aria-details still set");
+    assert_equals(plainLink.getAttribute("aria-expanded"), null, "non-focusable rich hint -> no aria-expanded");
+    hover(plainLink);
+    await wait(30);
+    assert_true(plainLinkTip.matches(":popover-open"), "popover opened");
+    assert_equals(plainLink.getAttribute("aria-expanded"), null, "not set on interest");
+    assert_equals(focusLink.getAttribute("aria-expanded"), "false", "focusable rich hint -> aria-expanded");
+  });
+
+  await test("Rich hint: aria-expanded tracks the popover state, even when opened via popovertarget", async () => {
+    const targetId = "rich_pt";
+    const { invoker, target } = createPair({
+      targetId,
+      invokerAttrs: { popovertarget: targetId },
+      targetHTML: '<a href="#">Rich</a>',
+    });
+    await nextTick();
+    assert_equals(invoker.getAttribute("aria-expanded"), "false", "initial");
+    invoker.click();
+    assert_true(target.matches(":popover-open"), "opened by click");
+    await wait(10);
+    assert_equals(invoker.getAttribute("aria-expanded"), "true", "after click");
+    hover(invoker);
+    await wait(30);
+    dehover(invoker);
+    await wait(30);
+    assert_true(target.matches(":popover-open"), "popover kept open after losing interest");
+    assert_equals(invoker.getAttribute("aria-expanded"), "true", "still expanded after losing interest");
+    target.hidePopover();
+    await wait(10);
+    assert_equals(invoker.getAttribute("aria-expanded"), "false", "after hidePopover");
+
+    // Interest-shown popover that is hidden by light dismiss / script.
+    hover(invoker);
+    await wait(30);
+    assert_equals(invoker.getAttribute("aria-expanded"), "true", "after gaining interest");
+    target.hidePopover();
+    await wait(10);
+    assert_equals(invoker.getAttribute("aria-expanded"), "false", "after hiding while interest shown");
+  });
+
+  await test("Changing interestfor from a rich to a plain hint removes polyfill-managed aria-expanded", async () => {
+    const { invoker } = createPair({
+      invokerAttrs: { "aria-label": "Info" },
+      targetHTML: '<a href="#">Rich</a>',
+    });
+    const plain = document.createElement("div");
+    plain.id = "switch_plain";
+    plain.setAttribute("popover", "hint");
+    plain.textContent = "Plain description";
+    sandbox.appendChild(plain);
+    await nextTick();
+    assert_equals(invoker.getAttribute("aria-expanded"), "false", "rich -> managed");
+    invoker.setAttribute("interestfor", plain.id);
+    await nextTick();
+    assert_equals(invoker.getAttribute("aria-expanded"), null, "plain -> removed");
+    assert_equals(invoker.getAttribute("aria-describedby"), plain.id, "plain -> aria-describedby");
+  });
+
   // =========================================================================
   section("2. Element Validity & interestForElement IDL");
   // =========================================================================
@@ -295,7 +480,11 @@ async function runTests() {
   // =========================================================================
 
   await test("Hover gains interest after delay, opens popover, sets classes, and dehover loses interest", async () => {
-    const { invoker, target } = createPair({ delayStart: "20ms", delayEnd: "20ms" });
+    const { invoker, target } = createPair({
+      delayStart: "20ms",
+      delayEnd: "20ms",
+      targetHTML: '<a href="#">Rich content</a>',
+    });
     const events = [];
     target.addEventListener("interest", (e) => events.push(`interest:${e.source.tagName}`));
     target.addEventListener("loseinterest", (e) => events.push(`loseinterest:${e.source.tagName}`));
@@ -572,6 +761,87 @@ async function runTests() {
     await wait(25);
     assert_true(target.matches(":popover-open"), "mouse pointerover re-enables hover interest");
   });
+
+  await test("iOS long-press ignores touchmove within 10px slop and cancels beyond 10px", async () => {
+    const origUA = Object.getOwnPropertyDescriptor(Navigator.prototype, "userAgent");
+    Object.defineProperty(navigator, "userAgent", {
+      value: "Mozilla/5.0 (iPhone; CPU iPhone OS 27_0 like Mac OS X) AppleWebKit/605.1.15",
+      configurable: true,
+    });
+    const dispatchTouch = (el, type, x, y) => {
+      const ev = new Event(type, { bubbles: true, cancelable: true });
+      ev.touches = type === "touchend" ? [] : [{ clientX: x, clientY: y }];
+      el.dispatchEvent(ev);
+      return ev;
+    };
+    try {
+      const { invoker, target } = createPair();
+      // 1. Jitter within 10px (e.g. 6, 8 -> distance 10) does not cancel long press:
+      dispatchTouch(invoker, "touchstart", 100, 100);
+      dispatchTouch(invoker, "touchmove", 106, 108);
+      await wait(520);
+      assert_false(target.matches(":popover-open"), "on iOS, popover waits for touchend");
+      // Jitter after the 500ms timer has fired (still within 10px) also does not cancel:
+      dispatchTouch(invoker, "touchmove", 95, 100);
+      const endEv = dispatchTouch(invoker, "touchend", 95, 100);
+      assert_true(endEv.defaultPrevented, "touchend prevented default to suppress click");
+      assert_true(target.matches(":popover-open"), "long press with <=10px jitter opened popover on touchend");
+
+      pressEscape();
+      assert_false(target.matches(":popover-open"), "closed via Escape");
+
+      // 2. Movement >10px (e.g. 7, 8 -> distance ~10.63) cancels long press:
+      dispatchTouch(invoker, "touchstart", 100, 100);
+      dispatchTouch(invoker, "touchmove", 107, 108);
+      await wait(520);
+      const endEv2 = dispatchTouch(invoker, "touchend", 107, 108);
+      assert_false(endEv2.defaultPrevented, "canceled long press does not preventDefault on touchend");
+      assert_false(target.matches(":popover-open"), "long press with >10px movement did not open popover");
+    } finally {
+      if (origUA) {
+        Object.defineProperty(navigator, "userAgent", origUA);
+      } else {
+        delete navigator.userAgent;
+      }
+      // Reset touchInProgress for any subsequent tests
+      document.body.dispatchEvent(new PointerEvent("pointerover", { bubbles: true, pointerType: "mouse" }));
+    }
+  });
+
+  // =========================================================================
+  section("6. Document Body Replacement (e.g. Turbo Drive)");
+  // =========================================================================
+
+  await test("Hover, focus, and Escape still work after document.body is replaced", async () => {
+    const originalBody = document.body;
+    const newBody = document.createElement("body");
+    newBody.innerHTML =
+      '<button id="swap_invoker" interestfor="swap_target">Invoker</button>' +
+      '<div id="swap_target" popover="auto">Target</div>';
+    originalBody.replaceWith(newBody);
+    try {
+      const invoker = document.getElementById("swap_invoker");
+      const target = document.getElementById("swap_target");
+      invoker.style.setProperty("--interest-delay-start", "10ms");
+      invoker.style.setProperty("--interest-delay-end", "10ms");
+      await nextTick();
+
+      hover(invoker);
+      await wait(25);
+      assert_true(target.matches(":popover-open"), "hover opens popover in replaced body");
+      dehover(invoker);
+      await wait(25);
+      assert_false(target.matches(":popover-open"), "dehover closes popover in replaced body");
+
+      focusIn(invoker);
+      await wait(25);
+      assert_true(target.matches(":popover-open"), "focus opens popover in replaced body");
+      pressEscape();
+      assert_false(target.matches(":popover-open"), "Escape closes popover in replaced body");
+    } finally {
+      newBody.replaceWith(originalBody);
+    }
+  });
 }
 </script>