abledom 0.5.0 → 0.6.1

package/dist/esm/index.js

@@ -58,7 +58,10 @@ var ValidationRule = class {
 };
 
 // inline-file:/Users/marata/Documents/Work/abledom/src/ui/ui.css
-var ui_default = "#abledom-report {\n  bottom: 20px;\n  display: flex;\n  flex-direction: column;\n  left: 10px;\n  max-height: 80%;\n  max-width: 60%;\n  padding: 4px 8px;\n  position: fixed;\n  z-index: 100500;\n}\n\n#abledom-report :focus-visible {\n  outline: 3px solid red;\n  mix-blend-mode: difference;\n}\n\n#abledom-report.abledom-align-left {\n  left: 10px;\n  right: auto;\n}\n\n#abledom-report.abledom-align-right {\n  left: auto;\n  right: 10px;\n}\n\n#abledom-report.abledom-align-bottom {\n  bottom: 20px;\n  top: auto;\n}\n\n#abledom-report.abledom-align-top {\n  /* flex-direction: column-reverse; */\n  bottom: auto;\n  top: 10px;\n}\n\n.abledom-menu-container {\n  backdrop-filter: blur(3px);\n  border-radius: 8px;\n  box-shadow: 0px 0px 4px rgba(127, 127, 127, 0.5);\n  display: inline-block;\n  margin: 2px auto 2px 0;\n}\n\n#abledom-report.abledom-align-right .abledom-menu-container {\n  margin: 2px 0 2px auto;\n}\n\n.abledom-menu {\n  background-color: rgba(140, 10, 121, 0.7);\n  border-radius: 8px;\n  color: white;\n  display: inline flex;\n  font-family: Arial, Helvetica, sans-serif;\n  font-size: 16px;\n  line-height: 26px;\n  padding: 4px;\n}\n\n.abledom-menu .issues-count {\n  margin: 0 8px;\n  display: inline-block;\n}\n\n.abledom-menu .button {\n  all: unset;\n  color: #000;\n  cursor: pointer;\n  background: linear-gradient(\n    180deg,\n    rgba(255, 255, 255, 1) 0%,\n    rgba(200, 200, 200, 1) 100%\n  );\n  border-radius: 6px;\n  border: 1px solid rgba(255, 255, 255, 0.4);\n  box-sizing: border-box;\n  line-height: 0px;\n  margin-right: 4px;\n  max-height: 26px;\n  padding: 2px;\n  text-decoration: none;\n}\n\n.abledom-menu .align-button {\n  border-right-color: rgba(0, 0, 0, 0.4);\n  border-radius: 0;\n  margin: 0;\n}\n\n.abledom-menu .align-button:active,\n#abledom-report .pressed {\n  background: linear-gradient(\n    180deg,\n    rgba(130, 130, 130, 1) 0%,\n    rgba(180, 180, 180, 1) 100%\n  );\n}\n\n.abledom-menu .align-button-first {\n  border-top-left-radius: 6px;\n  border-bottom-left-radius: 6px;\n  margin-left: 8px;\n}\n.abledom-menu .align-button-last {\n  border-top-right-radius: 6px;\n  border-bottom-right-radius: 6px;\n  border-right-color: rgba(255, 255, 255, 0.4);\n}\n\n.abledom-issues-container {\n  overflow: auto;\n  max-height: calc(100vh - 100px);\n}\n\n#abledom-report.abledom-align-right .abledom-issues-container {\n  text-align: right;\n}\n\n.abledom-issue-container {\n  backdrop-filter: blur(3px);\n  border-radius: 8px;\n  box-shadow: 0px 0px 4px rgba(127, 127, 127, 0.5);\n  display: inline-flex;\n  margin: 2px 0;\n}\n\n.abledom-issue {\n  background-color: rgba(164, 2, 2, 0.7);\n  border-radius: 8px;\n  color: white;\n  display: inline flex;\n  font-family: Arial, Helvetica, sans-serif;\n  font-size: 16px;\n  line-height: 26px;\n  padding: 4px;\n}\n.abledom-issue_warning {\n  background-color: rgba(163, 82, 1, 0.7);\n}\n.abledom-issue_info {\n  background-color: rgba(0, 0, 255, 0.7);\n}\n\n.abledom-issue .button {\n  all: unset;\n  color: #000;\n  cursor: pointer;\n  background: linear-gradient(\n    180deg,\n    rgba(255, 255, 255, 1) 0%,\n    rgba(200, 200, 200, 1) 100%\n  );\n  border-radius: 6px;\n  border: 1px solid rgba(255, 255, 255, 0.4);\n  box-sizing: border-box;\n  line-height: 0px;\n  margin-right: 4px;\n  max-height: 26px;\n  padding: 2px;\n  text-decoration: none;\n}\n\n.abledom-issue .button:hover {\n  opacity: 0.7;\n}\n\n.abledom-issue .button.close {\n  background: none;\n  border-color: transparent;\n  color: #fff;\n  margin: 0;\n}\n\n.abledom-highlight {\n  background-color: yellow;\n  box-sizing: border-box;\n  display: none;\n  opacity: 0.6;\n  position: fixed;\n  z-index: 100499;\n}\n\n.abledom-highlight-border1 {\n  border-top: 2px solid red;\n  border-bottom: 2px solid red;\n  box-sizing: border-box;\n  position: absolute;\n  top: -2px;\n  width: calc(100% + 20px);\n  height: calc(100% + 4px);\n  margin: 0 -10px;\n}\n\n.abledom-highlight-border2 {\n  border-left: 2px solid red;\n  border-right: 2px solid red;\n  box-sizing: border-box;\n  position: absolute;\n  width: calc(100% + 4px);\n  left: -2px;\n  height: calc(100% + 20px);\n  margin: -10px 0;\n}\n";
+var ui_default = "#abledom-report {\n  bottom: 20px;\n  display: flex;\n  flex-direction: column;\n  left: 10px;\n  max-height: 80%;\n  max-width: 60%;\n  padding: 4px 8px;\n  position: fixed;\n  z-index: 100500;\n}\n\n#abledom-report :focus-visible {\n  outline: 3px solid red;\n  mix-blend-mode: difference;\n}\n\n#abledom-report.abledom-align-left {\n  left: 10px;\n  right: auto;\n}\n\n#abledom-report.abledom-align-right {\n  left: auto;\n  right: 10px;\n}\n\n#abledom-report.abledom-align-bottom {\n  bottom: 20px;\n  top: auto;\n}\n\n#abledom-report.abledom-align-top {\n  /* flex-direction: column-reverse; */\n  bottom: auto;\n  top: 10px;\n}\n\n.abledom-menu-container {\n  backdrop-filter: blur(3px);\n  border-radius: 8px;\n  box-shadow: 0px 0px 4px rgba(127, 127, 127, 0.5);\n  display: inline-block;\n  margin: 2px auto 2px 0;\n}\n\n#abledom-report.abledom-align-right .abledom-menu-container {\n  margin: 2px 0 2px auto;\n}\n\n.abledom-menu {\n  background-color: rgba(140, 10, 121, 0.7);\n  border-radius: 8px;\n  color: white;\n  display: inline flex;\n  font-family: Arial, Helvetica, sans-serif;\n  font-size: 16px;\n  line-height: 26px;\n  padding: 4px;\n}\n\n.abledom-menu .issues-count {\n  margin: 0 8px;\n  display: inline-block;\n}\n\n.abledom-menu .button {\n  all: unset;\n  color: #000;\n  cursor: pointer;\n  background: linear-gradient(\n    180deg,\n    rgba(255, 255, 255, 1) 0%,\n    rgba(200, 200, 200, 1) 100%\n  );\n  border-radius: 6px;\n  border: 1px solid rgba(255, 255, 255, 0.4);\n  box-sizing: border-box;\n  line-height: 0px;\n  margin-right: 4px;\n  max-height: 26px;\n  padding: 2px;\n  text-decoration: none;\n}\n\n.abledom-menu .align-button {\n  border-right-color: rgba(0, 0, 0, 0.4);\n  border-radius: 0;\n  margin: 0;\n}\n\n.abledom-menu .align-button:active,\n#abledom-report .pressed {\n  background: linear-gradient(\n    180deg,\n    rgba(130, 130, 130, 1) 0%,\n    rgba(180, 180, 180, 1) 100%\n  );\n}\n\n.abledom-menu .align-button-first {\n  border-top-left-radius: 6px;\n  border-bottom-left-radius: 6px;\n  margin-left: 8px;\n}\n.abledom-menu .align-button-last {\n  border-top-right-radius: 6px;\n  border-bottom-right-radius: 6px;\n  border-right-color: rgba(255, 255, 255, 0.4);\n}\n\n.abledom-issues-container {\n  overflow: auto;\n  max-height: calc(100vh - 100px);\n}\n\n#abledom-report.abledom-align-right .abledom-issues-container {\n  text-align: right;\n}\n\n.abledom-issue-container {\n  backdrop-filter: blur(3px);\n  border-radius: 8px;\n  box-shadow: 0px 0px 4px rgba(127, 127, 127, 0.5);\n  display: inline-flex;\n  margin: 2px 0;\n}\n\n.abledom-issue {\n  background-color: rgba(164, 2, 2, 0.7);\n  border-radius: 8px;\n  color: white;\n  display: inline flex;\n  font-family: Arial, Helvetica, sans-serif;\n  font-size: 16px;\n  line-height: 26px;\n  padding: 4px;\n}\n.abledom-issue_warning {\n  background-color: rgba(163, 82, 1, 0.7);\n}\n.abledom-issue_info {\n  background-color: rgba(0, 0, 255, 0.7);\n}\n\n.abledom-issue .button {\n  all: unset;\n  color: #000;\n  cursor: pointer;\n  background: linear-gradient(\n    180deg,\n    rgba(255, 255, 255, 1) 0%,\n    rgba(200, 200, 200, 1) 100%\n  );\n  border-radius: 6px;\n  border: 1px solid rgba(255, 255, 255, 0.4);\n  box-sizing: border-box;\n  line-height: 0px;\n  margin-right: 4px;\n  max-height: 26px;\n  padding: 2px;\n  text-decoration: none;\n}\n\n.abledom-issue .button:hover {\n  opacity: 0.7;\n}\n\n.abledom-issue .button.close {\n  background: none;\n  border-color: transparent;\n  color: #fff;\n  margin: 0;\n}\n";
+
+// inline-file:/Users/marata/Documents/Work/abledom/src/ui/highlighter.css
+var highlighter_default = ".abledom-highlight {\n  background-color: yellow;\n  box-sizing: border-box;\n  display: none;\n  opacity: 0.6;\n  position: fixed;\n  z-index: 100499;\n}\n\n.abledom-highlight-border1 {\n  border-top: 2px solid red;\n  border-bottom: 2px solid red;\n  box-sizing: border-box;\n  position: absolute;\n  top: -2px;\n  width: calc(100% + 20px);\n  height: calc(100% + 4px);\n  margin: 0 -10px;\n}\n\n.abledom-highlight-border2 {\n  border-left: 2px solid red;\n  border-right: 2px solid red;\n  box-sizing: border-box;\n  position: absolute;\n  width: calc(100% + 4px);\n  left: -2px;\n  height: calc(100% + 20px);\n  margin: -10px 0;\n}\n";
 
 // src/ui/domBuilder.ts
 var DOMBuilder = class {
@@ -364,8 +367,7 @@ var IssueUI = class {
         if (element2) {
           revealButton.onclick = () => {
             var _a;
-            element2.scrollIntoView({ block: "center" });
-            (_a = this._issuesUI) == null ? void 0 : _a.highlight(element2);
+            (_a = this._issuesUI) == null ? void 0 : _a.highlight(element2, true);
           };
         } else {
           revealButton.style.display = "none";
@@ -442,7 +444,8 @@ var IssueUI = class {
   }
 };
 var IssuesUI = class {
-  constructor(win, props) {
+  constructor(win, getHighlighter, props) {
+    __publicField(this, "_win");
     __publicField(this, "_container");
     __publicField(this, "_issuesContainer");
     __publicField(this, "_menuElement");
@@ -455,9 +458,11 @@ var IssuesUI = class {
     __publicField(this, "_alignBottomRightButton");
     __publicField(this, "_isMuted", false);
     __publicField(this, "_issues", /* @__PURE__ */ new Set());
-    __publicField(this, "_highlighter");
+    __publicField(this, "_getHighlighter");
     __publicField(this, "bugReport");
     __publicField(this, "headless");
+    this._win = win;
+    this._getHighlighter = getHighlighter;
     this.bugReport = props.bugReport;
     this.headless = !!props.headless;
     if (this.headless) {
@@ -578,7 +583,6 @@ var IssuesUI = class {
       }
     ).element(alignbottomright_default).closeTag().closeTag();
     doc.body.appendChild(container);
-    this._highlighter = new ElementHighlighter(win);
   }
   setUIAlignment(alignment) {
     var _a, _b, _c, _d, _e, _f, _g, _h;
@@ -700,15 +704,15 @@ var IssuesUI = class {
     });
     this._setShowHideButtonsVisibility();
   }
-  highlight(element) {
-    var _a;
-    (_a = this._highlighter) == null ? void 0 : _a.highlight(element);
+  highlight(element, scrollIntoView, autoHideTime) {
+    var _a, _b;
+    (_b = (_a = this._getHighlighter) == null ? void 0 : _a.call(this)) == null ? void 0 : _b.highlight(element, scrollIntoView, autoHideTime);
   }
   dispose() {
-    var _a, _b;
-    (_a = this._highlighter) == null ? void 0 : _a.dispose();
-    (_b = this._container) == null ? void 0 : _b.remove();
-    delete this._highlighter;
+    var _a;
+    (_a = this._container) == null ? void 0 : _a.remove();
+    delete this._win;
+    delete this._getHighlighter;
     delete this._container;
     delete this._issuesContainer;
     delete this._menuElement;
@@ -728,6 +732,7 @@ var ElementHighlighter = class {
     __publicField(this, "_element");
     __publicField(this, "_cancelScrollTimer");
     __publicField(this, "_intersectionObserver");
+    __publicField(this, "_cancelAutoHideTimer");
     __publicField(this, "_onScroll", () => {
       var _a;
       (_a = this._cancelScrollTimer) == null ? void 0 : _a.call(this);
@@ -748,10 +753,19 @@ var ElementHighlighter = class {
     const container = this._container = win.document.createElement("div");
     container.__abledomui = true;
     container.className = "abledom-highlight";
+    const doc = win.document;
+    const style = doc.createElement("style");
+    style.type = "text/css";
+    style.appendChild(doc.createTextNode(highlighter_default));
+    container.appendChild(style);
     new DOMBuilder(container).openTag("div", { class: "abledom-highlight-border1" }).closeTag().openTag("div", { class: "abledom-highlight-border2" }).closeTag();
     win.addEventListener("scroll", this._onScroll, true);
   }
-  highlight(element) {
+  highlight(element, scrollIntoView, autoHideTime) {
+    var _a;
+    if (this._cancelAutoHideTimer && element !== this._element) {
+      this._cancelAutoHideTimer();
+    }
     if (!element) {
       delete this._element;
       this._unobserve();
@@ -764,6 +778,22 @@ var ElementHighlighter = class {
       return;
     }
     this._element = element;
+    if (scrollIntoView) {
+      element.scrollIntoView({ block: "center" });
+    }
+    if (autoHideTime) {
+      (_a = this._cancelAutoHideTimer) == null ? void 0 : _a.call(this);
+      const autoHideTimeout = win.setTimeout(() => {
+        if (this._cancelAutoHideTimer) {
+          this.highlight(null);
+          delete this._cancelAutoHideTimer;
+        }
+      }, autoHideTime);
+      this._cancelAutoHideTimer = () => {
+        win.clearTimeout(autoHideTimeout);
+        delete this._cancelAutoHideTimer;
+      };
+    }
     this._intersectionObserver = new IntersectionObserver(([entry]) => {
       if (entry) {
         const rect = entry.boundingClientRect;
@@ -782,11 +812,12 @@ var ElementHighlighter = class {
     this._intersectionObserver.observe(element);
   }
   dispose() {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     this._unobserve();
     (_a = this._cancelScrollTimer) == null ? void 0 : _a.call(this);
-    (_b = this._window) == null ? void 0 : _b.removeEventListener("scroll", this._onScroll, true);
-    (_c = this._container) == null ? void 0 : _c.remove();
+    (_b = this._cancelAutoHideTimer) == null ? void 0 : _b.call(this);
+    (_c = this._window) == null ? void 0 : _c.removeEventListener("scroll", this._onScroll, true);
+    (_d = this._container) == null ? void 0 : _d.remove();
     delete this._element;
     delete this._container;
     delete this._window;
@@ -829,10 +860,17 @@ var AccessibilityAffectingElements = {
   aside: true,
   body: true,
   button: true,
+  caption: true,
+  col: true,
+  colgroup: true,
   datalist: true,
+  dd: true,
   details: true,
   dialog: true,
   dl: true,
+  dt: true,
+  figcaption: true,
+  figure: true,
   form: true,
   h1: true,
   h2: true,
@@ -844,6 +882,7 @@ var AccessibilityAffectingElements = {
   iframe: true,
   img: true,
   input: true,
+  legend: true,
   li: true,
   link: true,
   main: true,
@@ -853,15 +892,22 @@ var AccessibilityAffectingElements = {
   nav: true,
   object: true,
   ol: true,
+  optgroup: true,
   option: true,
   progress: true,
   section: true,
   select: true,
+  source: true,
+  summary: true,
+  table: true,
   tbody: true,
+  td: true,
   textarea: true,
   tfoot: true,
   th: true,
   thead: true,
+  tr: true,
+  track: true,
   ul: true
 };
 var AccessibilityAttributes = {
@@ -994,6 +1040,7 @@ function getStackTrace() {
 var AbleDOM = class {
   constructor(win, props = {}) {
     __publicField(this, "_win");
+    __publicField(this, "_isDisposed", false);
     __publicField(this, "_props");
     __publicField(this, "_observer");
     __publicField(this, "_clearValidationTimeout");
@@ -1006,8 +1053,17 @@ var AbleDOM = class {
     __publicField(this, "_startFunc");
     __publicField(this, "_isStarted", false);
     __publicField(this, "_issuesUI");
+    __publicField(this, "_elementHighlighter");
     __publicField(this, "_idlePromise");
     __publicField(this, "_idleResolve");
+    __publicField(this, "_currentAnchoredIssues", /* @__PURE__ */ new Map());
+    __publicField(this, "_currentNotAnchoredIssues", []);
+    __publicField(this, "_getHighlighter", () => {
+      if (!this._elementHighlighter && !this._isDisposed) {
+        this._elementHighlighter = new ElementHighlighter(this._win);
+      }
+      return this._elementHighlighter;
+    });
     __publicField(this, "_onFocusIn", (event) => {
       var _a;
       const target = event.target;
@@ -1175,9 +1231,9 @@ var AbleDOM = class {
     }
   }
   _addIssue(rule, issue) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+    var _a, _b;
     if (!this._issuesUI) {
-      this._issuesUI = new IssuesUI(this._win, {
+      this._issuesUI = new IssuesUI(this._win, this._getHighlighter, {
         bugReport: (_a = this._props) == null ? void 0 : _a.bugReport,
         headless: (_b = this._props) == null ? void 0 : _b.headless
       });
@@ -1203,26 +1259,21 @@ var AbleDOM = class {
         issueUI = new IssueUI(this._win, this, rule, this._issuesUI);
         issues.set(rule, issueUI);
         justUpdate = false;
-        (_e = (_d = (_c = this._props) == null ? void 0 : _c.callbacks) == null ? void 0 : _d.onIssueAdded) == null ? void 0 : _e.call(_d, element, rule, issue);
+        this._onIssueAdded(element, rule, issue);
       }
       this._elementsWithIssues.add(element);
     } else {
       issueUI = new IssueUI(this._win, this, rule, this._issuesUI);
       justUpdate = false;
-      (_h = (_g = (_f = this._props) == null ? void 0 : _f.callbacks) == null ? void 0 : _g.onIssueAdded) == null ? void 0 : _h.call(_g, null, rule, issue);
+      this._onIssueAdded(null, rule, issue);
     }
     issueUI.update(issue);
-    if (justUpdate) {
-      (_k = (_j = (_i = this._props) == null ? void 0 : _i.callbacks) == null ? void 0 : _j.onIssueUpdated) == null ? void 0 : _k.call(
-        _j,
-        rule.anchored && element ? element : null,
-        rule,
-        issue
-      );
+    if (justUpdate && rule.anchored && element) {
+      this._onIssueUpdated(element, rule, issue);
     }
   }
   _removeIssue(element, rule) {
-    var _a, _b, _c, _d;
+    var _a;
     if (!rule.anchored) {
       return;
     }
@@ -1234,7 +1285,7 @@ var AbleDOM = class {
     if (issue) {
       issue.dispose();
       issues.delete(rule);
-      (_d = (_c = (_b = this._props) == null ? void 0 : _b.callbacks) == null ? void 0 : _c.onIssueRemoved) == null ? void 0 : _d.call(_c, element, rule);
+      this._onIssueRemoved(element, rule);
     }
     if (issues.size === 0) {
       this._elementsWithIssues.delete(element);
@@ -1320,6 +1371,42 @@ var AbleDOM = class {
       this._dependantIdsByElement.set(element, dependsOnIds);
     }
   }
+  _updateCurrentAnchoredIssues(element, rule, issue) {
+    let issuesByElement = this._currentAnchoredIssues.get(element);
+    if (!issuesByElement && issue) {
+      issuesByElement = /* @__PURE__ */ new Map();
+      this._currentAnchoredIssues.set(element, issuesByElement);
+    }
+    if (issuesByElement) {
+      if (issue) {
+        issuesByElement.set(rule, issue);
+      } else {
+        issuesByElement.delete(rule);
+        if (issuesByElement.size === 0) {
+          this._currentAnchoredIssues.delete(element);
+        }
+      }
+    }
+  }
+  _onIssueAdded(element, rule, issue) {
+    var _a, _b, _c;
+    if (element) {
+      this._updateCurrentAnchoredIssues(element, rule, issue);
+    } else {
+      this._currentNotAnchoredIssues.push(issue);
+    }
+    (_c = (_b = (_a = this._props) == null ? void 0 : _a.callbacks) == null ? void 0 : _b.onIssueAdded) == null ? void 0 : _c.call(_b, element, rule, issue);
+  }
+  _onIssueUpdated(element, rule, issue) {
+    var _a, _b, _c;
+    this._updateCurrentAnchoredIssues(element, rule, issue);
+    (_c = (_b = (_a = this._props) == null ? void 0 : _a.callbacks) == null ? void 0 : _b.onIssueUpdated) == null ? void 0 : _c.call(_b, element, rule, issue);
+  }
+  _onIssueRemoved(element, rule) {
+    var _a, _b, _c;
+    this._updateCurrentAnchoredIssues(element, rule, null);
+    (_c = (_b = (_a = this._props) == null ? void 0 : _a.callbacks) == null ? void 0 : _b.onIssueRemoved) == null ? void 0 : _c.call(_b, element, rule);
+  }
   _remove(elements) {
     elements.forEach((element) => {
       var _a, _b;
@@ -1327,21 +1414,42 @@ var AbleDOM = class {
       rules.forEach((rule) => this._removeIssue(element, rule));
     });
   }
+  _getCurrentIssues() {
+    const issues = this._currentNotAnchoredIssues.slice(0);
+    this._currentAnchoredIssues.forEach((issueByRule) => {
+      issueByRule.forEach((issue) => {
+        issues.push(issue);
+      });
+    });
+    return issues;
+  }
   idle() {
     if (!this._clearValidationTimeout) {
-      return Promise.resolve();
+      return Promise.resolve(this._getCurrentIssues());
     }
     if (!this._idlePromise) {
       this._idlePromise = new Promise((resolve) => {
         this._idleResolve = () => {
           delete this._idlePromise;
           delete this._idleResolve;
-          resolve();
+          resolve(this._getCurrentIssues());
         };
       });
     }
     return this._idlePromise;
   }
+  clearCurrentIssues(anchored = true, notAnchored = true) {
+    if (anchored) {
+      this._currentAnchoredIssues.clear();
+    }
+    if (notAnchored) {
+      this._currentNotAnchoredIssues = [];
+    }
+  }
+  highlightElement(element, scrollIntoView, autoHideTime) {
+    var _a;
+    (_a = this._getHighlighter()) == null ? void 0 : _a.highlight(element, scrollIntoView, autoHideTime);
+  }
   addRule(rule) {
     this._rules.push(rule);
   }
@@ -1368,6 +1476,7 @@ var AbleDOM = class {
   }
   dispose() {
     var _a, _b, _c, _d;
+    this._isDisposed = true;
     const doc = this._win.document;
     doc.addEventListener("focusin", this._onFocusIn, true);
     doc.addEventListener("focusout", this._onFocusOut, true);
@@ -1376,6 +1485,7 @@ var AbleDOM = class {
     this._dependantIdsByElement.clear();
     this._elementsDependingOnId.clear();
     this._idByElement.clear();
+    this.clearCurrentIssues();
     (_a = this._issuesUI) == null ? void 0 : _a.dispose();
     delete this._issuesUI;
     (_b = this._clearValidationTimeout) == null ? void 0 : _b.call(this);
@@ -1967,6 +2077,475 @@ var CustomNotifyRule = class extends ValidationRule {
     });
   }
 };
+
+// src/rules/requiredparent.ts
+var RequiredParentRule = class extends ValidationRule {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "type", 1 /* Error */);
+    __publicField(this, "name", "aria-required-parent");
+    __publicField(this, "anchored", true);
+    __publicField(this, "parentRequirements", /* @__PURE__ */ new Map([
+      [
+        "LI",
+        {
+          allowedParents: ["UL", "OL"],
+          allowedParentRoles: ["list"]
+        }
+      ],
+      [
+        "DT",
+        {
+          allowedParents: ["DL"],
+          allowIntermediateWrappers: true,
+          allowedWrappers: ["DIV"]
+        }
+      ],
+      [
+        "DD",
+        {
+          allowedParents: ["DL"],
+          allowIntermediateWrappers: true,
+          allowedWrappers: ["DIV"]
+        }
+      ],
+      [
+        "TR",
+        {
+          allowedParents: ["TABLE", "THEAD", "TBODY", "TFOOT"],
+          allowedParentRoles: ["table", "grid", "treegrid"]
+        }
+      ],
+      [
+        "TH",
+        {
+          allowedParents: ["TR"],
+          allowedParentRoles: ["row"]
+        }
+      ],
+      [
+        "TD",
+        {
+          allowedParents: ["TR"],
+          allowedParentRoles: ["row"]
+        }
+      ],
+      [
+        "THEAD",
+        {
+          allowedParents: ["TABLE"],
+          allowedParentRoles: ["table", "grid", "treegrid"]
+        }
+      ],
+      [
+        "TBODY",
+        {
+          allowedParents: ["TABLE"],
+          allowedParentRoles: ["table", "grid", "treegrid"]
+        }
+      ],
+      [
+        "TFOOT",
+        {
+          allowedParents: ["TABLE"],
+          allowedParentRoles: ["table", "grid", "treegrid"]
+        }
+      ],
+      [
+        "CAPTION",
+        {
+          allowedParents: ["TABLE"]
+        }
+      ],
+      [
+        "COLGROUP",
+        {
+          allowedParents: ["TABLE"]
+        }
+      ],
+      [
+        "COL",
+        {
+          allowedParents: ["COLGROUP"]
+        }
+      ],
+      [
+        "FIGCAPTION",
+        {
+          allowedParents: ["FIGURE"]
+        }
+      ],
+      [
+        "OPTION",
+        {
+          allowedParents: ["SELECT", "OPTGROUP", "DATALIST"]
+        }
+      ],
+      [
+        "OPTGROUP",
+        {
+          allowedParents: ["SELECT"]
+        }
+      ],
+      [
+        "LEGEND",
+        {
+          allowedParents: ["FIELDSET"]
+        }
+      ],
+      [
+        "SUMMARY",
+        {
+          allowedParents: ["DETAILS"]
+        }
+      ],
+      [
+        "SOURCE",
+        {
+          allowedParents: ["AUDIO", "VIDEO", "PICTURE"]
+        }
+      ],
+      [
+        "TRACK",
+        {
+          allowedParents: ["AUDIO", "VIDEO"]
+        }
+      ],
+      [
+        "role=menuitem",
+        {
+          allowedParentRoles: ["menu", "menubar", "group"]
+        }
+      ],
+      [
+        "role=menuitemcheckbox",
+        {
+          allowedParentRoles: ["menu", "menubar", "group"]
+        }
+      ],
+      [
+        "role=menuitemradio",
+        {
+          allowedParentRoles: ["menu", "menubar", "group"]
+        }
+      ],
+      [
+        "role=listitem",
+        {
+          allowedParentRoles: ["list", "group"]
+        }
+      ],
+      [
+        "role=treeitem",
+        {
+          allowedParentRoles: ["tree", "group"]
+        }
+      ],
+      [
+        "role=tab",
+        {
+          allowedParentRoles: ["tablist"]
+        }
+      ],
+      [
+        "role=row",
+        {
+          allowedParentRoles: ["table", "grid", "treegrid", "rowgroup"]
+        }
+      ],
+      [
+        "role=cell",
+        {
+          allowedParentRoles: ["row"]
+        }
+      ],
+      [
+        "role=gridcell",
+        {
+          allowedParentRoles: ["row"]
+        }
+      ],
+      [
+        "role=columnheader",
+        {
+          allowedParentRoles: ["row"]
+        }
+      ],
+      [
+        "role=rowheader",
+        {
+          allowedParentRoles: ["row"]
+        }
+      ],
+      [
+        "role=rowgroup",
+        {
+          allowedParentRoles: ["table", "grid", "treegrid"]
+        }
+      ],
+      [
+        "role=option",
+        {
+          allowedParentRoles: ["listbox", "group"]
+        }
+      ]
+    ]));
+  }
+  accept(element) {
+    const tagName = element.tagName;
+    const role = element.getAttribute("role");
+    if (this.parentRequirements.has(tagName)) {
+      return true;
+    }
+    if (role && this.parentRequirements.has(`role=${role}`)) {
+      return true;
+    }
+    return false;
+  }
+  validate(element) {
+    const tagName = element.tagName;
+    const role = element.getAttribute("role");
+    let requirement;
+    let identifier = "";
+    if (role && this.parentRequirements.has(`role=${role}`)) {
+      requirement = this.parentRequirements.get(`role=${role}`);
+      identifier = `role="${role}"`;
+    } else if (this.parentRequirements.has(tagName)) {
+      requirement = this.parentRequirements.get(tagName);
+      identifier = `<${tagName.toLowerCase()}>`;
+    }
+    if (!requirement) {
+      return null;
+    }
+    if (requirement.customValidator) {
+      if (requirement.customValidator(element)) {
+        return null;
+      } else {
+        return this.createIssue(element, identifier, requirement);
+      }
+    }
+    if (this.hasValidParent(element, requirement)) {
+      return null;
+    }
+    return this.createIssue(element, identifier, requirement);
+  }
+  hasValidParent(element, requirement) {
+    var _a, _b, _c;
+    let parent = element.parentElement;
+    let depth = 0;
+    const maxDepth = requirement.allowIntermediateWrappers ? 2 : 1;
+    while (parent && depth < maxDepth) {
+      if ((_a = requirement.allowedParents) == null ? void 0 : _a.includes(parent.tagName)) {
+        return true;
+      }
+      const parentRole = parent.getAttribute("role");
+      if (parentRole && ((_b = requirement.allowedParentRoles) == null ? void 0 : _b.includes(parentRole))) {
+        return true;
+      }
+      if (depth === 0 && !requirement.allowIntermediateWrappers) {
+        break;
+      }
+      if (depth === 0 && requirement.allowIntermediateWrappers) {
+        if (!((_c = requirement.allowedWrappers) == null ? void 0 : _c.includes(parent.tagName))) {
+          break;
+        }
+      }
+      parent = parent.parentElement;
+      depth++;
+    }
+    return false;
+  }
+  createIssue(element, identifier, requirement) {
+    var _a, _b;
+    const allowedParentsText = [
+      ...((_a = requirement.allowedParents) == null ? void 0 : _a.map((p) => `<${p.toLowerCase()}>`)) || [],
+      ...((_b = requirement.allowedParentRoles) == null ? void 0 : _b.map((r) => `role="${r}"`)) || []
+    ].join(", ");
+    const message = `${identifier} must be contained by ${allowedParentsText}`;
+    return {
+      issue: {
+        id: "aria-required-parent",
+        message,
+        element,
+        help: "https://dequeuniversity.com/rules/axe/4.2/aria-required-parent"
+      }
+    };
+  }
+};
+
+// src/rules/nestedInteractive.ts
+var interactiveElementSelector = [
+  "a[href]",
+  "button",
+  "input:not([type='hidden'])",
+  "select",
+  "textarea",
+  "details",
+  "audio[controls]",
+  "video[controls]",
+  "*[role='button']",
+  "*[role='link']",
+  "*[role='checkbox']",
+  "*[role='radio']",
+  "*[role='switch']",
+  "*[role='tab']",
+  "*[role='menuitem']",
+  "*[role='menuitemcheckbox']",
+  "*[role='menuitemradio']",
+  "*[role='option']",
+  "*[role='treeitem']"
+].join(", ");
+var NestedInteractiveElementRule = class extends ValidationRule {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "type", 1 /* Error */);
+    __publicField(this, "name", "NestedInteractiveElementRule");
+    __publicField(this, "anchored", true);
+  }
+  _isAriaHidden(element) {
+    return element.ownerDocument.evaluate(
+      `ancestor-or-self::*[@aria-hidden = 'true' or @hidden]`,
+      element,
+      null,
+      XPathResult.BOOLEAN_TYPE,
+      null
+    ).booleanValue;
+  }
+  _isInteractive(element) {
+    return matchesSelector(element, interactiveElementSelector);
+  }
+  _findNestedInteractive(element) {
+    const descendants = element.querySelectorAll(interactiveElementSelector);
+    for (let i = 0; i < descendants.length; i++) {
+      const descendant = descendants[i];
+      if (this._isAriaHidden(descendant)) {
+        continue;
+      }
+      return descendant;
+    }
+    return null;
+  }
+  accept(element) {
+    return this._isInteractive(element);
+  }
+  validate(element) {
+    if (this._isAriaHidden(element)) {
+      return null;
+    }
+    const nestedElement = this._findNestedInteractive(element);
+    if (nestedElement) {
+      const elementTag = element.tagName.toLowerCase();
+      const elementRole = element.getAttribute("role");
+      const nestedTag = nestedElement.tagName.toLowerCase();
+      const nestedRole = nestedElement.getAttribute("role");
+      const elementDesc = elementRole ? `${elementTag}[role="${elementRole}"]` : elementTag;
+      const nestedDesc = nestedRole ? `${nestedTag}[role="${nestedRole}"]` : nestedTag;
+      return {
+        issue: isElementVisible(element) ? {
+          id: "nested-interactive",
+          message: `Interactive element <${elementDesc}> contains a nested interactive element <${nestedDesc}>. This can confuse users and assistive technologies.`,
+          element,
+          rel: nestedElement,
+          help: "https://dequeuniversity.com/rules/axe/4.4/nested-interactive"
+        } : void 0
+      };
+    }
+    return null;
+  }
+};
+
+// src/rules/tabindex.ts
+var INTERACTIVE_ELEMENTS = /* @__PURE__ */ new Set([
+  "A",
+  "BUTTON",
+  "INPUT",
+  "SELECT",
+  "TEXTAREA",
+  "DETAILS",
+  "SUMMARY",
+  "AUDIO",
+  "VIDEO"
+]);
+var INTERACTIVE_ROLES = /* @__PURE__ */ new Set([
+  "button",
+  "link",
+  "checkbox",
+  "radio",
+  "textbox",
+  "combobox",
+  "listbox",
+  "menu",
+  "menubar",
+  "menuitem",
+  "menuitemcheckbox",
+  "menuitemradio",
+  "option",
+  "searchbox",
+  "slider",
+  "spinbutton",
+  "switch",
+  "tab",
+  "tablist",
+  "tree",
+  "treegrid",
+  "treeitem",
+  "grid",
+  "gridcell"
+]);
+var TabIndexRule = class extends ValidationRule {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "type", 2 /* Warning */);
+    __publicField(this, "name", "tabindex");
+    __publicField(this, "anchored", true);
+  }
+  accept(element) {
+    return element.hasAttribute("tabindex");
+  }
+  isInteractiveElement(element) {
+    if (INTERACTIVE_ELEMENTS.has(element.tagName)) {
+      if (element.hasAttribute("disabled")) {
+        return false;
+      }
+      if (element.tagName === "A" && !element.hasAttribute("href")) {
+        return false;
+      }
+      return true;
+    }
+    const role = element.getAttribute("role");
+    if (role && INTERACTIVE_ROLES.has(role)) {
+      return true;
+    }
+    if (element.isContentEditable) {
+      return true;
+    }
+    return false;
+  }
+  validate(element) {
+    const tabindex = parseInt(element.getAttribute("tabindex") || "0", 10);
+    if (tabindex > 0 && this.isInteractiveElement(element)) {
+      return {
+        issue: {
+          id: "tabindex",
+          message: `Avoid positive tabindex values (found: ${tabindex})`,
+          element,
+          help: "https://dequeuniversity.com/rules/axe/4.2/tabindex"
+        }
+      };
+    }
+    if (!this.isInteractiveElement(element)) {
+      return {
+        issue: {
+          id: "tabindex-non-interactive",
+          message: `Avoid using tabindex on non-interactive elements (<${element.tagName.toLowerCase()}>). Consider adding an interactive role or making the element naturally interactive.`,
+          element,
+          help: "https://dequeuniversity.com/rules/axe/4.2/tabindex"
+        }
+      };
+    }
+    return null;
+  }
+};
 export {
   AbleDOM,
   AtomicRule,
@@ -1977,6 +2556,9 @@ export {
   FindElementRule,
   FocusLostRule,
   FocusableElementLabelRule,
+  NestedInteractiveElementRule,
+  RequiredParentRule,
+  TabIndexRule,
   ValidationRule,
   ValidationRuleType,
   hasAccessibilityAttribute,