search

vue-a11y / vue-axe

Accessibility auditing for Vue.js applications.
https://axe.vue-a11y.com/
MIT License
187 stars 13 forks source link

Console errors: Cannot read property 'violations' of undefined -- Nuxt #32

Open tylergrow opened 4 years ago

tylergrow commented 4 years ago

Seeing two errors come up on Nuxt over and over despite following documentation for installing.

Everything seems to be working okay, but I see two errors on each page after refreshing:

Image of the console errors thrown

image

My best guesses for these errors

The first issue appears (Cannot read property 'violations' of undefined from vue-axe.esm.js) to be related to vue-axe.

The second is coming from axe.js (Uncaught (in promise) Error: No elements found for include in page Context). From what I can tell, this isn't the axe.js file in plugins/axe.js. Of course, I could be mistaken.

Attempted troubleshooting

I deleted alt text from an image and saved it; after a hot reload the errors do not log, but if I then refresh the page they are logged.

Console after running env in dev

First run of page - Image has alt text image

After saving without alt on image

Hot reloaded page - removed alt text and saved image

Then after refreshing

Not a hot reload - still no alt text image

On the bright side

Besides those console errors, everything else seems to work great!!

Help me help you

Sorry if my issue lacks info. (I'm not the main dev on our small team, and my knowledge of Nuxt and Vue-Axe could use improvement -- obviously). If I can provide more info or logs, let me know.

Side note

Accessibility is a top priority for our team (WCAG AA 2.1), and I would love to get this implemented to save our devs time and provide them with an awesome resource. I'm certified in WCAG through WebAIM, but your plugin is a better resource than me :).

service-paradis commented 4 years ago

Just wanted to say that I got the same errors using Vue.

ktquez commented 4 years ago

@skillstruck @service-paradis

I'm sorry for answering so late.

I am working on the new version of vue-axe, and I believe that I have already discovered the problem.

Soon I will upload a correction for the current version.

I will notify you here when the correction is available.

Thank you all.

simondib commented 3 years ago

@ktquez Any update on this fix?

lucas-caponi-playkids commented 3 years ago

I'm with this problem too using it with Nuxt.js

ktquez commented 3 years ago

I'm sorry for not paying attention to this issue before, but I have been busy for the past few months. I'll check it out this week and as soon as it's resolved I'll let you know here.

ktquez commented 3 years ago

I made some changes based on the vue-axe-next, then tested it on a nuxt project and did not receive any more errors. Please, test again using v2.4.4 and if the errors on the console stop, give us feedback here.

Thanks

simondib commented 3 years ago

@ktquez I just tested the latest package and the issue appears fixed - thanks!

simondib commented 3 years ago

@ktquez Sorry, I spoke too soon -- still seeing occasionally seeing these 'violation' errors.

123survesh commented 3 years ago

I too am facing this issue, I am using vue-axe (2.4.4) and axe-core (4.1.1).

This happens to me in a page where I have an ajax call,

  1. First the page loads and Vue-axe prints the corresponding issues in the console.
  2. Then when the ajax call's response comes in and the UI changes, the console is cleared and I get this error message.
darrinmn9 commented 3 years ago

I also get this error alot. It happens 100% of the time if I open and then close a modal (im using the Modal component from BootstrapVue). I am not using Nuxt, just a client-side SPA scaffolded via vue-cli.

ktquez commented 3 years ago

Hi guys, thanks for feedback. This week I will update vue-axe for Vue 2 and from the next version a more friendly popup will be used. See demo

lucas-caponi-playkids commented 3 years ago

Some update for this?

ktquez commented 3 years ago

Sorry @lucas-caponi-playkids

I should have already finished this issue. At the beginning of the year, my father passed away, and it impacted me a lot. I promise to return as soon as possible and launch the new version of vue-axe for Vue 2.

darrinmn9 commented 3 years ago

I'm so sorry to hear that @ktquez, make sure you take as much time as you need to focus on the things that matter in life! this issue can obviously wait.

nmackey commented 3 years ago

Any updates on this? I'm still seeing the issue that @123survesh detailed above.