diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8dc6d463..3c75fd0d 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/src/rules/__tests__/anchor-has-content.test.ts b/src/rules/__tests__/anchor-has-content.test.ts
index 3f2da03e..53c0bbcc 100644
--- a/src/rules/__tests__/anchor-has-content.test.ts
+++ b/src/rules/__tests__/anchor-has-content.test.ts
@@ -11,6 +11,8 @@ makeRuleTester("anchor-has-content", rule, {
"",
"",
"
",
+ "",
+ "",
{
code: "",
options: [{ accessibleDirectives: ["accessibleDirective"] }]
diff --git a/src/utils/hasContent.ts b/src/utils/hasContent.ts
index 1d714d17..7f86eb75 100644
--- a/src/utils/hasContent.ts
+++ b/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)
);
}