Add template literal check for getting value.

TODO: actually build out the template string so that we can check value.

Author: beefancohen

package.json

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

src/util/getAttributeValue.js

@@ -21,6 +21,9 @@ const getAttributeValue = attribute => {
       switch (expression.type) {
         case 'Literal':
           return expression.value;
+        case 'TemplateLiteral':
+          // hot-fix before actually building out raw string value.
+          return Boolean(expression.quasis) || Boolean(expression.expressions);
         case 'Identifier':
           return expression.name == 'undefined' ? undefined : expression.name;
         case 'ArrowFunctionExpression':

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

@@ -36,6 +36,7 @@ ruleTester.run('img-uses-alt', rule, {
     { code: '<img alt={"foo"} />;', parserOptions },
     { code: '<img alt={alt} />;', parserOptions },
     { code: '<img ALT="foo" />;', parserOptions },
+    { code: '<img ALT={`This is the ${alt} text`} />;', parserOptions },
     { code: '<img ALt="foo" />;', parserOptions },
     { code: '<img alt="foo" salt={undefined} />;', parserOptions },
     { code: '<img {...this.props} alt="foo" />', parserOptions },

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

@@ -44,6 +44,7 @@ ruleTester.run('no-access-key', rule, {
     { code: '<div accessKey="h" {...props} />', errors: [ expectedError ], parserOptions },
     { code: '<div acCesSKeY="y" />', errors: [ expectedError ], parserOptions },
     { code: '<div accessKey={"y"} />', errors: [ expectedError ], parserOptions },
+    { code: '<div accessKey={`${y}`} />', errors: [ expectedError ], parserOptions },
     { code: '<div accessKey={accessKey} />', errors: [ expectedError ], parserOptions }
   ]
 });

tests/src/rules/onclick-uses-role.js

@@ -36,6 +36,7 @@ ruleTester.run('onclick-uses-role', rule, {
     { code: '<div onClick={() => void 0} role="button" />;', parserOptions },
     { code: '<div onClick={() => void 0} role={role} />;', parserOptions },
     { code: '<div onClick={() => void 0} role={"button"} />;', parserOptions },
+    { code: '<div onClick={() => void 0} role={`${role}`} />;', parserOptions },
     { code: '<div onClick={() => void 0} role="button" {...props} />;', parserOptions },
     { code: '<div className="foo" />;', parserOptions },
     { code: '<div onClick={() => void 0} role="button" aria-hidden />;', parserOptions },

tests/src/rules/redundant-alt.js

@@ -44,6 +44,7 @@ ruleTester.run('redundant-alt', rule, {
     { code: '<img />', parserOptions },
     { code: '<IMG />', parserOptions },
     { code: '<img alt={undefined} />', parserOptions },
+    { code: '<img alt={`this should pass for ${now}`} />', parserOptions },
     { code: '<img alt={"undefined"} />', parserOptions },
     { code: '<img alt={() => {}} />', parserOptions },
     { code: '<img alt={function(e){}} />', parserOptions },

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

@@ -36,6 +36,7 @@ ruleTester.run('use-label-for', rule, {
     { code: '<label htmlFor="foo" />', parserOptions },
     { code: '<label htmlFor={"foo"} />', parserOptions },
     { code: '<label htmlFor={foo} />', parserOptions },
+    { code: '<label htmlFor={`${id}`} />', parserOptions },
     { code: '<div />', parserOptions },
     { code: '<label htmlFor="foo">Test!</label>', parserOptions },
     { code: '<Label />', parserOptions }, // lower-case convention refers to real HTML elements.