@herb-tools/linter 0.5.0 → 0.6.0

package/src/rules/html-aria-role-heading-requires-level.ts

@@ -1,36 +1,22 @@
-import { AttributeVisitorMixin, getAttributeName, getAttributes } from "./rule-utils.js"
-
 import { ParserRule } from "../types.js"
+import { AttributeVisitorMixin, getAttributeName, getAttributes, StaticAttributeStaticValueParams } from "./rule-utils.js"
+
 import type { LintOffense, LintContext } from "../types.js"
-import type { ParseResult, HTMLAttributeNode, HTMLOpenTagNode, HTMLSelfCloseTagNode } from "@herb-tools/core"
+import type { ParseResult } from "@herb-tools/core"
 
 class AriaRoleHeadingRequiresLevel extends AttributeVisitorMixin {
+  protected checkStaticAttributeStaticValue({ attributeName, attributeValue, attributeNode, parentNode }: StaticAttributeStaticValueParams): void {
+    if (!(attributeName === "role" && attributeValue === "heading")) return
+
+    const ariaLevelAttributes = getAttributes(parentNode).find(attribute => getAttributeName(attribute) === "aria-level")
 
-  // We want to check 2 attributes here:
-  // 1. role="heading"
-  // 2. aria-level (which must be present if role="heading")
-  checkAttribute(
-    attributeName: string,
-    attributeValue: string | null,
-    attributeNode: HTMLAttributeNode,
-    parentNode: HTMLOpenTagNode | HTMLSelfCloseTagNode
-  ): void {
-
-    if (!(attributeName === "role" && attributeValue === "heading")) {
-      return
-    }
-
-    const allAttributes = getAttributes(parentNode)
-
-    // If we have a role="heading", we must check for aria-level
-    const ariaLevelAttr = allAttributes.find(attr => getAttributeName(attr) === "aria-level")
-    if (!ariaLevelAttr) {
-      this.addOffense(
-        `Element with \`role="heading"\` must have an \`aria-level\` attribute.`,
-        attributeNode.location,
-        "error"
-      )
-    }
+    if (ariaLevelAttributes) return
+
+    this.addOffense(
+      `Element with \`role="heading"\` must have an \`aria-level\` attribute.`,
+      attributeNode.location,
+      "error"
+    )
   }
 }
 
@@ -39,7 +25,9 @@ export class HTMLAriaRoleHeadingRequiresLevelRule extends ParserRule {
 
   check(result: ParseResult, context?: Partial<LintContext>): LintOffense[] {
     const visitor = new AriaRoleHeadingRequiresLevel(this.name, context)
+
     visitor.visit(result.value)
+
     return visitor.offenses
   }
 }

package/src/rules/html-aria-role-must-be-valid.ts

@@ -1,13 +1,13 @@
-import { AttributeVisitorMixin, VALID_ARIA_ROLES } from "./rule-utils.js"
-
 import { ParserRule } from "../types.js"
+import { AttributeVisitorMixin, VALID_ARIA_ROLES, StaticAttributeStaticValueParams } from "./rule-utils.js"
+
 import type { LintOffense, LintContext } from "../types.js"
-import type { ParseResult, HTMLAttributeNode } from "@herb-tools/core"
+import type { ParseResult } from "@herb-tools/core"
 
 class AriaRoleMustBeValid extends AttributeVisitorMixin {
-  checkAttribute(attributeName: string, attributeValue: string | null, attributeNode: HTMLAttributeNode,): void {
+  protected checkStaticAttributeStaticValue({ attributeName, attributeValue, attributeNode }: StaticAttributeStaticValueParams): void {
     if (attributeName !== "role") return
-    if (attributeValue === null) return
+    if (!attributeValue) return
     if (VALID_ARIA_ROLES.has(attributeValue)) return
 
     this.addOffense(

package/src/rules/html-attribute-double-quotes.ts

@@ -1,17 +1,30 @@
-import { AttributeVisitorMixin, getAttributeValueQuoteType, hasAttributeValue } from "./rule-utils.js"
-
 import { ParserRule } from "../types.js"
+import { AttributeVisitorMixin, StaticAttributeStaticValueParams, StaticAttributeDynamicValueParams, getAttributeValueQuoteType, hasAttributeValue } from "./rule-utils.js"
+import { filterLiteralNodes } from "@herb-tools/core"
+
 import type { LintOffense, LintContext } from "../types.js"
-import type { ParseResult, HTMLAttributeNode } from "@herb-tools/core"
+import type { ParseResult } from "@herb-tools/core"
 
 class AttributeDoubleQuotesVisitor extends AttributeVisitorMixin {
-  protected checkAttribute(attributeName: string, attributeValue: string | null, attributeNode: HTMLAttributeNode): void {
+  protected checkStaticAttributeStaticValue({ attributeName, attributeValue, attributeNode }: StaticAttributeStaticValueParams) {
     if (!hasAttributeValue(attributeNode)) return
     if (getAttributeValueQuoteType(attributeNode) !== "single") return
-    if (attributeValue?.includes('"')) return // Single quotes acceptable when value contains double quotes
+    if (attributeValue?.includes('"')) return
 
     this.addOffense(
-      `Attribute \`${attributeName}\` uses single quotes. Prefer double quotes for HTML attribute values: \`${attributeName}="value"\`.`,
+      `Attribute \`${attributeName}\` uses single quotes. Prefer double quotes for HTML attribute values: \`${attributeName}="${attributeValue}"\`.`,
+      attributeNode.value!.location,
+      "warning"
+    )
+  }
+
+  protected checkStaticAttributeDynamicValue({ attributeName, valueNodes, attributeNode, combinedValue }: StaticAttributeDynamicValueParams) {
+    if (!hasAttributeValue(attributeNode)) return
+    if (getAttributeValueQuoteType(attributeNode) !== "single") return
+    if (filterLiteralNodes(valueNodes).some(node => node.content?.includes('"'))) return
+
+    this.addOffense(
+      `Attribute \`${attributeName}\` uses single quotes. Prefer double quotes for HTML attribute values: \`${attributeName}="${combinedValue}"\`.`,
       attributeNode.value!.location,
       "warning"
     )
@@ -23,7 +36,9 @@ export class HTMLAttributeDoubleQuotesRule extends ParserRule {
 
   check(result: ParseResult, context?: Partial<LintContext>): LintOffense[] {
     const visitor = new AttributeDoubleQuotesVisitor(this.name, context)
+
     visitor.visit(result.value)
+
     return visitor.offenses
   }
 }

package/src/rules/html-attribute-equals-spacing.ts

@@ -0,0 +1,41 @@
+import { BaseRuleVisitor } from "./rule-utils.js"
+import { ParserRule } from "../types.js"
+
+import type { LintOffense, LintContext } from "../types.js"
+import type { ParseResult, HTMLAttributeNode } from "@herb-tools/core"
+
+class HTMLAttributeEqualsSpacingVisitor extends BaseRuleVisitor {
+  visitHTMLAttributeNode(attribute: HTMLAttributeNode): void {
+    if (!attribute.equals || !attribute.name || !attribute.value) {
+      return
+    }
+
+    if (attribute.equals.value.startsWith(" ")) {
+      this.addOffense(
+        "Remove whitespace before `=` in HTML attribute",
+        attribute.equals.location,
+        "error"
+      )
+    }
+
+    if (attribute.equals.value.endsWith(" ")) {
+      this.addOffense(
+        "Remove whitespace after `=` in HTML attribute",
+        attribute.equals.location,
+        "error"
+      )
+    }
+  }
+}
+
+export class HTMLAttributeEqualsSpacingRule extends ParserRule {
+  name = "html-attribute-equals-spacing"
+
+  check(result: ParseResult, context?: Partial<LintContext>): LintOffense[] {
+    const visitor = new HTMLAttributeEqualsSpacingVisitor(this.name, context)
+
+    visitor.visit(result.value)
+
+    return visitor.offenses
+  }
+}

package/src/rules/html-attribute-values-require-quotes.ts

@@ -1,23 +1,41 @@
-import { AttributeVisitorMixin } from "./rule-utils.js"
-
 import { ParserRule } from "../types.js"
+import { AttributeVisitorMixin, StaticAttributeStaticValueParams, StaticAttributeDynamicValueParams } from "./rule-utils.js"
+
 import type { LintOffense, LintContext } from "../types.js"
 import type { HTMLAttributeNode, HTMLAttributeValueNode, ParseResult } from "@herb-tools/core"
 
 class AttributeValuesRequireQuotesVisitor extends AttributeVisitorMixin {
-  protected checkAttribute(attributeName: string, _attributeValue: string | null, attributeNode: HTMLAttributeNode): void {
-    if (attributeNode.value?.type !== "AST_HTML_ATTRIBUTE_VALUE_NODE") return
+  protected checkStaticAttributeStaticValue({ attributeName, attributeValue, attributeNode }: StaticAttributeStaticValueParams): void {
+    if (this.hasAttributeValue(attributeNode)) return
+    if (this.isQuoted(attributeNode)) return
 
-    const valueNode = attributeNode.value as HTMLAttributeValueNode
-    if (valueNode.quoted) return
+    this.addOffense(
+      `Attribute value should be quoted: \`${attributeName}="${attributeValue}"\`. Always wrap attribute values in quotes.`,
+      attributeNode.value!.location,
+      "error"
+    )
+  }
+
+  protected checkStaticAttributeDynamicValue({ attributeName, attributeNode, combinedValue }: StaticAttributeDynamicValueParams): void {
+    if (this.hasAttributeValue(attributeNode)) return
+    if (this.isQuoted(attributeNode)) return
 
     this.addOffense(
-      // TODO: print actual attribute value in message
-      `Attribute value should be quoted: \`${attributeName}="value"\`. Always wrap attribute values in quotes.`,
-      valueNode.location,
+      `Attribute value should be quoted: \`${attributeName}="${combinedValue}"\`. Always wrap attribute values in quotes.`,
+      attributeNode.value!.location,
       "error"
     )
   }
+
+  private hasAttributeValue(attributeNode: HTMLAttributeNode): boolean {
+    return attributeNode.value?.type !== "AST_HTML_ATTRIBUTE_VALUE_NODE"
+  }
+
+  private isQuoted(attributeNode: HTMLAttributeNode): boolean {
+    const valueNode = attributeNode.value as HTMLAttributeValueNode
+
+    return valueNode.quoted
+  }
 }
 
 export class HTMLAttributeValuesRequireQuotesRule extends ParserRule {
@@ -25,7 +43,9 @@ export class HTMLAttributeValuesRequireQuotesRule extends ParserRule {
 
   check(result: ParseResult, context?: Partial<LintContext>): LintOffense[] {
     const visitor = new AttributeValuesRequireQuotesVisitor(this.name, context)
+
     visitor.visit(result.value)
+
     return visitor.offenses
   }
 }

package/src/rules/html-avoid-both-disabled-and-aria-disabled.ts

@@ -0,0 +1,66 @@
+import { ParserRule } from "../types.js"
+import { BaseRuleVisitor, getTagName, hasAttribute, getAttributes, findAttributeByName } from "./rule-utils.js"
+
+import type { LintOffense, LintContext } from "../types.js"
+import type { HTMLOpenTagNode, HTMLAttributeValueNode, ParseResult, Node } from "@herb-tools/core"
+
+const ELEMENTS_WITH_NATIVE_DISABLED_ATTRIBUTE_SUPPORT = new Set([
+  "button", "fieldset", "input", "optgroup", "option", "select", "textarea"
+])
+
+class AvoidBothDisabledAndAriaDisabledVisitor extends BaseRuleVisitor {
+  visitHTMLOpenTagNode(node: HTMLOpenTagNode): void {
+    this.checkElement(node)
+    super.visitHTMLOpenTagNode(node)
+  }
+
+  private checkElement(node: HTMLOpenTagNode): void {
+    const tagName = getTagName(node)
+
+    if (!tagName || !ELEMENTS_WITH_NATIVE_DISABLED_ATTRIBUTE_SUPPORT.has(tagName)) {
+      return
+    }
+
+    const hasDisabled = hasAttribute(node, "disabled")
+    const hasAriaDisabled = hasAttribute(node, "aria-disabled")
+
+    if ((hasDisabled && this.hasERBContent(node, "disabled")) || (hasAriaDisabled && this.hasERBContent(node, "aria-disabled"))) {
+      return
+    }
+
+    if (hasDisabled && hasAriaDisabled) {
+      this.addOffense(
+        "aria-disabled may be used in place of native HTML disabled to allow tab-focus on an otherwise ignored element. Setting both attributes is contradictory and confusing. Choose either disabled or aria-disabled, not both.",
+        node.tag_name!.location,
+        "error"
+      )
+    }
+  }
+
+  private hasERBContent(node: HTMLOpenTagNode, attributeName: string): boolean {
+    const attributes = getAttributes(node)
+
+    const attribute = findAttributeByName(attributes, attributeName)
+    if (!attribute) return false
+
+    const valueNode = attribute.value
+    if (!valueNode || valueNode.type !== "AST_HTML_ATTRIBUTE_VALUE_NODE") return false
+
+    const htmlValueNode = valueNode as HTMLAttributeValueNode
+    if (!htmlValueNode.children) return false
+
+    return htmlValueNode.children.some((child: Node) => child.type === "AST_ERB_CONTENT_NODE")
+  }
+}
+
+export class HTMLAvoidBothDisabledAndAriaDisabledRule extends ParserRule {
+  name = "html-avoid-both-disabled-and-aria-disabled"
+
+  check(result: ParseResult, context?: Partial<LintContext>): LintOffense[] {
+    const visitor = new AvoidBothDisabledAndAriaDisabledVisitor(this.name, context)
+
+    visitor.visit(result.value)
+
+    return visitor.offenses
+  }
+}

package/src/rules/html-boolean-attributes-no-value.ts

@@ -1,11 +1,11 @@
-import { AttributeVisitorMixin, isBooleanAttribute, hasAttributeValue } from "./rule-utils.js"
-
 import { ParserRule } from "../types.js"
+import { AttributeVisitorMixin, StaticAttributeStaticValueParams, StaticAttributeDynamicValueParams, isBooleanAttribute, hasAttributeValue } from "./rule-utils.js"
+
 import type { LintOffense, LintContext } from "../types.js"
-import type { HTMLAttributeNode, ParseResult } from "@herb-tools/core"
+import type { ParseResult } from "@herb-tools/core"
 
 class BooleanAttributesNoValueVisitor extends AttributeVisitorMixin {
-  protected checkAttribute(attributeName: string, _attributeValue: string | null, attributeNode: HTMLAttributeNode): void {
+  protected checkStaticAttributeStaticValue({ attributeName, attributeNode }: StaticAttributeStaticValueParams) {
     if (!isBooleanAttribute(attributeName)) return
     if (!hasAttributeValue(attributeNode)) return
 
@@ -15,6 +15,17 @@ class BooleanAttributesNoValueVisitor extends AttributeVisitorMixin {
       "error"
     )
   }
+
+  protected checkStaticAttributeDynamicValue({ attributeName, attributeNode, combinedValue }: StaticAttributeDynamicValueParams) {
+    if (!isBooleanAttribute(attributeName)) return
+    if (!hasAttributeValue(attributeNode)) return
+
+    this.addOffense(
+      `Boolean attribute \`${attributeName}\` should not have a value. Use \`${attributeName}\` instead of \`${attributeName}="${combinedValue}"\`.`,
+      attributeNode.value!.location,
+      "error"
+    )
+  }
 }
 
 export class HTMLBooleanAttributesNoValueRule extends ParserRule {
@@ -22,7 +33,9 @@ export class HTMLBooleanAttributesNoValueRule extends ParserRule {
 
   check(result: ParseResult, context?: Partial<LintContext>): LintOffense[] {
     const visitor = new BooleanAttributesNoValueVisitor(this.name, context)
+
     visitor.visit(result.value)
+
     return visitor.offenses
   }
 }

package/src/rules/html-iframe-has-title.ts

@@ -0,0 +1,62 @@
+import { ParserRule } from "../types.js"
+import { BaseRuleVisitor, getTagName, getAttribute, getAttributeValue } from "./rule-utils.js"
+
+import type { LintOffense, LintContext } from "../types.js"
+import type { HTMLOpenTagNode, ParseResult } from "@herb-tools/core"
+
+class IframeHasTitleVisitor extends BaseRuleVisitor {
+  visitHTMLOpenTagNode(node: HTMLOpenTagNode): void {
+    this.checkIframeElement(node)
+    super.visitHTMLOpenTagNode(node)
+  }
+
+  private checkIframeElement(node: HTMLOpenTagNode): void {
+    const tagName = getTagName(node)
+
+    if (tagName !== "iframe") {
+      return
+    }
+
+    const ariaHiddenAttribute = getAttribute(node, "aria-hidden")
+    if (ariaHiddenAttribute) {
+      const ariaHiddenValue = getAttributeValue(ariaHiddenAttribute)
+      if (ariaHiddenValue === "true") {
+        return
+      }
+    }
+
+    const attribute = getAttribute(node, "title")
+
+    if (!attribute) {
+      this.addOffense(
+        "`<iframe>` elements must have a `title` attribute that describes the content of the frame for screen reader users.",
+        node.location,
+        "error"
+      )
+
+      return
+    }
+
+    const value = getAttributeValue(attribute)
+
+    if (!value || value.trim() === "") {
+      this.addOffense(
+        "`<iframe>` elements must have a `title` attribute that describes the content of the frame for screen reader users.",
+        node.location,
+        "error"
+      )
+    }
+  }
+}
+
+export class HTMLIframeHasTitleRule extends ParserRule {
+  name = "html-iframe-has-title"
+
+  check(result: ParseResult, context?: Partial<LintContext>): LintOffense[] {
+    const visitor = new IframeHasTitleVisitor(this.name, context)
+
+    visitor.visit(result.value)
+
+    return visitor.offenses
+  }
+}

package/src/rules/html-img-require-alt.ts

@@ -2,7 +2,7 @@ import { BaseRuleVisitor, getTagName, hasAttribute } from "./rule-utils.js"
 
 import { ParserRule } from "../types.js"
 import type { LintOffense, LintContext } from "../types.js"
-import type { HTMLOpenTagNode, HTMLSelfCloseTagNode, ParseResult } from "@herb-tools/core"
+import type { HTMLOpenTagNode, ParseResult } from "@herb-tools/core"
 
 class ImgRequireAltVisitor extends BaseRuleVisitor {
   visitHTMLOpenTagNode(node: HTMLOpenTagNode): void {
@@ -10,12 +10,7 @@ class ImgRequireAltVisitor extends BaseRuleVisitor {
     super.visitHTMLOpenTagNode(node)
   }
 
-  visitHTMLSelfCloseTagNode(node: HTMLSelfCloseTagNode): void {
-    this.checkImgTag(node)
-    super.visitHTMLSelfCloseTagNode(node)
-  }
-
-  private checkImgTag(node: HTMLOpenTagNode | HTMLSelfCloseTagNode): void {
+  private checkImgTag(node: HTMLOpenTagNode): void {
     const tagName = getTagName(node)
 
     if (tagName !== "img") {

package/src/rules/html-navigation-has-label.ts

@@ -0,0 +1,64 @@
+import { ParserRule } from "../types.js"
+import { BaseRuleVisitor, getTagName, hasAttribute, getAttributeValue, findAttributeByName, getAttributes } from "./rule-utils.js"
+
+import type { LintOffense, LintContext } from "../types.js"
+import type { HTMLOpenTagNode, ParseResult } from "@herb-tools/core"
+
+class NavigationHasLabelVisitor extends BaseRuleVisitor {
+  visitHTMLOpenTagNode(node: HTMLOpenTagNode): void {
+    this.checkNavigationElement(node)
+    super.visitHTMLOpenTagNode(node)
+  }
+
+  private checkNavigationElement(node: HTMLOpenTagNode): void {
+    const tagName = getTagName(node)
+    const isNavElement = tagName === "nav"
+    const hasNavigationRole = this.hasRoleNavigation(node)
+
+    if (!isNavElement && !hasNavigationRole) {
+      return
+    }
+
+    const hasAriaLabel = hasAttribute(node, "aria-label")
+    const hasAriaLabelledby = hasAttribute(node, "aria-labelledby")
+
+    if (!hasAriaLabel && !hasAriaLabelledby) {
+      let message = `The navigation landmark should have a unique accessible name via \`aria-label\` or \`aria-labelledby\`. Remember that the name does not need to include "navigation" or "nav" since it will already be announced.`
+
+      if (hasNavigationRole && !isNavElement) {
+        message += ` Additionally, you can safely drop the \`role="navigation"\` and replace it with the native HTML \`<nav>\` element.`
+      }
+
+      this.addOffense(
+        message,
+        node.tag_name!.location,
+        "error"
+      )
+    }
+  }
+
+  private hasRoleNavigation(node: HTMLOpenTagNode): boolean {
+    const attributes = getAttributes(node)
+    const roleAttribute = findAttributeByName(attributes, "role")
+
+    if (!roleAttribute) {
+      return false
+    }
+
+    const roleValue = getAttributeValue(roleAttribute)
+
+    return roleValue === "navigation"
+  }
+}
+
+export class HTMLNavigationHasLabelRule extends ParserRule {
+  name = "html-navigation-has-label"
+
+  check(result: ParseResult, context?: Partial<LintContext>): LintOffense[] {
+    const visitor = new NavigationHasLabelVisitor(this.name, context)
+
+    visitor.visit(result.value)
+
+    return visitor.offenses
+  }
+}

package/src/rules/html-no-aria-hidden-on-focusable.ts

@@ -0,0 +1,90 @@
+import { ParserRule } from "../types.js"
+import { BaseRuleVisitor, getTagName, hasAttribute, getAttributeValue, findAttributeByName, getAttributes } from "./rule-utils.js"
+
+import type { LintOffense, LintContext } from "../types.js"
+import type { HTMLOpenTagNode, ParseResult } from "@herb-tools/core"
+
+const INTERACTIVE_ELEMENTS = new Set([
+  "button", "summary", "input", "select", "textarea", "a"
+])
+
+class NoAriaHiddenOnFocusableVisitor extends BaseRuleVisitor {
+  visitHTMLOpenTagNode(node: HTMLOpenTagNode): void {
+    this.checkAriaHiddenOnFocusable(node)
+    super.visitHTMLOpenTagNode(node)
+  }
+
+  private checkAriaHiddenOnFocusable(node: HTMLOpenTagNode): void {
+    if (!this.hasAriaHiddenTrue(node)) return
+
+    if (this.isFocusable(node)) {
+      this.addOffense(
+        `Elements that are focusable should not have \`aria-hidden="true"\` because it will cause confusion for assistive technology users.`,
+        node.tag_name!.location,
+        "error"
+      )
+    }
+  }
+
+  private hasAriaHiddenTrue(node: HTMLOpenTagNode): boolean {
+    const attributes = getAttributes(node)
+    const ariaHiddenAttr = findAttributeByName(attributes, "aria-hidden")
+
+    if (!ariaHiddenAttr) return false
+
+    const value = getAttributeValue(ariaHiddenAttr)
+
+    return value === "true"
+  }
+
+  private isFocusable(node: HTMLOpenTagNode): boolean {
+    const tagName = getTagName(node)
+    if (!tagName) return false
+
+    const tabIndexValue = this.getTabIndexValue(node)
+
+    if (tagName === "a") {
+      const hasHref = hasAttribute(node, "href")
+
+      if (!hasHref) {
+        return tabIndexValue !== null && tabIndexValue >= 0
+      }
+
+      return tabIndexValue === null || tabIndexValue >= 0
+    }
+
+    if (INTERACTIVE_ELEMENTS.has(tagName)) {
+      // Interactive elements are focusable unless tabindex is negative
+      return tabIndexValue === null || tabIndexValue >= 0
+    } else {
+      // Non-interactive elements are focusable only if tabindex >= 0
+      return tabIndexValue !== null && tabIndexValue >= 0
+    }
+  }
+
+  private getTabIndexValue(node: HTMLOpenTagNode): number | null {
+    const attributes = getAttributes(node)
+    const tabIndexAttribute = findAttributeByName(attributes, "tabindex")
+
+    if (!tabIndexAttribute) return null
+
+    const value = getAttributeValue(tabIndexAttribute)
+    if (!value) return null
+
+    const parsed = parseInt(value, 10)
+
+    return isNaN(parsed) ? null : parsed
+  }
+}
+
+export class HTMLNoAriaHiddenOnFocusableRule extends ParserRule {
+  name = "html-no-aria-hidden-on-focusable"
+
+  check(result: ParseResult, context?: Partial<LintContext>): LintOffense[] {
+    const visitor = new NoAriaHiddenOnFocusableVisitor(this.name, context)
+
+    visitor.visit(result.value)
+
+    return visitor.offenses
+  }
+}

package/src/rules/html-no-duplicate-attributes.ts

@@ -1,46 +1,44 @@
-import { BaseRuleVisitor, forEachAttribute } from "./rule-utils.js"
-
 import { ParserRule } from "../types.js"
+import { AttributeVisitorMixin, StaticAttributeStaticValueParams, StaticAttributeDynamicValueParams } from "./rule-utils.js"
+
 import type { LintOffense, LintContext } from "../types.js"
-import type { HTMLOpenTagNode, HTMLSelfCloseTagNode, HTMLAttributeNameNode, ParseResult } from "@herb-tools/core"
+import type { HTMLOpenTagNode, HTMLAttributeNode, ParseResult } from "@herb-tools/core"
+
+class NoDuplicateAttributesVisitor extends AttributeVisitorMixin {
+  private attributeNames = new Map<string, HTMLAttributeNode[]>()
 
-class NoDuplicateAttributesVisitor extends BaseRuleVisitor {
   visitHTMLOpenTagNode(node: HTMLOpenTagNode): void {
-    this.checkDuplicateAttributes(node)
+    this.attributeNames.clear()
     super.visitHTMLOpenTagNode(node)
+    this.reportDuplicates()
   }
 
-  visitHTMLSelfCloseTagNode(node: HTMLSelfCloseTagNode): void {
-    this.checkDuplicateAttributes(node)
-    super.visitHTMLSelfCloseTagNode(node)
-  }
 
-  private checkDuplicateAttributes(node: HTMLOpenTagNode | HTMLSelfCloseTagNode): void {
-    const attributeNames = new Map<string, HTMLAttributeNameNode[]>()
-
-    forEachAttribute(node, (attributeNode) => {
-      if (attributeNode.name?.type !== "AST_HTML_ATTRIBUTE_NAME_NODE") return
-
-      const nameNode = attributeNode.name as HTMLAttributeNameNode
-      if (!nameNode.name) return
+  protected checkStaticAttributeStaticValue({ attributeName, attributeNode }: StaticAttributeStaticValueParams): void {
+    this.trackAttributeName(attributeName, attributeNode)
+  }
 
-      const attributeName = nameNode.name.value.toLowerCase() // HTML attributes are case-insensitive
+  protected checkStaticAttributeDynamicValue({ attributeName, attributeNode }: StaticAttributeDynamicValueParams): void {
+    this.trackAttributeName(attributeName, attributeNode)
+  }
 
-      if (!attributeNames.has(attributeName)) {
-        attributeNames.set(attributeName, [])
-      }
+  private trackAttributeName(attributeName: string, attributeNode: HTMLAttributeNode): void {
+    if (!this.attributeNames.has(attributeName)) {
+      this.attributeNames.set(attributeName, [])
+    }
 
-      attributeNames.get(attributeName)!.push(nameNode)
-    })
+    this.attributeNames.get(attributeName)!.push(attributeNode)
+  }
 
-    for (const [attributeName, nameNodes] of attributeNames) {
-      if (nameNodes.length > 1) {
-        for (let i = 1; i < nameNodes.length; i++) {
-          const nameNode = nameNodes[i]
+  private reportDuplicates(): void {
+    for (const [attributeName, attributeNodes] of this.attributeNames) {
+      if (attributeNodes.length > 1) {
+        for (let i = 1; i < attributeNodes.length; i++) {
+          const attributeNode = attributeNodes[i]
 
           this.addOffense(
             `Duplicate attribute \`${attributeName}\` found on tag. Remove the duplicate occurrence.`,
-            nameNode.location,
+            attributeNode.name!.location,
             "error"
           )
         }
@@ -54,7 +52,9 @@ export class HTMLNoDuplicateAttributesRule extends ParserRule {
 
   check(result: ParseResult, context?: Partial<LintContext>): LintOffense[] {
     const visitor = new NoDuplicateAttributesVisitor(this.name, context)
+
     visitor.visit(result.value)
+
     return visitor.offenses
   }
 }