clean

Author: kendallgassner

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

@@ -1,6 +1,43 @@
 const {getProp, getPropValue} = require('jsx-ast-utils')
 const {getElementType} = require('../utils/get-element-type')
 
+const SEMANTIC_ELEMENTS = [
+  'a',
+  'button',
+  'summary',
+  'select',
+  'option',
+  'textarea',
+  'input',
+  'span',
+  'div',
+  'p',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'details',
+  'summary',
+  'dialog',
+  'tr',
+  'th',
+  'td',
+  'label',
+]
+
+const ifSemanticElement = (context, node) => {
+  const elementType = getElementType(context, node.openingElement, true)
+
+  for (const semanticElement of SEMANTIC_ELEMENTS) {
+    if (elementType === semanticElement) {
+      return true
+    }
+  }
+  return false
+}
+
 module.exports = {
   meta: {
     docs: {
@@ -14,7 +51,7 @@ module.exports = {
     return {
       JSXElement: node => {
         const elementType = getElementType(context, node.openingElement)
-        if (elementType !== `iframe`) {
+        if (elementType !== `iframe` && ifSemanticElement(context, node)) {
           const titleProp = getPropValue(getProp(node.openingElement.attributes, `title`))
           if (titleProp) {
             context.report({

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

@@ -15,12 +15,12 @@ const schema = generateObjSchema({
  * because a visually hidden input field might cause a false positive.
  * (e.g. fileUpload https://github.com/primer/react/pull/3492)
  */
-const INTERACTIVELEMENTS = ['a', 'button', 'summary', 'select', 'option', 'textarea']
+const INTERACTIVE_ELEMENTS = ['a', 'button', 'summary', 'select', 'option', 'textarea']
 
 const checkIfInteractiveElement = (context, node) => {
   const elementType = getElementType(context, node.openingElement)
 
-  for (const interactiveElement of INTERACTIVELEMENTS) {
+  for (const interactiveElement of INTERACTIVE_ELEMENTS) {
     if (elementType === interactiveElement) {
       return true
     }

lib/utils/get-element-type.js

@@ -7,15 +7,15 @@ 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) {
+function getElementType(context, node, ignoreMap = false) {
   const {settings} = context
 
   // check if the node contains a polymorphic prop
   const polymorphicPropName = settings?.github?.polymorphicPropName ?? 'as'
   const rawElement = getPropValue(getProp(node.attributes, polymorphicPropName)) ?? elementType(node)
 
   // if a component configuration does not exists, return the raw element
-  if (!settings?.github?.components?.[rawElement]) return rawElement
+  if (ignoreMap || !settings?.github?.components?.[rawElement]) return rawElement
 
   const defaultComponent = settings.github.components[rawElement]
 

tests/a11y-no-title-attribute.js

@@ -29,13 +29,9 @@ ruleTester.run('a11y-no-title-attribute', rule, {
         },
       },
     },
-  ],
-  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}]},
     {
+      // Note: we are only checking semantic elements. We cannot make assumptions about how a React Components is using the title prop.
       code: '<Link title="some title">Submit</Link>',
-      errors: [{message: errorMessage}],
       settings: {
         github: {
           components: {
@@ -44,6 +40,10 @@ ruleTester.run('a11y-no-title-attribute', rule, {
         },
       },
     },
+  ],
+  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}],