TypeError: roleValue.toLowerCase is not a function in role-has-required-aria-props

[gavmck]

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)

[gavmck]

Any luck with this one? Preventing us rolling this out to prod

[vhoyer]

Any luck with this one? Preventing us rolling this out to prod

for you to be able to deploy, couldn't you add a eslint-ignore to ignore this rule on this case?

[gavmck]

I've just got it sat in a branch at the moment, any idea on an ETA? Still using the old vue-a11y lint rules which seem to be unsupported.

[vhoyer]

well, PRs are welcome 😄

---

I will try taking a look at this today, maybe I can open a PR :D

[gavmck]

Hah yes, I tried taking a look, but didn't see an obvious solution!
I'll try diving in again if I get a moment.
Thank you 🙏

[vhoyer]

well, as you said, not super clear what we should have done about it 🤷

#70

but I opened a PR for ignoring non-string values, let's see what the maintainers think of it 😄

[vhoyer]

Apparently they don't think much of it 😅

[kddnewton]

Just got a new kid at home, I'll get to this when I can.

[vhoyer]

hehe, sorry for the callout, congratz on the kid, 🎉 👶

[gavmck]

@kddeisz One here too, no rush!

[kddnewton]

This will be out in the next release.