Eslint-plugin-vue: Supporting (optional) Warnings for Accessibility Rules

[emilyruby]

It would be great if eslint-plugin-vue supported some accessibility rules, allowing for warnings to be shown when guidelines are not met- similar to eslint-plugin-jsx-a11y or react-a11y but for .vue files.

I found a closed issue on the core Vue repo which has the same question, but was never reopened here as suggested. I found no issues for a11y rules, so thought I would ask.

What category of rule is this? (place an "X" next to just one item)

[ ] Enforces code style
[X] Warns about a potential error
[ ] Suggests an alternate way of doing something
[ ] Other (please specify:)

[mysticatea]

Thank you for this issue!

Sounds good to me.
I think we can add accessibility category into this plugin.

[michalsnik]

Sounds good indeed 👍 If you have any specific rules in mind feel free to share your propositions in separate issues @emilyruby so we can discuss each one separately :)

[phillbaker]

I'd be interested in helping out on this issue, basically converting some (or most) of the rules in eslint-plugin-jsx-a11y to this library.

js-a11y currently defines over 30 rules - I didn't want to create 30 new issues and spam y'all, so wanted to drop an initial list here and maybe a pick a few for initial submission/separate issues? I've checked the ones I think would be highest impact:

• [ ] accessible-emoji
• [x] alt-text
• [ ] anchor-has-content
• [ ] anchor-is-valid
• [ ] aria-activedescendant-has-tabindex
• [ ] aria-props
• [ ] aria-proptypes
• [ ] aria-role
• [ ] aria-unsupported-elements
• [ ] click-events-have-key-events
• [ ] heading-has-content
• [ ] html-has-lang
• [ ] iframe-has-title
• [ ] img-redundant-alt
• [ ] interactive-supports-focus
• [x] label-has-for
• [ ] lang
• [ ] media-has-caption
• [ ] mouse-events-have-key-events
• [ ] no-access-key
• [x] no-autofocus
• [ ] no-distracting-elements
• [ ] no-interactive-element-to-noninteractive-role
• [ ] no-noninteractive-element-interactions
• [ ] no-noninteractive-element-to-interactive-role
• [ ] no-noninteractive-tabindex
• [x] no-onchange
• [ ] no-redundant-roles
• [ ] no-static-element-interactions
• [x] role-has-required-aria-props
• [ ] role-supports-aria-props
• [ ] scope
• [ ] tabindex-no-positive
• [ ] label-has-associated-control https://github.com/evcohen/eslint-plugin-jsx-a11y/pull/326

[maranran]

maybe you need this https://github.com/maranran/eslint-plugin-vue-a11y @emilyruby

[michalsnik]

I think we can close this issue, as there is a dedicated plugin that does exactly that :) Thanks @maranran !