Merge pull request #464 from github/fix-a11y-no-title-attribute

[Fix] Only look at semantic elements for `a11y-no-title-attribute`

Author: kendallgassner

lib/rules/a11y-no-title-attribute.js

@@ -50,7 +50,7 @@ module.exports = {
   create(context) {
     return {
       JSXElement: node => {
-        const elementType = getElementType(context, node.openingElement)
+        const elementType = getElementType(context, node.openingElement, true)
         if (elementType !== `iframe` && ifSemanticElement(context, node)) {
           const titleProp = getPropValue(getProp(node.openingElement.attributes, `title`))
           if (titleProp) {

lib/utils/get-element-type.js

@@ -7,15 +7,19 @@ If a prop determines the type, it can be specified with `props`.
 
 For now, we only support the mapping of one prop type to an element type, rather than combinations of props.
 */
-function getElementType(context, node, ignoreMap = false) {
+function getElementType(context, node, lazyElementCheck = false) {
   const {settings} = context
 
+  if (lazyElementCheck) {
+    return elementType(node)
+  }
+
   // check if the node contains a polymorphic prop
   const polymorphicPropName = settings?.github?.polymorphicPropName ?? 'as'
   const rawElement = getLiteralPropValue(getProp(node.attributes, polymorphicPropName)) ?? elementType(node)
 
   // if a component configuration does not exists, return the raw element
-  if (ignoreMap || !settings?.github?.components?.[rawElement]) return rawElement
+  if (!settings?.github?.components?.[rawElement]) return rawElement
 
   const defaultComponent = settings.github.components[rawElement]
 

tests/a11y-no-title-attribute.js

@@ -40,20 +40,13 @@ ruleTester.run('a11y-no-title-attribute', rule, {
         },
       },
     },
+    {
+      // Note: we are only checking semantic elements. We cannot make assumptions about how a React Components is using the title prop.
+      code: '<Link as="a" title="some title">Submit</Link>',
+    },
   ],
   invalid: [
     {code: '<a title="some title" href="github.com">GitHub</a>', errors: [{message: errorMessage}]},
     {code: '<span><button title="some title">submit</button></span>', errors: [{message: errorMessage}]},
-    {
-      code: '<Component as="a" title="some title">Submit</Component>',
-      errors: [{message: errorMessage}],
-      settings: {
-        github: {
-          components: {
-            Component: 'iframe',
-          },
-        },
-      },
-    },
   ],
 })