Merge pull request #313 from vhoyer/fix-anchor-has-content-v-html

[anchor-has-content] account for v-html and v-text on child elements

Author: kddnewton

CHANGELOG.md

@@ -10,6 +10,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) a
 
 - Deprecate the accessible-emoji rule. See https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/issues/627 for details.
 - Fix the `alt-text` handling of different element case names.
+- Fix the `anchor-has-content` handling for content directives (v-html, v-text) on child elements.
 
 ## [1.1.0] - 2021-10-14
 

src/rules/__tests__/anchor-has-content.test.ts

@@ -11,6 +11,8 @@ makeRuleTester("anchor-has-content", rule, {
     "<VAnchor  />",
     "<a aria-label='This is my label' />",
     "<a><img alt='foo' /></a>",
+    "<a><span v-html='msg' /></a>",
+    "<a><span v-text='msg' /></a>",
     {
       code: "<a v-accessibleDirective='msg' />",
       options: [{ accessibleDirectives: ["accessibleDirective"] }]

src/utils/hasContent.ts

@@ -12,6 +12,18 @@ function hasDirective(node: AST.VElement, name: string) {
   );
 }
 
+function hasChildWithDirective(node: AST.VElement, name: string): boolean {
+  return node.children.some((child) => {
+    if (child.type !== "VElement") return false;
+
+    if (hasDirective(child, name)) {
+      return true;
+    }
+
+    return hasChildWithDirective(child, name)
+  });
+}
+
 function hasChildImageWithAlt(node: AST.VElement): boolean {
   return node.children.some((child) => {
     if (child.type === "VElement") {
@@ -46,6 +58,8 @@ function hasContent(
     hasAccessibleDirective(node, accessibleDirectives) ||
     hasDirective(node, "text") ||
     hasDirective(node, "html") ||
+    hasChildWithDirective(node, "text") ||
+    hasChildWithDirective(node, "html") ||
     hasChildImageWithAlt(node)
   );
 }