html-validate 8.15.0 → 8.16.0

package/dist/es/core.js

@@ -801,6 +801,10 @@ const definitions = {
 		type: "object",
 		additionalProperties: false,
 		properties: {
+			disablable: {
+				type: "boolean",
+				title: "Disablable elements can be disabled using the disabled attribute."
+			},
 			listed: {
 				type: "boolean",
 				title: "Listed elements have a name attribute and is listed in the form and fieldset elements property."
@@ -1126,6 +1130,7 @@ function migrateElement(src) {
   }
   if (src.formAssociated) {
     result.formAssociated = {
+      disablable: Boolean(src.formAssociated.disablable),
       listed: Boolean(src.formAssociated.listed)
     };
   } else {
@@ -2290,6 +2295,7 @@ class TextNode extends DOMNode {
 }
 
 const ROLE = Symbol("role");
+const TABINDEX = Symbol("tabindex");
 var NodeClosed = /* @__PURE__ */ ((NodeClosed2) => {
   NodeClosed2[NodeClosed2["Open"] = 0] = "Open";
   NodeClosed2[NodeClosed2["EndTag"] = 1] = "EndTag";
@@ -2570,6 +2576,43 @@ class HtmlElement extends DOMNode {
     }
     this.attr[key].push(new Attribute(key, value, keyLocation, valueLocation, originalAttribute));
   }
+  /**
+   * Get parsed tabindex for this element.
+   *
+   * - If `tabindex` attribute is not present `null` is returned.
+   * - If attribute value is omitted or the empty string `null` is returned.
+   * - If attribute value cannot be parsed `null` is returned.
+   * - If attribute value is dynamic `0` is returned.
+   * - Otherwise the parsed value is returned.
+   *
+   * This property does *NOT* take into account if the element have a default
+   * `tabindex` (such as `<input>` have). Instead use the `focusable` metadata
+   * property to determine this.
+   *
+   * @public
+   * @since 8.16.0
+   */
+  get tabIndex() {
+    const cached = this.cacheGet(TABINDEX);
+    if (cached !== void 0) {
+      return cached;
+    }
+    const tabindex = this.getAttribute("tabindex");
+    if (!tabindex) {
+      return this.cacheSet(TABINDEX, null);
+    }
+    if (tabindex.value === null) {
+      return this.cacheSet(TABINDEX, null);
+    }
+    if (tabindex.value instanceof DynamicValue) {
+      return this.cacheSet(TABINDEX, 0);
+    }
+    const parsed = parseInt(tabindex.value, 10);
+    if (isNaN(parsed)) {
+      return this.cacheSet(TABINDEX, null);
+    }
+    return this.cacheSet(TABINDEX, parsed);
+  }
   /**
    * Get a list of all attributes on this node.
    */
@@ -3366,6 +3409,7 @@ function isKeywordIgnored(options, keyword, matcher = (list, it) => list.include
 
 const ARIA_HIDDEN_CACHE = Symbol(isAriaHidden.name);
 const HTML_HIDDEN_CACHE = Symbol(isHTMLHidden.name);
+const INERT_CACHE = Symbol(isInert.name);
 const ROLE_PRESENTATION_CACHE = Symbol(isPresentation.name);
 const STYLE_HIDDEN_CACHE = Symbol(isStyleHidden.name);
 function inAccessibilityTree(node) {
@@ -3378,6 +3422,9 @@ function inAccessibilityTree(node) {
   if (isHTMLHidden(node)) {
     return false;
   }
+  if (isInert(node)) {
+    return false;
+  }
   if (isStyleHidden(node)) {
     return false;
   }
@@ -3419,6 +3466,24 @@ function isHTMLHidden(node, details) {
   const result = node.cacheSet(HTML_HIDDEN_CACHE, isHTMLHiddenImpl(node));
   return details ? result : result.byParent || result.bySelf;
 }
+function isInertImpl(node) {
+  const isInert2 = (node2) => {
+    const inert = node2.getAttribute("inert");
+    return inert !== null && inert.isStatic;
+  };
+  return {
+    byParent: node.parent ? isInert2(node.parent) : false,
+    bySelf: isInert2(node)
+  };
+}
+function isInert(node, details) {
+  const cached = node.cacheGet(INERT_CACHE);
+  if (cached) {
+    return details ? cached : cached.byParent || cached.bySelf;
+  }
+  const result = node.cacheSet(INERT_CACHE, isInertImpl(node));
+  return details ? result : result.byParent || result.bySelf;
+}
 function isStyleHiddenImpl(node) {
   const isHidden = (node2) => {
     const style = node2.getAttribute("style");
@@ -6450,6 +6515,46 @@ class HeadingLevel extends Rule {
   }
 }
 
+const FOCUSABLE_CACHE = Symbol(isFocusable.name);
+function isDisabled(element, meta) {
+  var _a;
+  if (!((_a = meta.formAssociated) == null ? void 0 : _a.disablable)) {
+    return false;
+  }
+  const disabled = element.matches("[disabled]");
+  if (disabled) {
+    return true;
+  }
+  const fieldset = element.closest("fieldset[disabled]");
+  if (fieldset) {
+    return true;
+  }
+  return false;
+}
+function isFocusableImpl(element) {
+  if (isHTMLHidden(element) || isInert(element) || isStyleHidden(element)) {
+    return false;
+  }
+  const { tabIndex, meta } = element;
+  if (tabIndex !== null) {
+    return tabIndex >= 0;
+  }
+  if (!meta) {
+    return false;
+  }
+  if (isDisabled(element, meta)) {
+    return false;
+  }
+  return Boolean(meta == null ? void 0 : meta.focusable);
+}
+function isFocusable(element) {
+  const cached = element.cacheGet(FOCUSABLE_CACHE);
+  if (cached) {
+    return cached;
+  }
+  return element.cacheSet(FOCUSABLE_CACHE, isFocusableImpl(element));
+}
+
 class HiddenFocusable extends Rule {
   documentation(context) {
     const byParent = context === "parent" ? " In this case it is being hidden by an ancestor with `aria-hidden.`" : "";
@@ -6463,7 +6568,8 @@ class HiddenFocusable extends Rule {
         "To fix this either:",
         "  - Remove `aria-hidden`.",
         "  - Remove the element from the DOM instead.",
-        "  - Use the `hidden` attribute or similar means to hide the element."
+        '  - Use `tabindex="-1"` to remove the element from tab order.',
+        "  - Use `hidden`, `inert` or similar means to hide or disable the element."
       ].join("\n"),
       url: "https://html-validate.org/rules/hidden-focusable.html"
     };
@@ -6474,21 +6580,13 @@ class HiddenFocusable extends Rule {
     this.on("dom:ready", (event) => {
       const { document } = event;
       for (const element of document.querySelectorAll(selector)) {
-        if (isHTMLHidden(element) || isStyleHidden(element)) {
-          continue;
-        }
-        if (isAriaHidden(element)) {
-          this.validateElement(element);
+        if (isFocusable(element) && isAriaHidden(element)) {
+          this.reportElement(element);
         }
       }
     });
   }
-  validateElement(element) {
-    const { meta } = element;
-    const tabindex = element.getAttribute("tabindex");
-    if (meta && !meta.focusable && !tabindex) {
-      return;
-    }
+  reportElement(element) {
     const attribute = element.getAttribute("aria-hidden");
     const message = attribute ? `aria-hidden cannot be used on focusable elements` : `aria-hidden cannot be used on focusable elements (hidden by ancestor element)`;
     const location = attribute ? attribute.keyLocation : element.location;
@@ -12488,7 +12586,7 @@ class HtmlValidate {
 }
 
 const name = "html-validate";
-const version = "8.15.0";
+const version = "8.16.0";
 const bugs = "https://gitlab.com/html-validate/html-validate/issues/new";
 
 function definePlugin(plugin) {