From b81ad57cb265b4e502c61ac6849b7041d5f3a30e Mon Sep 17 00:00:00 2001
From: Garrow Bedrossian <garrow.bedrossian@gmail.com>
Date: Wed, 31 Jan 2018 21:26:28 -0500
Subject: [PATCH] #414 fix type error in react-ally-img-has-alt rule

Add warning throwing test for undefined roles

Coerce possibly undefined role attribute to string

closes #414
closes #390
closes #410
---
 src/reactA11yImgHasAltRule.ts                              | 2 +-
 src/tests/reactA11yImgHasAltRuleTests.ts                   | 5 +++++
 ...mentHasNonEmptyAltValueAndUndefinedPresentationRole.tsx | 7 +++++++
 3 files changed, 13 insertions(+), 1 deletion(-)
 create mode 100644 test-data/a11yImgHasAlt/DefaltTests/PassingTestInputs/ImgElementHasNonEmptyAltValueAndUndefinedPresentationRole.tsx

diff --git a/src/reactA11yImgHasAltRule.ts b/src/reactA11yImgHasAltRule.ts
index 6aaf4ef46..e0fbb95b9 100644
--- a/src/reactA11yImgHasAltRule.ts
+++ b/src/reactA11yImgHasAltRule.ts
@@ -100,7 +100,7 @@ class ImgHasAltWalker extends Lint.RuleWalker {
         } else {
             const roleAttribute: ts.JsxAttribute = attributes[ROLE_STRING];
             const roleAttributeValue: string = roleAttribute ? getStringLiteral(roleAttribute) : '';
-            const isPresentationRole: boolean = !!roleAttributeValue.toLowerCase().match(/\bpresentation\b/);
+            const isPresentationRole: boolean = !!String(roleAttributeValue).toLowerCase().match(/\bpresentation\b/);
             const isEmptyAlt: boolean = isEmpty(altAttribute) || getStringLiteral(altAttribute) === '';
             const allowNonEmptyAltWithRolePresentation: boolean = options.length > 1
                 ? options[1].allowNonEmptyAltWithRolePresentation
diff --git a/src/tests/reactA11yImgHasAltRuleTests.ts b/src/tests/reactA11yImgHasAltRuleTests.ts
index 0085702db..454cbc2ac 100644
--- a/src/tests/reactA11yImgHasAltRuleTests.ts
+++ b/src/tests/reactA11yImgHasAltRuleTests.ts
@@ -46,6 +46,11 @@ describe('reactA11yImgHasAlt', () => {
         TestHelper.assertNoViolation(ruleName, fileName);
       });
 
+      it('when the img element has non-empty alt value and undefined presentation role', () => {
+          const fileName: string = fileDirectory + 'ImgElementHasNonEmptyAltValueAndUndefinedPresentationRole.tsx';
+          TestHelper.assertNoViolation(ruleName, fileName);
+      });
+
       it('when the img element has non-empty alt value and presentation role when option is enabled', () => {
         const fileName: string = fileDirectory + 'ImgElementHasNonEmptyAltValueAndPresentationRole.tsx';
         const ruleOptions: any[] = [[], { allowNonEmptyAltWithRolePresentation: true }];
diff --git a/test-data/a11yImgHasAlt/DefaltTests/PassingTestInputs/ImgElementHasNonEmptyAltValueAndUndefinedPresentationRole.tsx b/test-data/a11yImgHasAlt/DefaltTests/PassingTestInputs/ImgElementHasNonEmptyAltValueAndUndefinedPresentationRole.tsx
new file mode 100644
index 000000000..1ccf19883
--- /dev/null
+++ b/test-data/a11yImgHasAlt/DefaltTests/PassingTestInputs/ImgElementHasNonEmptyAltValueAndUndefinedPresentationRole.tsx
@@ -0,0 +1,7 @@
+import React = require('react');
+
+let validAltValue;
+const a = <img role={undefined} alt='validAltValue' />
+const b = <img role={undefined} Alt={validAltValue} />
+const c = <img role={undefined} ALT={'validAltValue'} />
+const d = <img role={undefined} alt={validAltValue + 'validAltValue'} />