Build out template literal strings to determine their value.

Author: Ethan Cohen

package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-jsx-a11y",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "A static analysis linter of jsx and their accessibility with screen readers.",
   "keywords": [
     "eslint",

src/util/buildTemplateLiteral.js

@@ -0,0 +1,34 @@
+'use strict';
+
+/**
+ * Returns the string value of a template literal object.
+ * Tries to build it as best as it can based on the passed
+ * prop. For instance `This is a ${prop}` will return 'This is a prop'.
+ *
+ * If the template literal builds to undefined (`${undefined}`), then
+ * this should return undefined.
+ */
+const buildTemplateLiteral = templateLiteral => {
+  const {
+    quasis,
+    expressions
+  } = templateLiteral;
+  const partitions = quasis.concat(expressions);
+
+  const rawString = partitions.sort((a, b) => a.start - b.start).reduce((raw, part) => {
+    const {
+      type
+    } = part;
+    if (type === 'TemplateElement') {
+      return raw + part.value.raw;
+    } else if (type === 'Identifier') {
+      return raw + part.name;
+    }
+
+    return raw;
+  }, '');
+
+  return rawString === "undefined" ? undefined : rawString;
+};
+
+export default buildTemplateLiteral;

src/util/getAttributeValue.js

@@ -1,5 +1,7 @@
 'use strict';
 
+import buildTemplateLiteral from './buildTemplateLiteral';
+
 /**
  * Returns the value of a given attribute.
  * Different types of attributes have their associated
@@ -14,16 +16,15 @@ const getAttributeValue = attribute => {
   } else if (attribute.type === 'JSXAttribute') {
 
     if (attribute.value.type === 'Literal') {
-      return attribute.value.value;
+      return attribute.value.value === "" ? undefined : attribute.value.value;
     } else if (attribute.value.type === 'JSXExpressionContainer') {
       const expression = attribute.value.expression;
 
       switch (expression.type) {
         case 'Literal':
-          return expression.value;
+          return expression.value === "" ? undefined : expression.value;
         case 'TemplateLiteral':
-          // hot-fix before actually building out raw string value.
-          return Boolean(expression.quasis) || Boolean(expression.expressions);
+          return buildTemplateLiteral(expression);
         case 'Identifier':
           return expression.name == 'undefined' ? undefined : expression.name;
         case 'ArrowFunctionExpression':

tests/src/rules/img-uses-alt.js

@@ -49,6 +49,8 @@ ruleTester.run('img-uses-alt', rule, {
   invalid: [
     { code: '<img />;', errors: [ expectedError ], parserOptions },
     { code: '<img alt={undefined} />;', errors: [ expectedError ], parserOptions },
+    { code: '<img alt={`${undefined}`} />;', errors: [ expectedError ], parserOptions },
+    { code: '<img alt="" />;', errors: [ expectedError ], parserOptions },
     { code: '<img src="xyz" />', errors: [ expectedError ], parserOptions },
     { code: '<img {...this.props} />', errors: [ expectedError ], parserOptions }
   ]

tests/src/rules/no-access-key.js

@@ -36,7 +36,8 @@ ruleTester.run('no-access-key', rule, {
   valid: [
     { code: '<div />;', parserOptions },
     { code: '<div {...props} />', parserOptions },
-    { code: '<div accessKey={undefined} />', parserOptions }
+    { code: '<div accessKey={undefined} />', parserOptions },
+    { code: '<div accessKey={`${undefined}`} />', parserOptions }
   ],
   invalid: [
     { code: '<div accesskey="h" />', errors: [ expectedError ], parserOptions },
@@ -45,6 +46,7 @@ ruleTester.run('no-access-key', rule, {
     { code: '<div acCesSKeY="y" />', errors: [ expectedError ], parserOptions },
     { code: '<div accessKey={"y"} />', errors: [ expectedError ], parserOptions },
     { code: '<div accessKey={`${y}`} />', errors: [ expectedError ], parserOptions },
+    { code: '<div accessKey={`This is ${bad}`} />', errors: [ expectedError ], parserOptions },
     { code: '<div accessKey={accessKey} />', errors: [ expectedError ], parserOptions }
   ]
 });

tests/src/rules/use-label-for.js

@@ -45,6 +45,7 @@ ruleTester.run('use-label-for', rule, {
   invalid: [
     { code: '<label id="foo" />', errors: [ expectedError ], parserOptions },
     { code: '<label htmlFor={undefined} />', errors: [ expectedError ], parserOptions },
+    { code: '<label htmlFor={`${undefined}`} />', errors: [ expectedError ], parserOptions },
     { code: '<label>First Name</label>', errors: [ expectedError ], parserOptions },
     { code: '<label {...props}>Foo</label>', errors: [ expectedError ], parserOptions }
   ]