Skip to content

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

Open
@AndreGCRamos

Description

@AndreGCRamos

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:

> [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```

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions