[Issue #287] aria-role-supports-props: false positive when role defin…

…ed by an expression

closes #287
closes #282

fix aria-role-supports-props

 - in case the role is defined by expression or variable, means the role
   cannot be retrieved by tslint, it should pass the test

src/reactA11yRoleSupportsAriaPropsRule.ts

@@ -7,7 +7,7 @@ import * as Lint from 'tslint/lib/lint';
 
 import { ExtendedMetadata } from './utils/ExtendedMetadata';
 import { getImplicitRole } from './utils/getImplicitRole';
-import { getJsxAttributesFromJsxElement, getStringLiteral } from './utils/JsxAttribute';
+import { getJsxAttributesFromJsxElement, getStringLiteral, isEmpty } from './utils/JsxAttribute';
 import { IRole, IRoleSchema } from './utils/attributes/IRole';
 import { IAria } from './utils/attributes/IAria';
 
@@ -69,9 +69,17 @@ class A11yRoleSupportsAriaPropsWalker extends Lint.RuleWalker {
   private checkJsxElement(node: ts.JsxOpeningElement): void {
     const attributesInElement: { [propName: string]: ts.JsxAttribute } = getJsxAttributesFromJsxElement(node);
     const roleProp: ts.JsxAttribute = attributesInElement[ROLE_STRING];
+    let roleValue: string;
+
+    if (roleProp != null) {
+      roleValue = getStringLiteral(roleProp);
+      if (!isEmpty(roleProp) && roleValue == null) { // Do NOT check if can't retrieve the right role.
+        return;
+      }
+    } else {
+      roleValue = getImplicitRole(node); // Get implicit role if not specified.
+    }
 
-    // If role attribute is specified, get the role value. Otherwise get the implicit role from tag name.
-    const roleValue: string = roleProp ? getStringLiteral(roleProp) : getImplicitRole(node);
     const isImplicitRole: boolean = !roleProp && !!roleValue;
     const normalizedRoles: string[] = (roleValue || '').toLowerCase().split(' ')
       .filter((role: string) => !!ROLES[role]);

test-data/a11yRoleSupportsAriaProps/PassingTestInputs/UnretrievableRoleSupportsAllAriaPropsInElement.tsx

@@ -0,0 +1,38 @@
+import React = require('react');
+
+const role = 'some role';
+
+// Only one role.
+const a = <div role={ role } aria-controls />
+const b = <div role={ role } aria-expanded />
+const c = <div role={ role } aria-autocomplete />
+const d = <div role={ role } aria-readonly />
+const e = <div role={ role } aria-required />
+const f = <div role={ role } aria-activedescendant />
+const g = <div role={ role } aria-atomic />
+const h = <div role={ role } aria-busy />
+const i = <div role={ role } aria-current />
+const j = <div role={ role } aria-describedby />
+const k = <div role={ role } aria-details />
+const l = <div role={ role } aria-disabled />
+const m = <div role={ role } aria-dropeffect />
+const n = <div role={ role } aria-errormessage />
+const o = <div role={ role } aria-flowto />
+const p = <div role={ role } aria-grabbed />
+const r = <div role={ role } aria-haspopup />
+const s = <div role={ role } aria-hidden />
+const t = <div role={ role } aria-invalid />
+const u = <div role={ role } aria-keyshortcuts />
+const v = <div role={ role } aria-label />
+const w = <div role={ role } aria-labelledby />
+const x = <div role={ role } aria-live />
+const y = <div role={ role } aria-orientation />
+const z = <div role={ role } aria-owns />
+const a1 = <div role={ role } aria-relevant />
+const b1 = <div role={ role } aria-roledescription />
+
+// Multiple roles.
+const c1 = <div role={ role } aria-expanded aria-pressed aria-readonly />
+
+// when there have explicit role and implicit role, the explicit role will be used first.
+const d1 = <input role={ role } type='reset' aria-readonly />

tests/reactA11yRoleSupportsAriaPropsRuleTests.ts

@@ -28,6 +28,11 @@ describe('a11yRoleSupportsAriaPropsRule', () => {
       const fileName: string = fileDirectory + 'ImplicitRoleSupportsAllAriaPropsInElement.tsx';
       TestHelper.assertNoViolation(ruleName, fileName);
     });
+
+    it('when role is defined but not retrievable', () => {
+      const fileName: string = fileDirectory + 'UnretrievableRoleSupportsAllAriaPropsInElement.tsx';
+      TestHelper.assertNoViolation(ruleName, fileName);
+    });
   });
 
   describe('should fail', () => {