cc-archive / cccatalog-frontend

[PROJECT TRANSFERRED] CC Search is a search tool for CC-licensed and public domain content across the internet.
https://github.com/WordPress/openverse-frontend
MIT License
162 stars 196 forks source link

Switch from `eslint-plugin-vue-a11y` to `eslint-plugin-vuejs-accessibility` #1241

Closed zackkrida closed 3 years ago

zackkrida commented 3 years ago

Problem

As described by @obulat here, eslint-plugin-vue-a11y is no longer maintained, and has been supplanted by https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility. We should switch plugins, and make sure everything is working correctly.

ritesh-pandey commented 3 years ago

Hi @zackkrida I tried migrating to new plug-in.

After making changes in .eslintrc.js and executing npm run lint, I got following errors/warnings. These are based on recommended plug-in rules. Should we make changes in source code to fix these errors/warnings?

/home/ritesh/github/ritesh-pandey/cccatalog-frontend/src/components/AppModal.vue
  2:3  error  Visible, non-interactive elements with click handlers must have at least one keyboard listener  vuejs-accessibility/click-events-have-key-events

/home/ritesh/github/ritesh-pandey/cccatalog-frontend/src/components/Filters/FilterBlock.vue
   5:5  error  Elements with ARIA roles must use a valid, non-abstract ARIA role  vuejs-accessibility/aria-role
  21:5  error  Elements with ARIA roles must use a valid, non-abstract ARIA role  vuejs-accessibility/aria-role

/home/ritesh/github/ritesh-pandey/cccatalog-frontend/src/components/HeroSection.vue
  28:17  error  The autofocus prop should not be used, as it can reduce usability and accessibility for users  vuejs-accessibility/no-autofocus

/home/ritesh/github/ritesh-pandey/cccatalog-frontend/src/components/SearchGridForm.vue
  27:15  error  The autofocus prop should not be used, as it can reduce usability and accessibility for users  vuejs-accessibility/no-autofocus
  70:15  error  The autofocus prop should not be used, as it can reduce usability and accessibility for users  vuejs-accessibility/no-autofocus

/home/ritesh/github/ritesh-pandey/cccatalog-frontend/src/layouts/default.vue
  4:5  error  The element main has an implicit role of main. Defining this explicitly is redundant and should be avoided  vuejs-accessibility/no-redundant-roles

/home/ritesh/github/ritesh-pandey/cccatalog-frontend/src/layouts/with-nav-search.vue
  4:5  error  The element main has an implicit role of main. Defining this explicitly is redundant and should be avoided  vuejs-accessibility/no-redundant-roles

/home/ritesh/github/ritesh-pandey/cccatalog-frontend/src/pages/about.vue
  110:15  error  The element tr has an implicit role of row. Defining this explicitly is redundant and should be avoided  vuejs-accessibility/no-redundant-roles

/home/ritesh/github/ritesh-pandey/cccatalog-frontend/src/pages/photos/_id.vue
  17:5  error  The element aside has an implicit role of complementary. Defining this explicitly is redundant and should be avoided  vuejs-accessibility/no-redundant-roles

/home/ritesh/github/ritesh-pandey/cccatalog-frontend/src/pages/search.vue
  9:7  error  The element aside has an implicit role of complementary. Defining this explicitly is redundant and should be avoided  vuejs-accessibility/no-redundant-roles

/home/ritesh/github/ritesh-pandey/cccatalog-frontend/src/pages/sources.vue
  47:13  error  The element tr has an implicit role of row. Defining this explicitly is redundant and should be avoided  vuejs-accessibility/no-redundant-roles

✖ 12 problems (12 errors, 0 warnings)