interestfor 1.0.13 → 1.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "interestfor",
-  "version": "1.0.13",
+  "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

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

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",h="http://www.w3.org/1999/xlink",p=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.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=x(e);return t!==x(this.target||document)?t.host:e}});const w="none",v="full",T="explicit",A="hover",L="dehover",N="focus",S="blur";function x(e){return e&&"function"==typeof e.getRootNode?e.getRootNode():e&&e.parentNode?x(e.parentNode):e}function P(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(!P(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",M),n[u].shownByInterest=!1,!$(n))){try{n.showPopover({source:e})}catch{}n[u].shownByInterest=$(n)}if(p.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 k(e){const t=1e3*O(e,o);if(!_(t))return;const n=e[c];n.clearLostTask();const r=n.target;n.lostTimer=setTimeout(()=>{P(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(h,"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=x(e);let r=x(t);for(;r;){if(r===n)return!0;r=r instanceof ShadowRoot?x(r.host):null}return!1}(r,t)?r:null;if(""===n)return null;const o=x(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,w,{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 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;p.delete(e),e.classList.remove("interest-source"),n&&(n[u]?.invoker===e&&(n.removeEventListener("beforetoggle",M),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=x(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 X(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 R(e){const t=new Set;if(0===p.size)return t;const n=e=>{const r=F(e);r&&!t.has(r)&&(t.add(r),n(r));const o=X(e);o&&!t.has(o)&&n(o)};return n(e),t}function Y(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 R(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);_(o)&&(e[c].clearGainedTask(),e[c].gainedTimer=setTimeout(()=>{P(e,n,t)},o))}(e,v)}else if(o&&(o.clearGainedTask(),o.state===v&&k(e)),t===S||!e.matches(":hover"))for(const t of R(e))k(t)}function U(e){return e instanceof HTMLElement&&"area"!==e.localName&&!!e.parentNode&&!!I(e)}function J(e){const t=getComputedStyle(e).getPropertyValue(i).trim();return t&&"none"!==t&&"normal"!==t?t:null}function K(){const e=this[f];e&&P(e,I(e),T)}function Q(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",K),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 W(t){const n=[];for(const r of t){let t=null;const o=I(r);o?(g.delete(r),U(r)&&(t=J(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),Q(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[...p]){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)||(U(e)?e.nextSibling!==e[d]&&e.after(e[d]):Q(e,null));W(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=X(e))Y(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,N)),document.addEventListener("focusout",t=>e(t,S)),document.addEventListener("keydown",e=>{y=!1,"Escape"!==e.key||e.defaultPrevented||[...p].reverse().forEach(e=>{P(e,e[c].target,w,{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){z(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===w&&(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===w&&P(t,I(t),T))},{passive:!1})}(),new MutationObserver(Z).observe(document,{childList:!0,subtree:!0,attributes:!0,attributeOldValue:!0,attributeFilter:[e,"id","href","disabled"]}),W(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/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}`));