abledom 0.6.0 → 0.6.1

package/dist/index.d.cts

@@ -231,6 +231,52 @@ declare class CustomNotifyRule extends ValidationRule {
     customNotify(message: string, element?: HTMLElement): void;
 }
 
+/*!
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+declare class RequiredParentRule extends ValidationRule {
+    type: ValidationRuleType;
+    name: string;
+    anchored: boolean;
+    private parentRequirements;
+    accept(element: HTMLElement): boolean;
+    validate(element: HTMLElement): ValidationResult | null;
+    private hasValidParent;
+    private createIssue;
+}
+
+/*!
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+declare class NestedInteractiveElementRule extends ValidationRule {
+    type: ValidationRuleType;
+    name: string;
+    anchored: boolean;
+    private _isAriaHidden;
+    private _isInteractive;
+    private _findNestedInteractive;
+    accept(element: HTMLElement): boolean;
+    validate(element: HTMLElement): ValidationResult | null;
+}
+
+/*!
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+declare class TabIndexRule extends ValidationRule {
+    type: ValidationRuleType;
+    name: string;
+    anchored: boolean;
+    accept(element: HTMLElement): boolean;
+    private isInteractiveElement;
+    validate(element: HTMLElement): ValidationResult | null;
+}
+
 interface HTMLElementAttributes {
     readonly [name: string]: string;
 }
@@ -240,4 +286,4 @@ declare function matchesSelector(element: HTMLElement, selector: string): boolea
 declare function isDisplayNone(element: HTMLElement): boolean;
 declare function isElementVisible(element: HTMLElement): boolean;
 
-export { AbleDOM, type AbleDOMProps, AtomicRule, BadFocusRule, type BlurIssue, ContrastRule, CustomNotifyRule, ExistingIdRule, FindElementRule, FocusLostRule, FocusableElementLabelRule, type ValidationIssue, type ValidationResult, ValidationRule, ValidationRuleType, hasAccessibilityAttribute, isAccessibilityAffectingElement, isDisplayNone, isElementVisible, matchesSelector };
+export { AbleDOM, type AbleDOMProps, AtomicRule, BadFocusRule, type BlurIssue, ContrastRule, CustomNotifyRule, ExistingIdRule, FindElementRule, FocusLostRule, FocusableElementLabelRule, NestedInteractiveElementRule, RequiredParentRule, TabIndexRule, type ValidationIssue, type ValidationResult, ValidationRule, ValidationRuleType, hasAccessibilityAttribute, isAccessibilityAffectingElement, isDisplayNone, isElementVisible, matchesSelector };

package/dist/index.d.ts

@@ -231,6 +231,52 @@ declare class CustomNotifyRule extends ValidationRule {
     customNotify(message: string, element?: HTMLElement): void;
 }
 
+/*!
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+declare class RequiredParentRule extends ValidationRule {
+    type: ValidationRuleType;
+    name: string;
+    anchored: boolean;
+    private parentRequirements;
+    accept(element: HTMLElement): boolean;
+    validate(element: HTMLElement): ValidationResult | null;
+    private hasValidParent;
+    private createIssue;
+}
+
+/*!
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+declare class NestedInteractiveElementRule extends ValidationRule {
+    type: ValidationRuleType;
+    name: string;
+    anchored: boolean;
+    private _isAriaHidden;
+    private _isInteractive;
+    private _findNestedInteractive;
+    accept(element: HTMLElement): boolean;
+    validate(element: HTMLElement): ValidationResult | null;
+}
+
+/*!
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+declare class TabIndexRule extends ValidationRule {
+    type: ValidationRuleType;
+    name: string;
+    anchored: boolean;
+    accept(element: HTMLElement): boolean;
+    private isInteractiveElement;
+    validate(element: HTMLElement): ValidationResult | null;
+}
+
 interface HTMLElementAttributes {
     readonly [name: string]: string;
 }
@@ -240,4 +286,4 @@ declare function matchesSelector(element: HTMLElement, selector: string): boolea
 declare function isDisplayNone(element: HTMLElement): boolean;
 declare function isElementVisible(element: HTMLElement): boolean;
 
-export { AbleDOM, type AbleDOMProps, AtomicRule, BadFocusRule, type BlurIssue, ContrastRule, CustomNotifyRule, ExistingIdRule, FindElementRule, FocusLostRule, FocusableElementLabelRule, type ValidationIssue, type ValidationResult, ValidationRule, ValidationRuleType, hasAccessibilityAttribute, isAccessibilityAffectingElement, isDisplayNone, isElementVisible, matchesSelector };
+export { AbleDOM, type AbleDOMProps, AtomicRule, BadFocusRule, type BlurIssue, ContrastRule, CustomNotifyRule, ExistingIdRule, FindElementRule, FocusLostRule, FocusableElementLabelRule, NestedInteractiveElementRule, RequiredParentRule, TabIndexRule, type ValidationIssue, type ValidationResult, ValidationRule, ValidationRuleType, hasAccessibilityAttribute, isAccessibilityAffectingElement, isDisplayNone, isElementVisible, matchesSelector };

package/dist/index.js

@@ -31,6 +31,9 @@ __export(index_exports, {
   FindElementRule: () => FindElementRule,
   FocusLostRule: () => FocusLostRule,
   FocusableElementLabelRule: () => FocusableElementLabelRule,
+  NestedInteractiveElementRule: () => NestedInteractiveElementRule,
+  RequiredParentRule: () => RequiredParentRule,
+  TabIndexRule: () => TabIndexRule,
   ValidationRule: () => ValidationRule,
   ValidationRuleType: () => ValidationRuleType,
   hasAccessibilityAttribute: () => hasAccessibilityAttribute,
@@ -899,10 +902,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,
@@ -914,6 +924,7 @@ var AccessibilityAffectingElements = {
   iframe: true,
   img: true,
   input: true,
+  legend: true,
   li: true,
   link: true,
   main: true,
@@ -923,15 +934,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 = {
@@ -2101,6 +2119,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;
+  }
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AbleDOM,
@@ -2112,6 +2599,9 @@ var CustomNotifyRule = class extends ValidationRule {
   FindElementRule,
   FocusLostRule,
   FocusableElementLabelRule,
+  NestedInteractiveElementRule,
+  RequiredParentRule,
+  TabIndexRule,
   ValidationRule,
   ValidationRuleType,
   hasAccessibilityAttribute,