Merge branch 'main' into lw/adds-svg-rule

Author: lindseywild

README.md

@@ -47,15 +47,16 @@ _Note: This is experimental and subject to change._
 
 The `react` config includes rules which target specific HTML elements. You may provide a mapping of custom components to an HTML element in your `eslintrc` configuration to increase linter coverage.
 
-For each component, you may specify a `default` and/or `props`. `default` may make sense if there's a 1:1 mapping between a component and an HTML element. However, if the HTML output of a component is dependent on a prop value, you can provide a mapping using the `props` key. To minimize conflicts and complexity, this currently only supports the mapping of a single prop type.
+By default, these eslint rules will check the "as" prop for underlying element changes. If your repo uses a different prop name for polymorphic components provide the prop name in your `eslintrc` configuration under `polymorphicPropName`.
 
 ```json
 {
   "settings": {
     "github": {
+      "polymorphicPropName": "asChild",
       "components": {
-        "Box": {"default": "p"},
-        "Link": {"props": {"as": {"undefined": "a", "a": "a", "button": "button"}}}
+        "Box": "p",
+        "Link": "a"
       }
     }
   }
@@ -66,9 +67,7 @@ This config will be interpreted in the following way:
 
 - All `<Box>` elements will be treated as a `p` element type.
 - `<Link>` without a defined `as` prop will be treated as a `a`.
-- `<Link as='a'>` will treated as an `a` element type.
 - `<Link as='button'>` will be treated as a `button` element type.
-- `<Link as='summary'>` will be treated as the raw `Link` type because there is no configuration set for `as='summary'`.
 
 ### Rules
 

lib/rules/a11y-no-visually-hidden-interactive-element.js

@@ -4,7 +4,6 @@ const {generateObjSchema} = require('eslint-plugin-jsx-a11y/lib/util/schemas')
 
 const defaultClassName = 'sr-only'
 const defaultcomponentName = 'VisuallyHidden'
-const defaultHtmlPropName = 'as'
 
 const schema = generateObjSchema({
   className: {type: 'string'},
@@ -18,12 +17,11 @@ const schema = generateObjSchema({
  */
 const INTERACTIVELEMENTS = ['a', 'button', 'summary', 'select', 'option', 'textarea']
 
-const checkIfInteractiveElement = (context, htmlPropName, node) => {
+const checkIfInteractiveElement = (context, node) => {
   const elementType = getElementType(context, node.openingElement)
-  const asProp = getPropValue(getProp(node.openingElement.attributes, htmlPropName))
 
   for (const interactiveElement of INTERACTIVELEMENTS) {
-    if ((asProp ?? elementType) === interactiveElement) {
+    if (elementType === interactiveElement) {
       return true
     }
   }
@@ -32,14 +30,14 @@ const checkIfInteractiveElement = (context, htmlPropName, node) => {
 
 // if the node is visually hidden recursively check if it has interactive children
 const checkIfVisuallyHiddenAndInteractive = (context, options, node, isParentVisuallyHidden) => {
-  const {className, componentName, htmlPropName} = options
+  const {className, componentName} = options
   if (node.type === 'JSXElement') {
     const classes = getPropValue(getProp(node.openingElement.attributes, 'className'))
     const isVisuallyHiddenElement = node.openingElement.name.name === componentName
     const hasSROnlyClass = typeof classes !== 'undefined' && classes.includes(className)
     let isHidden = false
     if (hasSROnlyClass || isVisuallyHiddenElement || !!isParentVisuallyHidden) {
-      if (checkIfInteractiveElement(context, htmlPropName, node)) {
+      if (checkIfInteractiveElement(context, node)) {
         return true
       }
       isHidden = true
@@ -69,11 +67,10 @@ module.exports = {
     const config = options[0] || {}
     const className = config.className || defaultClassName
     const componentName = config.componentName || defaultcomponentName
-    const htmlPropName = config.htmlPropName || defaultHtmlPropName
 
     return {
       JSXElement: node => {
-        if (checkIfVisuallyHiddenAndInteractive(context, {className, componentName, htmlPropName}, node, false)) {
+        if (checkIfVisuallyHiddenAndInteractive(context, {className, componentName}, node, false)) {
           context.report({
             node,
             message:

lib/utils/get-element-type.js

@@ -9,28 +9,18 @@ For now, we only support the mapping of one prop type to an element type, rather
 */
 function getElementType(context, node) {
   const {settings} = context
-  const rawElement = elementType(node)
-  if (!settings) return rawElement
 
-  const componentMap = settings.github && settings.github.components
-  if (!componentMap) return rawElement
-  const component = componentMap[rawElement]
-  if (!component) return rawElement
-  let element = component.default ? component.default : rawElement
+  // check if the node contains a polymorphic prop
+  const polymorphicPropName = settings?.github?.polymorphicPropName ?? 'as'
+  const rawElement = getPropValue(getProp(node.attributes, polymorphicPropName)) ?? elementType(node)
 
-  if (component.props) {
-    const props = Object.entries(component.props)
-    for (const [key, value] of props) {
-      const propMap = value
-      const propValue = getPropValue(getProp(node.attributes, key))
-      const mapValue = propMap[propValue]
+  // if a component configuration does not exists, return the raw element
+  if (!settings?.github?.components?.[rawElement]) return rawElement
 
-      if (mapValue) {
-        element = mapValue
-      }
-    }
-  }
-  return element
+  const defaultComponent = settings.github.components[rawElement]
+
+  // check if the default component is also defined in the configuration
+  return defaultComponent ? defaultComponent : defaultComponent
 }
 
 module.exports = {getElementType}

package.json

@@ -15,7 +15,7 @@
     "lint:eslint-docs": "npm run update:eslint-docs -- --check",
     "lint:js": "eslint .",
     "pretest": "mkdir -p node_modules/ && ln -fs $(pwd) node_modules/",
-    "test": "npm run eslint-check && npm run lint && mocha tests/**/*.js tests/",
+    "test": "mocha tests/**/*.js tests/",
     "update:eslint-docs": "eslint-doc-generator"
   },
   "repository": {
@@ -65,4 +65,4 @@
     "mocha": "^10.0.0",
     "npm-run-all": "^4.1.5"
   }
-}
+}

tests/a11y-no-generic-link-text.js

@@ -26,9 +26,7 @@ ruleTester.run('a11y-no-generic-link-text', rule, {
       settings: {
         github: {
           components: {
-            Link: {
-              props: {as: {undefined: 'a'}},
-            },
+            Link: 'a',
           },
         },
       },
@@ -41,9 +39,7 @@ ruleTester.run('a11y-no-generic-link-text', rule, {
       settings: {
         github: {
           components: {
-            ButtonLink: {
-              default: 'a',
-            },
+            ButtonLink: 'a',
           },
         },
       },
@@ -54,25 +50,14 @@ ruleTester.run('a11y-no-generic-link-text', rule, {
       settings: {
         github: {
           components: {
-            Link: {
-              props: {as: {undefined: 'a'}},
-            },
+            Link: 'a',
           },
         },
       },
     },
     {
       code: '<Test as="a" href="#">Read more</Test>',
       errors: [{message: errorMessage}],
-      settings: {
-        github: {
-          components: {
-            Test: {
-              props: {as: {a: 'a'}},
-            },
-          },
-        },
-      },
     },
     {
       code: "<Box><a href='#'>Click here</a></Box>;",

tests/a11y-no-visually-hidden-interactive-element.js

@@ -44,11 +44,11 @@ ruleTester.run('a11y-no-visually-hidden-interactive-element', rule, {
     },
     {
       code: "<VisuallyHidden as='button'>Submit</VisuallyHidden>",
-      options: [
-        {
-          htmlPropName: 'html',
+      settings: {
+        github: {
+          polymorphicPropName: 'html',
         },
-      ],
+      },
     },
   ],
   invalid: [
@@ -86,12 +86,12 @@ ruleTester.run('a11y-no-visually-hidden-interactive-element', rule, {
     },
     {
       code: "<VisuallyHidden html='button'>Submit</VisuallyHidden>",
-      options: [
-        {
-          htmlPropName: 'html',
-        },
-      ],
       errors: [{message: errorMessage}],
+      settings: {
+        github: {
+          polymorphicPropName: 'html',
+        },
+      },
     },
   ],
 })

tests/utils/get-element-type.js

@@ -34,6 +34,7 @@ function mockSetting(componentSetting = {}) {
     settings: {
       github: {
         components: componentSetting,
+        polymorphicPropName: 'as',
       },
     },
   }
@@ -45,64 +46,36 @@ describe('getElementType', function () {
     expect(getElementType({}, node)).to.equal('a')
   })
 
-  it('returns element type from default if set', function () {
-    const node = mockJSXOpeningElement('Link', [mockJSXAttribute('as', 'summary')])
+  it('returns polymorphic element type', function () {
+    const node = mockJSXOpeningElement('Link', [mockJSXAttribute('as', 'button')])
     const setting = mockSetting({
-      Link: {
-        default: 'button',
-      },
+      Link: 'a',
     })
     expect(getElementType(setting, node)).to.equal('button')
   })
 
-  it('returns element type from matching props setting if set', function () {
-    const setting = mockSetting({
-      Link: {
-        default: 'a',
-        props: {
-          as: {summary: 'summary'},
-        },
-      },
-    })
-
-    const node = mockJSXOpeningElement('Link', [mockJSXAttribute('as', 'summary')])
-    expect(getElementType(setting, node)).to.equal('summary')
-  })
-
   it('returns raw type if no default or matching prop setting', function () {
-    const setting = mockSetting({
-      Link: {
-        props: {
-          as: {summary: 'summary'},
-        },
-      },
-    })
-    const node = mockJSXOpeningElement('Link', [mockJSXAttribute('as', 'p')])
+    const setting = mockSetting({})
+
+    const node = mockJSXOpeningElement('Link')
     expect(getElementType(setting, node)).to.equal('Link')
   })
 
-  it('allows undefined prop to be mapped to a type', function () {
+  it('returns default type if no polymorphic prop is passed in', function () {
     const setting = mockSetting({
-      Link: {
-        props: {
-          as: {undefined: 'a'},
-        },
-      },
+      Link: 'a',
     })
     const node = mockJSXOpeningElement('Link')
     expect(getElementType(setting, node)).to.equal('a')
   })
 
-  it('returns raw type if prop does not match props setting and no default type', function () {
+  it('if rendered as another component check its default type', function () {
     const setting = mockSetting({
-      Link: {
-        props: {
-          as: {undefined: 'a'},
-        },
-      },
+      Link: 'a',
+      Button: 'button',
     })
 
-    const node = mockJSXOpeningElement('Link', [mockJSXAttribute('as', 'p')])
-    expect(getElementType(setting, node)).to.equal('Link')
+    const node = mockJSXOpeningElement('Link', [mockJSXAttribute('as', 'Button')])
+    expect(getElementType(setting, node)).to.equal('button')
   })
 })