hasContent checks include accessibleChildren option

For the `heading-has-content` and the `anchor-has-content` rules, add an `accessibleChildren` option that always marks certain children as being accessible.

Author: kddnewton

CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) a
 
 ## [Unreleased]
 
+### Added
+
+- For the `heading-has-content` and the `anchor-has-content` rules, add an `accessibleChildren` option that always marks certain children as being accessible.
+
 ### Changed
 
 - Handle non string literal role values and `role-has-required-aria-props` and non string literal value for `kind` attribute in `media-has-caption`.

docs/anchor-has-content.md

@@ -16,7 +16,8 @@ This rule takes one optional object argument of type object:
     "vuejs-accessibility/anchor-has-content": [
       "error",
       {
-        "components": ["Anchor"]
+        "components": ["Anchor"],
+        "accessibleChildren": ["MyAccessibleText"]
       }
     ]
   }
@@ -25,6 +26,8 @@ This rule takes one optional object argument of type object:
 
 For the `components` option, these strings determine which elements (**always including** `<a>`) should be checked for having content. This is a good use case when you have a wrapper component that simply renders an `a` element.
 
+For the `accessibleChildren` option, these strings determine which elements should be marked as acceptably accessible child elements. For example if you have something like a `<trans tag="hello-world" />` child that you know will translate into accessible text, then you should put the `Trans` component into this array.
+
 ### Succeed
 
 <!-- prettier-ignore -->
@@ -34,11 +37,14 @@ For the `components` option, these strings determine which elements (**always in
 <a is="TextWrapper" />
 <a v-text="msg" />
 <a v-html="msg" />
+<Anchor>Anchor content</!Anchor>
+<a><my-accessible-text /></a>
 ```
 
 ### Fail
 
 ```vue
 <a />
 <a><TextWrapper aria-hidden /></a>
+<Anchor></Anchor>
 ```

docs/heading-has-content.md

@@ -16,7 +16,8 @@ This rule takes one optional object argument of type object:
     "vuejs-accessibility/heading-has-content": [
       "error",
       {
-        "components": ["MyHeading"]
+        "components": ["MyHeading"],
+        "accessibleChildren": ["MyAccessibleText"]
       }
     ]
   }
@@ -25,15 +26,22 @@ This rule takes one optional object argument of type object:
 
 For the `components` option, these strings determine which elements (**always including** `<h1>` thru `<h6>`) should be checked for having content. This is a good use case when you have a wrapper component that simply renders an `h1` element.
 
+For the `accessibleChildren` option, these strings determine which elements should be marked as acceptably accessible child elements. For example if you have something like a `<trans tag="hello-world" />` child that you know will translate into accessible text, then you should put the `Trans` component into this array.
+
 ### Succeed
 
 ```vue
 <h1>Heading Content!</h1>
 <h1 v-html="msg"></h1>
+<MyHeading>Heading Content!</MyHeading>
+<h1>
+  <MyAccessibleText />
+</h1>
 ```
 
 ### Fail
 
 ```vue
 <h1></h1>
+<MyHeading></MyHeading>
 ```

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

@@ -10,7 +10,11 @@ makeRuleTester("anchor-has-content", rule, {
     "<a><slot /></a>",
     "<VAnchor  />",
     "<a aria-label='This is my label' />",
-    "<a><img alt='foo' /></a>"
+    "<a><img alt='foo' /></a>",
+    {
+      code: "<a><accessible-child /></a>",
+      options: [{ accessibleChildren: ["AccessibleChild"] }]
+    }
   ],
   invalid: [
     "<a />",

src/rules/__tests__/heading-has-content.test.js

@@ -8,7 +8,11 @@ makeRuleTester("heading-has-content", rule, {
     "<h1 v-text='msg'></h1>",
     "<h1 v-html='msg'></h1>",
     "<h1>{{ test }}</h1>",
-    "<h1><slot /></h1>"
+    "<h1><slot /></h1>",
+    {
+      code: "<h1><accessible-child /></h1>",
+      options: [{ accessibleChildren: ["AccessibleChild"] }]
+    }
   ],
   invalid: [
     "<h1 />",

src/rules/anchor-has-content.js

@@ -23,6 +23,10 @@ module.exports = {
           components: {
             type: "array",
             items: { type: "string" }
+          },
+          accessibleChildren: {
+            type: "array",
+            items: { type: "string" }
           }
         }
       }
@@ -31,14 +35,17 @@ module.exports = {
   create(context) {
     return defineTemplateBodyVisitor(context, {
       VElement(node) {
-        const { components = [] } = context.options[0] || {};
+        const { components = [], accessibleChildren = [] } =
+          context.options[0] || {};
 
         const elementTypes = ["a"].concat(components.map(makeKebabCase));
+        const accessibleChildTypes = accessibleChildren.map(makeKebabCase);
+
         const elementType = getElementType(node);
 
         if (
           elementTypes.includes(elementType) &&
-          !hasContent(node) &&
+          !hasContent(node, accessibleChildTypes) &&
           !hasAriaLabel(node)
         ) {
           context.report({ node, messageId: "default" });

src/rules/heading-has-content.js

@@ -24,6 +24,10 @@ module.exports = {
           components: {
             type: "array",
             items: { type: "string" }
+          },
+          accessibleChildren: {
+            type: "array",
+            items: { type: "string" }
           }
         }
       }
@@ -32,12 +36,18 @@ module.exports = {
   create(context) {
     return defineTemplateBodyVisitor(context, {
       VElement(node) {
-        const { components = [] } = context.options[0] || {};
+        const { components = [], accessibleChildren = [] } =
+          context.options[0] || {};
 
         const elementTypes = headings.concat(components.map(makeKebabCase));
+        const accessibleChildTypes = accessibleChildren.map(makeKebabCase);
+
         const elementType = getElementType(node);
 
-        if (elementTypes.includes(elementType) && !hasContent(node)) {
+        if (
+          elementTypes.includes(elementType) &&
+          !hasContent(node, accessibleChildTypes)
+        ) {
           context.report({ node, messageId: "default" });
         }
       }

src/utils/hasAccessibleChild.js

@@ -1,15 +1,21 @@
+const getElementType = require("./getElementType");
 const isHiddenFromScreenReader = require("./isHiddenFromScreenReader");
 
-const hasAccessibleChild = (node) =>
+const hasAccessibleChild = (node, accessibleChildTypes = []) =>
   node.children.some((child) => {
     switch (child.type) {
       case "VText":
         return child.value.trim().length > 0;
-      case "VElement":
+      case "VElement": {
+        const elementType = getElementType(child);
+
         return (
+          accessibleChildTypes.includes(elementType) ||
           child.rawName === "slot" ||
-          (!isHiddenFromScreenReader(child) && hasAccessibleChild(child))
+          (!isHiddenFromScreenReader(child) &&
+            hasAccessibleChild(child, accessibleChildTypes))
         );
+      }
       case "VExpressionContainer":
         if (child.expression && child.expression.type === "Identifier") {
           return child.expression.name !== "undefined";

src/utils/hasContent.js

@@ -22,8 +22,8 @@ const hasChildImageWithAlt = (node) =>
     }
   });
 
-const hasContent = (node) =>
-  hasAccessibleChild(node) ||
+const hasContent = (node, accessibleChildTypes) =>
+  hasAccessibleChild(node, accessibleChildTypes) ||
   hasDirective(node, "text") ||
   hasDirective(node, "html") ||
   hasChildImageWithAlt(node);