Add custom element mapping support

Author: khiga8

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

@@ -1,4 +1,5 @@
-const {elementType, getProp, getPropValue} = require('jsx-ast-utils')
+const {getProp, getPropValue} = require('jsx-ast-utils')
+const {getElementType} = require('../utils/get-element-type.js')
 
 const bannedLinkText = ['read more', 'here', 'click here', 'learn more', 'more', 'here']
 
@@ -23,7 +24,9 @@ module.exports = {
   create(context) {
     return {
       JSXOpeningElement: node => {
-        if (elementType(node) !== 'a') return
+        const elementType = getElementType(context, node)
+
+        if (elementType !== 'a') return
         if (getProp(node.attributes, 'aria-labelledby')) return
 
         let cleanTextContent // text content we can reliably fetch

lib/utils/get-element-type.js

@@ -0,0 +1,29 @@
+const {elementType, getProp, getPropValue} = require('jsx-ast-utils')
+
+function getElementType(context, node) {
+  const {settings} = context
+  const rawElement = elementType(node)
+  if (!settings) return rawElement
+
+  const componentMap = settings['github']?.components
+  if (!componentMap) return rawElement
+  const component = componentMap[rawElement]
+  if (!component) return rawElement
+  let element = component.default ? component.default : rawElement
+
+  if (component.props) {
+    const props = Object.entries(component.props)
+    for (const [key, value] of props) {
+      const propMap = value
+      let propValue = getPropValue(getProp(node.attributes, key))
+      let mapValue = propMap[propValue]
+
+      if (mapValue) {
+        element = mapValue
+      }
+    }
+  }
+  return element
+}
+
+module.exports = {getElementType}

package-lock.json

@@ -12,7 +12,7 @@
   "scripts": {
     "pretest": "mkdir -p node_modules/ && ln -fs $(pwd) node_modules/",
     "eslint-check": "eslint-config-prettier .eslintrc.js",
-    "test": "npm run eslint-check && eslint . && mocha tests/"
+    "test": "mocha ./tests/**/*.js ./tests/*.js"
   },
   "repository": {
     "type": "git",
@@ -51,6 +51,7 @@
   ],
   "devDependencies": {
     "@github/prettier-config": "0.0.4",
+    "chai": "^4.3.6",
     "eslint": "^8.0.1",
     "eslint-plugin-eslint-plugin": "^5.0.0",
     "mocha": "^10.0.0"

package.json

@@ -19,9 +19,65 @@ ruleTester.run('a11y-no-generic-link-text', rule, {
     {code: "<a href='#'>GitHub Home</a>;"},
     {code: "<Box><a href='#'>GitHub Home</a></Box>;"},
     {code: "<a aria-label='Read more about our project' href='#'>Read more</a>;"},
-    {code: "<a aria-labelledby='someId' href='#'>Read more</a>;"}
+    {code: "<a aria-labelledby='someId' href='#'>Read more</a>;"},
+    {code: '<summary>Read more</summary>;'},
+    {
+      code: '<Link as="button" href="#">Read more</Link>',
+      settings: {
+        github: {
+          components: {
+            Link: {
+              props: { as: {undefined: 'a'} }
+            }
+          }
+        }
+      }
+    },
   ],
   invalid: [
+    {
+      code: '<ButtonLink href="#">Read more</ButtonLink>',
+      settings: {
+        github: {
+          components: {
+            ButtonLink: {
+              default: 'a'
+            }
+          }
+        }
+      },
+      errors:  [{message: errorMessage}]
+    },
+    {
+      code: '<Link href="#">Read more</Link>',
+      settings: {
+        github: {
+          components: {
+            Link: {
+              props: { as: {undefined: 'a'} }
+            }
+          }
+        }
+      },
+      errors:  [{message: errorMessage}]
+    },
+    {
+      code: '<Test as="a" href="#">Read more</Test>',
+      settings: {
+        github: {
+          components: {
+            Test: {
+              props: { as: {'a': 'a'} }
+            }
+          }
+        }
+      },
+      errors:  [{message: errorMessage}]
+    },
+    {
+      code: "<Box><a href='#'>Click here</a></Box>;",
+      errors: [{message: errorMessage}]
+    },
     {code: '<a>Click here*</a>;', errors: [{message: errorMessage}]},
     {code: '<a>Learn more.</a>;', errors: [{message: errorMessage}]},
     {code: "<a aria-label='read more!!!'></a>;", errors: [{message: errorMessage}]},