Add additional check to make sure accessible name fully contains visible label

Author: khiga8

lib/rules/no-generic-link-text.js

@@ -26,6 +26,13 @@ module.exports = {
         if (elementType(node) !== 'a') return
         if (getProp(node.attributes, 'aria-labelledby')) return
 
+        let cleanTextContent // text content we can reliably fetch
+
+        const parent = node.parent
+        if (parent.children && parent.children.length > 0 && parent.children[0].type === 'JSXText') {
+          cleanTextContent = stripAndDowncaseText(parent.children[0].value)
+        }
+
         const ariaLabel = getPropValue(getProp(node.attributes, 'aria-label'))
         const cleanAriaLabelValue = ariaLabel && stripAndDowncaseText(ariaLabel)
 
@@ -37,11 +44,15 @@ module.exports = {
                 'Avoid setting generic link text like `Here`, `Click here`, `Read more`. Make sure that your link text is both descriptive and concise.'
             })
           }
+          if (cleanTextContent && !cleanAriaLabelValue.includes(cleanTextContent)) {
+            context.report({
+              node,
+              message: 'When using ARIA to set a more descriptive text, it must fully contain the visible label.'
+            })
+          }
         } else {
-          const parent = node.parent
-          if (parent.children && parent.children.length === 1 && parent.children[0].type === 'JSXText') {
-            const textContent = stripAndDowncaseText(parent.children[0].value)
-            if (!bannedLinkText.includes(textContent)) return
+          if (cleanTextContent) {
+            if (!bannedLinkText.includes(cleanTextContent)) return
             context.report({
               node,
               message:

tests/no-generic-link-text.js

@@ -26,6 +26,15 @@ ruleTester.run('no-generic-link-text', rule, {
     {code: '<a>Learn more.</a>;', errors: [{message: errorMessage}]},
     {code: "<a aria-label='read more!!!'></a>;", errors: [{message: errorMessage}]},
     {code: "<a aria-label='click here.'></a>;", errors: [{message: errorMessage}]},
-    {code: "<a aria-label='Here'></a>;", errors: [{message: errorMessage}]}
+    {code: "<a aria-label='Here'></a>;", errors: [{message: errorMessage}]},
+    {
+      code: "<a aria-label='Does not include visible label'>Read more!</a>;",
+      errors: [
+        {
+          message:
+            'When setting ARIA to provide a more descriptive accessible name, it must fully include the visible label content.'
+        }
+      ]
+    }
   ]
 })