Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Execution breaks when an input has type defined in a variable #19

Open
AndreGCRamos opened this issue Oct 1, 2019 · 0 comments
Open

Comments

@AndreGCRamos
Copy link

AndreGCRamos commented Oct 1, 2019

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:

  1. Go to a VueJS working component with eslint-plugin-vue-a11y correctly implemented.
  2. If you don't have an input element, add one.
  3. Modify type to :type and store it's value in a computed or data instance.
  4. 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:

> checkout-view@2.4.0-SNAPSHOT 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! checkout-view@2.4.0-SNAPSHOT eslint: `eslint --config .eslintrc.js --ext .vue --format codeframe components`
npm ERR! Exit status 2```
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant