Handle null valued props for valid-aria-role.

Fixes #4

Author: Ethan Cohen

src/rules/valid-aria-role.js

@@ -13,28 +13,34 @@ import getAttributeValue from '../util/getAttributeValue';
 
 const errorMessage = 'Elements with ARIA roles must use a valid, non-abstract ARIA role.';
 
+const report = (context, node) => context.report({
+  node,
+  message: errorMessage
+});
+
 module.exports = context => ({
   JSXAttribute: attribute => {
     const normalizedName = attribute.name.name.toUpperCase();
-    const normalizedType = attribute.value.type.toUpperCase();
-
     if (normalizedName !== 'ROLE') {
       return;
     }
 
+    const normalizedType = attribute.value === null ? 'NULL' : attribute.value.type.toUpperCase();
+
     // Only check literals, as we cannot enforce variables representing role types.
     // Check expression containers to determine null or undefined values.
     if (normalizedType === 'JSXEXPRESSIONCONTAINER') {
       const expressionValue = getAttributeValue(attribute);
       const isUndefinedOrNull = expressionValue === undefined || expressionValue === null;
 
       if (isUndefinedOrNull) {
-        context.report({
-          node: attribute,
-          message: errorMessage
-        });
+        report(context, attribute);
       }
 
+      return;
+    } else if (normalizedType === 'NULL') {
+      // Report when <div role /> -- this assumes property truthiness, which is not a valid role.
+      report(context, attribute);
       return;
     } else if (normalizedType !== 'LITERAL') {
       return;

tests/src/rules/valid-aria-role.js

@@ -45,14 +45,16 @@ ruleTester.run('valid-aria-role', rule, {
     { code: '<div></div>', parserOptions },
     { code: '<div role={role} />', parserOptions },
     { code: '<div role={role || "button"} />', parserOptions },
-    { code: '<div role={role || "foobar"} />', parserOptions }
+    { code: '<div role={role || "foobar"} />', parserOptions },
+    { code: '<Bar baz />', parserOptions }
   ].concat(basicValidityTests),
   invalid: [
     { code: '<div role="foobar" />', errors: [ errorMessage ], parserOptions },
     { code: '<div role="datepicker"></div>', errors: [ errorMessage ], parserOptions },
     { code: '<div role="range"></div>', errors: [ errorMessage ], parserOptions },
     { code: '<div role=""></div>', errors: [ errorMessage ], parserOptions },
     { code: '<div role={undefined}></div>', errors: [ errorMessage ], parserOptions },
+    { code: '<div role />', errors: [ errorMessage ], parserOptions },
     { code: '<div role={null}></div>', errors: [ errorMessage ], parserOptions }
   ]
 });