maranran / eslint-plugin-vue-a11y Goto Github PK

Is your feature request related to a problem? Please describe.
When I've used
:alt="content.imageAltText"

  <img
                        v-if="content.image"
                        :src="imageUrl(content.image, '', 'desktop-image')"
                        :alt="content.imageAltText"
                        :title="content.ImageTitleText"
                        class="img-wrapper__image"
                    >

I seem to get the error
error img elements must have an alt prop, either with meaningful text, or an empty string for decorative images vue-a11y/alt-text

I thought this would pass, is there something I'm doing wrong or something I can change to have this pass?

See npm for the vulnerability of the mocha dependency growl link to issue/pr.

Please update mocha (and maybe move it do dev-dependencies as people who install the package don't need to download it).

https://github.com/maranran/eslint-plugin-vue-a11y/blob/master/docs/rules/mouse-events-have-key-events.md

<div onMouseOver={ () => void 0 } onFocus={ () => void 0 } />

Or does this repo copied from anywhere else (without declaration/fork mark)? 🤔

Thanks.

Heya!

The warnings from #1 are still present.

With just the base config turned on I am getting this in my ESLint log

(node:15045) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 VElement listeners added. Use emitter.setMaxListeners() to increase limit (node:15045) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 VElement listeners added. Use emitter.setMaxListeners() to increase limit (node:15045) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 VElement listeners added. Use emitter.setMaxListeners() to increase limit

With the recommended config turned on ESLint won't even run and returns this in the log

The expression evaluated to a falsy value: assert(node && node.type === 'VElement') AssertionError [ERR_ASSERTION]: The expression evaluated to a falsy value: assert(node && node.type === 'VElement') at Object.hasAttribute (/node_modules/eslint-plugin-vue/lib/utils/index.js:86:5)

Describe the bug

When I use eslint-plugin-vue-a11y together with eslint-plugin-vue then vue/require-component-is rule fails to validate the :is property. Even if the :is property exists I'm getting ESLint error.

To Reproduce

1. Add plugin:vue/recommended and plugin:vue-a11y/recommended to ESLint config's extends section
2. Use a component tag together with :is
3. ESLint errors shows up.

Expected behavior
There should be no error if the :is property has a proper value.

Screenshots

When plugin:vue-a11y/recommended is active:

Without plugin:vue-a11y/recommended

Desktop (please complete the following information):

• OS: macOS
• Version eslint-plugin-vue^6.2.2, eslint-plugin-vue-a11y^0.0.31

/home/forge/resources/assets/js/pages/watchlist/index.vue
  1:1  error  Definition for rule 'vue-a11y/rule-name' was not found  vue-a11y/rule-name

$ yarn run eslint
yarn run v1.12.3
$ eslint -c .eslintrc.js --ignore-path .eslintignore --report-unused-disable-directives ./resources/assets/js/**/*.{js,vue}
Aborted (core dumped)

<--- Last few GCs --->

[24260:0x2826b30]    50611 ms: Scavenge 1356.6 (1434.4) -> 1341.1 (1435.4) MB, 2.8 / 0.0 ms  (average mu = 0.366, current mu = 0.394) allocation failure 
[24260:0x2826b30]    50622 ms: Scavenge 1356.7 (1435.4) -> 1341.2 (1436.4) MB, 2.7 / 0.0 ms  (average mu = 0.366, current mu = 0.394) allocation failure 
[24260:0x2826b30]    50632 ms: Scavenge 1356.8 (1436.4) -> 1341.4 (1437.4) MB, 3.0 / 0.0 ms  (average mu = 0.366, current mu = 0.394) allocation failure 


<--- JS stacktrace --->

==== JS stack trace =========================================

    0: ExitFrame [pc: 0x13880f85be1d]
    1: StubFrame [pc: 0x13880f8134b0]
Security context: 0x17b31791e6e9 <JSObject>
    2: /* anonymous */ [0x3b75a65badf1] [/home/mrp6/code/wa/node_modules/functional-red-black-tree/rbtree.js:~67] [pc=0x13880fb675bc](this=0x2555c47212c9 <RedBlackTree map = 0x2896b180a761>,key=11724890,value=0x2555c4720ab9 <Object map = 0x2896b180a919>)
    3: insert [0x372c1b20b9e1] [/home/mrp6/code/wa/node_modules/esl...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0x8dc510 node::Abort() [/usr/bin/node]
 2: 0x8dc55c  [/usr/bin/node]
 3: 0xad9b5e v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/usr/bin/node]
 4: 0xad9d94 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/usr/bin/node]
 5: 0xec7bf2  [/usr/bin/node]
 6: 0xec7cf8 v8::internal::Heap::CheckIneffectiveMarkCompact(unsigned long, double) [/usr/bin/node]
 7: 0xed3dd2 v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [/usr/bin/node]
 8: 0xed4704 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/usr/bin/node]
 9: 0xed7371 v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationSpace, v8::internal::AllocationAlignment) [/usr/bin/node]
10: 0xea07f4 v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationSpace) [/usr/bin/node]
11: 0x114018e v8::internal::Runtime_AllocateInNewSpace(int, v8::internal::Object**, v8::internal::Isolate*) [/usr/bin/node]
12: 0x13880f85be1d 
Aborted (core dumped)
error Command failed with exit code 134.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Happens on both eslint 4 and 5.

Native elements like <button> or <a> (also counting <nuxt-link> / <router-link> into it) don't need additional handlers beside a @click or @click.native listener.

Adding another handler for keydown events will actually lead to bugs and double execution of the function.

Maybe we should add a whitelist to that rule

Describe the bug
v-bind:aria-label should resolve errors caused by form-has-label

To Reproduce
Steps to reproduce the behavior:

1. Enable form-has-label
2. Create a bound input like so: <input :aria-label="test" />

Expected behavior
No error

Screenshots
Each form element must have a programmatically associated label element vue-a11y/form-has-label

Desktop (please complete the following information):

• OS: macOS
• Node version: v12.13.0
• eslint-plugin-vue-a11y version: 0.0.31

Similar to #14, I get the below when using v30, but not v28:

[Error - 21:21:31] TypeError: Cannot read property 'name' of null
Occurred while linting /media/***/manage/pages/products/create.vue:81
    at node.startTag.attributes.find.a (/media/***/manage/node_modules/eslint-plugin-vue-a11y/lib/utils/index.js:66:51)
    at Array.find (<anonymous>)
    at Object.getDirective (/media/***/manage/node_modules/eslint-plugin-vue-a11y/lib/utils/index.js:62:37)
    at Object.getAttribute (/media/***/manage/node_modules/eslint-plugin-vue-a11y/lib/utils/index.js:58:51)
    at EventEmitter.VElement (/media/***/manage/node_modules/eslint-plugin-vue-a11y/lib/rules/interactive-supports-focus.js:36:35)
    at EventEmitter.emit (events.js:187:15)
    at NodeEventGenerator.applySelector (/media/***/manage/node_modules/eslint-plugin-vue-a11y/node_modules/vue-eslint-parser/index.js:3273:26)
    at NodeEventGenerator.applySelectors (/media/***/manage/node_modules/eslint-plugin-vue-a11y/node_modules/vue-eslint-parser/index.js:3287:22)
    at NodeEventGenerator.enterNode (/media/***/manage/node_modules/eslint-plugin-vue-a11y/node_modules/vue-eslint-parser/index.js:3295:14)
    at traverse (/media/***/manage/node_modules/eslint-plugin-vue-a11y/node_modules/vue-eslint-parser/index.js:113:13)

It seems to be interactive-supports-focus this time...

When using a dynamic for / id attribute on label / input elements the rule label-has-for fails.

error: Form label must have associated control (vue-a11y/label-has-for)

<template>
  <label :for="_uid">
    <input :id="_uid">
  </label>
</template>

Expected behaviour:
The rule passes.

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

I have a track in my video element and the captions work well, but it is not being detected by the linter

Hey there ,

I have been using eslint-plugin-vue-a11y and now running with an issue . I have created a form Input component which dynamically accepts the TYPE (text,number,email etc..) . Below is the code that i'm using which works fine but showing error from vue-a11y .

CODE :
<input
v-model="inputValue"
:maxlength="maxLength"
:minLength="minLength"
:type="inputType". ===> here is the prob
:class="$style.input"
@Focus="handleFocus(true)"
@blur="handleFocus(false)"
@keypress="keyPressValidation($event)"
/>

So i understood that since i haven't added any specific TYPE to the Input , this issue is happening . So all i want is to ignore this and proceed , but i just don't find any way to do that .

Here is the error i am getting :
TypeError: value.toUpperCase is not a function
Occurred while linting /base/form-input.vue:2
at Object.isHiddenFromScreenReader (/node_modules/eslint-plugin-vue-a11y/lib/utils/index.js:84:30)
at EventEmitter.VElement (/node_modules/eslint-plugin-vue-a11y/lib/rules/interactive-supports-focus.js:42:22)
at EventEmitter.emit (events.js:203:15)
at NodeEventGenerator.applySelector (/node_modules/eslint-plugin-vue-a11y/node_modules/vue-eslint-parser/index.js:3274:26)
at NodeEventGenerator.applySelectors (/node_modules/eslint-plugin-vue-a11y/node_modules/vue-eslint-parser/index.js:3288:22)
at NodeEventGenerator.enterNode (/node_modules/eslint-plugin-vue-a11y/node_modules/vue-eslint-parser/index.js:3296:14)
at traverse (/node_modules/eslint-plugin-vue-a11y/node_modules/vue-eslint-parser/index.js:113:13)
at traverse (/node_modules/eslint-plugin-vue-a11y/node_modules/vue-eslint-parser/index.js:120:21)
at traverse (/node_modules/eslint-plugin-vue-a11y/node_modules/vue-eslint-parser/index.js:120:21)
at traverse (/node_modules/eslint-plugin-vue-a11y/node_modules/vue-eslint-parser/index.js:120:21)

Please let me know a way to either ignore and proceed or add some support accordingly.

This rule is currently broken, using the attribute for="idOfElement" or htmlFor="idOfElement" both do not work correctly and an error is always thrown.

error: Headings must have content and the content must be accessible by a screen reader
      (vue-a11y/heading-has-content) at src\components\utilities\BaseTitle.vue:3:5:
  1 | <template>
  2 |   <div data-test="baseTitle">
> 3 |     <h3 v-html="title"></h3>
    |     ^

In this component title is a required prop. So the <h3> will always have content. Currently we have to add a <!-- eslint-disable-next-line vue-a11y/heading-has-content -->.

We are now using ESLint 5 regularly. Anything preventing you from upgrading or at the very least upgrading the peer dependency to include both?

Last commit on this repo was 3 years ago.

Major breaking issues are unanswered.

Does this project need a new maintainer? Can I offer my services?

Currently when using eslint-plugin-vue-a11y with eslint@6 there's a warning about version mismatch:

[email protected] requires a peer of eslint@^5.0.0 but none is installed. You must install peer dependencies yourself.

How so?

1. [email protected] requires [email protected]
2. [email protected] requires eslint@5
3. Boom!

How this can be solved?

• We can upgrade [email protected] to [email protected], it should fix the problem

vuejs/eslint-plugin-vue#462

Describe the bug
When using a @click event, I'm prompted to add a @keyup.enter or other keyboard event. However, this frequently leads to "doubleclicks", i.e.:

<button @click="doSomething" @keyup.enter="doSomething">

In this example, pressing Enter triggers both @keyup.enter and @click.

To Reproduce
Steps to reproduce the behavior:

1. Create element with both @click and @keyup.enter
2. Create function, logging when function is fired by the above.
3. Use Enter key on element.
4. Open Developer Tools -> Console.
5. See function has fired twice: A keyboard event and a mouse event, if you examine the event.

Expected behavior
Following eslint rules shouldn't cause strange, actual sideeffects.

Desktop (please complete the following information):

• OS: Windows 10
• Browser Chrome
• Version 80.0.3987.132

Additional context
In my case, I detect the generated click event and return out of function with:

if(!event.sourceCapabilities) {return}

...or relevant variants where appropriate.

I get the following error in the console:

Module build failed (from ./node_modules/eslint-loader/index.js):
TypeError: Cannot read property 'name' of null
Occurred while linting /Users/***/clickdummy.component.vue:22
    at EventEmitter.VAttribute (/Users/***/node_modules/eslint-plugin-vue-a11y/lib/rules/tabindex-no-positive.js:28:40)
    at EventEmitter.emit (events.js:202:15)
    at NodeEventGenerator.applySelector (/Users/***/node_modules/vue-eslint-parser/.temp/external/src/external/node-event-generator.ts:264:26)
    at NodeEventGenerator.applySelectors (/Users/***/node_modules/vue-eslint-parser/.temp/external/src/external/node-event-generator.ts:292:22)
    at NodeEventGenerator.enterNode (/Users/***/node_modules/vue-eslint-parser/.temp/external/src/external/node-event-generator.ts:305:14)
    at traverse (/Users/***/node_modules/vue-eslint-parser/.temp/ast/src/ast/traverse.ts:72:13)
    at traverse (/Users/***/node_modules/vue-eslint-parser/.temp/ast/src/ast/traverse.ts:82:21)
    at traverse (/Users/***/node_modules/vue-eslint-parser/.temp/ast/src/ast/traverse.ts:86:13)
    at traverse (/Users/***/node_modules/vue-eslint-parser/.temp/ast/src/ast/traverse.ts:82:21)
    at traverse (/Users/***/node_modules/vue-eslint-parser/.temp/ast/src/ast/traverse.ts:82:21)
    at traverse (/Users/***/node_modules/vue-eslint-parser/.temp/ast/src/ast/traverse.ts:82:21)
    at traverseNodes (/Users/***/node_modules/vue-eslint-parser/.temp/ast/src/ast/traverse.ts:109:5)
    at scriptVisitor.Program:exit (/Users/***/node_modules/vue-eslint-parser/.temp/src/parser-services.ts:79:25)
    at listeners.(anonymous function).forEach.listener (/Users/***/node_modules/eslint/lib/util/safe-emitter.js:45:58)
    at Array.forEach (<anonymous>)
    at Object.emit (/Users/***/node_modules/eslint/lib/util/safe-emitter.js:45:38)

 @ ./###/components/index.ts 17:11-135
 @ ./###/index.ts
 @ ./###.entry.ts
 @ multi (webpack)-dev-server/client?http://0.0.0.0:3000 (webpack)/hot/dev-server.js ./###.entry.ts

.eslintrc.js

const { argv } = require('yargs');

const extendsPlugins = [];

extendsPlugins.push('airbnb-base');
extendsPlugins.push('plugin:@typescript-eslint/recommended');
extendsPlugins.push('plugin:vue/recommended');

if (argv.withA11y) {
  extendsPlugins.push('plugin:vue-a11y/base');
}

extendsPlugins.push('plugin:import/errors');
extendsPlugins.push('plugin:import/warnings');
extendsPlugins.push('prettier');
extendsPlugins.push('prettier/vue');

module.exports = {
  root: true,
  env: {
    browser: true,
    es6: true,
    jest: true,
  },
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 2017,
    sourceType: 'module',
    project: './tsconfig.json',
  },
  extends: extendsPlugins,
  plugins: ['@typescript-eslint', 'typescript', 'prettier', 'vue-a11y'],
  settings: {
    'import/resolver': {
      webpack: {
        config: './webpack/webpack.config.base.babel.js',
      },
    },
  },
  rules: {
    'import/extensions': [
      'error',
      'always',
      {
        js: 'never',
        ts: 'never',
        scss: 'never',
      },
    ],
    'import/prefer-default-export': 'off',
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
    '@typescript-eslint/indent': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/interface-name-prefix': ['error', 'always'],
    'typescript/interface-name-prefix': ['error', 'always'],

    'class-methods-use-this': 'off',
    'operator-linebreak': 'off',
    'vue/no-v-html': 'off',
  },
  overrides: [
    {
      files: ['*.test.ts'],
      rules: {
        'import/no-extraneous-dependencies': [
          'error',
          {
            devDependencies: true,
          },
        ],
      },
    },
  ],
};

Describe the bug
<video muted /> should not produce an error

To Reproduce
Steps to reproduce the behavior:

1. Enable vue-a11y/media-has-caption
2. Add <video muted />
3. See error

Expected behavior
It should not produce an error

Desktop (please complete the following information):

• Node: v12.15.0

Additional context
Workaround is to use <video :muted="true" />