Repository: vue-a11y/eslint-plugin-vuejs-accessibility (ts)

Issue:
TypeError: roleValue.toLowerCase is not a function in role-has-required-aria-props
Where the `role` attribute is data driven, the linter explodes because it's expecting a string and tried to do `.toLowerCase()`

I have `<div :role="ariaRole"></div>` which is eventually a string, but the linter sees it as a Node.

```
TypeError: roleValue.toLowerCase is not a function
Occurred while linting /Users/gavynmckenzie/dev/bbm/patterns/src/components/molecules/Modal/MModal.vue:55
    at EventEmitter.VElement (/Users/gavynmckenzie/dev/bbm/patterns/node_modules/eslint-plugin-vuejs-accessibility/src/rules/role-has-required-aria-props.js:38:12)
    at EventEmitter.emit (events.js:203:15)
    at NodeEventGenerator.applySelector (/Users/gavynmckenzie/dev/bbm/patterns/node_modules/eslint-plugin-vue/node_modules/vue-eslint-parser/index.js:3276:26)
    at NodeEventGenerator.applySelectors (/Users/gavynmckenzie/dev/bbm/patterns/node_modules/eslint-plugin-vue/node_modules/vue-eslint-parser/index.js:3290:22)
    at NodeEventGenerator.enterNode (/Users/gavynmckenzie/dev/bbm/patterns/node_modules/eslint-plugin-vue/node_modules/vue-eslint-parser/index.js:3298:14)
    at traverse (/Users/gavynmckenzie/dev/bbm/patterns/node_modules/eslint-plugin-vue/node_modules/vue-eslint-parser/index.js:113:13)
    at traverse (/Users/gavynmckenzie/dev/bbm/patterns/node_modules/eslint-plugin-vue/node_modules/vue-eslint-parser/index.js:120:21)
    at traverse (/Users/gavynmckenzie/dev/bbm/patterns/node_modules/eslint-plugin-vue/node_modules/vue-eslint-parser/index.js:120:21)
    at traverse (/Users/gavynmckenzie/dev/bbm/patterns/node_modules/eslint-plugin-vue/node_modules/vue-eslint-parser/index.js:120:21)
    at traverseNodes (/Users/gavynmckenzie/dev/bbm/patterns/node_modules/eslint-plugin-vue/node_modules/vue-eslint-parser/index.js:131:5)
```

Pull request:
Handle non string literal values for element attributes
Closes #62. Supersedes #70.  

Patch:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 37dbdf1..b042c14 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) a
 
 ## [Unreleased]
 
+### Changed
+
+- Handle non string literal role values and `role-has-required-aria-props` and non string literal value for `kind` attribute in `media-has-caption`.
+
 ## [0.5.1] - 2020-09-08
 
 ### Changed
diff --git a/src/rules/media-has-caption.js b/src/rules/media-has-caption.js
index ea9ca07..4e210e9 100644
--- a/src/rules/media-has-caption.js
+++ b/src/rules/media-has-caption.js
@@ -10,7 +10,7 @@ const {
 
 const isCaptionsTrackElement = (node) => {
   const kind = getElementAttributeValue(node, "kind");
-  return kind && kind.toLowerCase() === "captions";
+  return kind && typeof kind === "string" && kind.toLowerCase() === "captions";
 };
 
 module.exports = {
diff --git a/src/rules/role-has-required-aria-props.js b/src/rules/role-has-required-aria-props.js
index 72ae000..490131b 100644
--- a/src/rules/role-has-required-aria-props.js
+++ b/src/rules/role-has-required-aria-props.js
@@ -28,7 +28,7 @@ module.exports = {
         }
 
         const roleValue = getElementAttributeValue(node, "role");
-        if (!roleValue) {
+        if (!roleValue || typeof roleValue !== "string") {
           return;
         }
 


Test patch:
diff --git a/src/rules/__tests__/role-has-required-aria-props.test.js b/src/rules/__tests__/role-has-required-aria-props.test.js
index a1937a5..701d24d 100644
--- a/src/rules/__tests__/role-has-required-aria-props.test.js
+++ b/src/rules/__tests__/role-has-required-aria-props.test.js
@@ -3,7 +3,9 @@ const makeRuleTester = require("./makeRuleTester");
 
 makeRuleTester("role-has-required-aria-props", rule, {
   valid: [
-    "<span role='checkbox' aria-checked='false' aria-labelledby='test' tabindex='0' />"
+    "<span role='checkbox' aria-checked='false' aria-labelledby='test' tabindex='0' />",
+    "<span :role='role' aria-checked='false' aria-labelledby='test' tabindex='0' />",
+    "<span :role='role' />"
   ],
   invalid: [
     {