[new] - Better error reporting for aria-unsupported-elements (#57)

* [new] - Better error reporting for aria-unsupported-elements

Instead of only listing the first error as it comes, we can list all of
them in a `forEach` and say which prop is invalid for
`aria-unsupported-elements`

* clearer message for aria-unsupported-elements

Author: beefancohen

src/rules/aria-unsupported-elements.js

@@ -10,9 +10,10 @@
 
 import DOM from '../util/attributes/DOM';
 import ARIA from '../util/attributes/ARIA';
-import { hasAnyProp, elementType } from 'jsx-ast-utils';
+import { elementType } from 'jsx-ast-utils';
 
-const errorMessage = 'This element does not support ARIA roles, states and properties.';
+const errorMessage = invalidProp =>
+  `This element does not support ARIA roles, states and properties. Try removing the prop '${invalidProp}'.`;
 
 module.exports = context => ({
   JSXOpeningElement: node => {
@@ -26,14 +27,15 @@ module.exports = context => ({
     }
 
     const invalidAttributes = Object.keys(ARIA).concat('ROLE');
-    const hasInvalidAttribute = hasAnyProp(node.attributes, invalidAttributes);
 
-    if (hasInvalidAttribute) {
-      context.report({
-        node,
-        message: errorMessage
-      });
-    }
+    node.attributes.forEach(prop => {
+      if (invalidAttributes.indexOf(prop.name.name.toUpperCase()) > -1) {
+        context.report({
+          node,
+          message: errorMessage(prop.name.name)
+        });
+      }
+    });
   }
 });
 

src/rules/role-supports-aria-props.js

@@ -12,7 +12,7 @@
 import ROLES from '../util/attributes/role';
 import ARIA from '../util/attributes/ARIA';
 import getImplicitRole from '../util/getImplicitRole';
-import { getProp, getLiteralPropValue, elementType, hasAnyProp } from 'jsx-ast-utils';
+import { getProp, getLiteralPropValue, elementType } from 'jsx-ast-utils';
 
 const errorMessage = (attr, role, tag, isImplicit) => {
   if (isImplicit) {

tests/src/rules/aria-unsupported-elements.js

@@ -27,10 +27,10 @@ const ruleTester = new RuleTester();
 
 import DOM from '../../../src/util/attributes/DOM';
 
-const errorMessage = {
-  message: 'This element does not support ARIA roles, states and properties.',
+const errorMessage = invalidProp => ({
+  message: `This element does not support ARIA roles, states and properties. Try removing the prop '${invalidProp}'.`,
   type: 'JSXOpeningElement'
-};
+});
 
 // Generate valid test cases
 const roleValidityTests = Object.keys(DOM).map(element => {
@@ -58,15 +58,15 @@ const invalidRoleValidityTests = Object.keys(DOM)
   .filter(element => Boolean(DOM[element].reserved))
   .map(reservedElem => ({
     code: `<${reservedElem} role />`,
-    errors: [ errorMessage ],
+    errors: [ errorMessage('role') ],
     parserOptions
   }));
 
 const invalidAriaValidityTests = Object.keys(DOM)
   .filter(element => Boolean(DOM[element].reserved))
   .map(reservedElem => ({
     code: `<${reservedElem} aria-hidden />`,
-    errors: [ errorMessage ],
+    errors: [ errorMessage('aria-hidden') ],
     parserOptions
   }));