Description
Describe the bug
The linter breaks when an input
has it's type
defined in a variable rather than as a string
in the template.
To Reproduce
Steps to reproduce the behavior:
- Go to a VueJS working component with
eslint-plugin-vue-a11y
correctly implemented. - If you don't have an
input
element, add one. - Modify
type
to:type
and store it's value in acomputed
ordata
instance. - Run the linter.
Expected behavior
Linter doesn't throw an error and ignores the possible rules to be checked on that input
element
Desktop:
- OS: mac OS
Additional context
Path to file that throws the error:
eslint-plugin-vue-a11y/lib/utils/index.js
Content of line breaking the execution:
if (inputType && value.toUpperCase() === 'HIDDEN') {
Proposed fix:
if (inputType && typeof value === 'string' && value.toUpperCase() === 'HIDDEN') {
Basically we where getting a Node
element, rather than a string
with the input type so when calling value.toUpperCase()
it throws the error you can read below. Checking if it is a string should breaks the flow and allows the linter's execution to proceed.
Error log:
> [email protected] eslint /Users/mycooluser/Projects/checkout
> eslint --config .eslintrc.js --ext .vue --format codeframe components
TypeError: value.toUpperCase is not a function
Occurred while linting /Users/mycooluser/Projects/checkout/components/TextField/TextFieldComp.vue:116
at Object.isHiddenFromScreenReader (/Users/mycooluser/Projects/checkout/node_modules/eslint-plugin-vue-a11y/lib/utils/index.js:84:30)
at EventEmitter.VAttribute[directive=true][key.name.name='on'][key.argument.name='click'] (/Users/mycooluser/Projects/checkout/node_modules/eslint-plugin-vue-a11y/lib/rules/click-events-have-key-events.js:27:17)
at EventEmitter.emit (events.js:197:13)
at NodeEventGenerator.applySelector (/Users/mycooluser/Projects/checkout/node_modules/eslint-plugin-vue-a11y/node_modules/vue-eslint-parser/index.js:3273:26)
at NodeEventGenerator.applySelectors (/Users/mycooluser/Projects/checkout/node_modules/eslint-plugin-vue-a11y/node_modules/vue-eslint-parser/index.js:3287:22)
at NodeEventGenerator.enterNode (/Users/mycooluser/Projects/checkout/node_modules/eslint-plugin-vue-a11y/node_modules/vue-eslint-parser/index.js:3295:14)
at traverse (/Users/mycooluser/Projects/checkout/node_modules/eslint-plugin-vue-a11y/node_modules/vue-eslint-parser/index.js:113:13)
at traverse (/Users/mycooluser/Projects/checkout/node_modules/eslint-plugin-vue-a11y/node_modules/vue-eslint-parser/index.js:120:21)
at traverse (/Users/mycooluser/Projects/checkout/node_modules/eslint-plugin-vue-a11y/node_modules/vue-eslint-parser/index.js:125:13)
at traverse (/Users/mycooluser/Projects/checkout/node_modules/eslint-plugin-vue-a11y/node_modules/vue-eslint-parser/index.js:120:21)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] eslint: `eslint --config .eslintrc.js --ext .vue --format codeframe components`
npm ERR! Exit status 2```