search

dequelabs / react-axe

[DEPRECATED] Accessibility auditing for React.js applications
Other
1.16k stars 45 forks source link

Console blowing up when unable to check styled component nodes #144

Closed katy6514 closed 4 years ago

katy6514 commented 4 years ago

Hello! Very excited about this package, but currently it's in a basically unusable state for my team's app. It doesn't appear to have access to, or is unable to evaluate my Styled Component nodes. The console is blowing up with 2000+ aXe error: could not check nodes (screen shot below)

Screen Shot 2020-03-13 at 4 25 05 PM

Is there a way to filter these out? I've tried using the plugin's include/exclude context object with no luck, and I cannot seem to successfully filter them out of the console so my team can see the New aXe issues the plugin is able to evaluate.

I'd love to be able to use this package with a linter to catch a11y issues before they even make it into the shared codebase. Any guidance appreciated.

react: 16.8.6 react-dom: 16.8.6 react-axe: ^3.4.1

atdrago commented 4 years ago

We are also seeing this error on react-axe 3.4.1 with react/react-dom 16.12.0.

I'm seeing it happen when a component that contains a styled-component gets removed from the DOM.

straker commented 4 years ago

Thanks for the issue. We'll take a look to see what is causing the problem.

badtant commented 4 years ago

I'm also seeing this problem when I have svgs that have "use links". <svg><use xlink:href="#clock"></use></svg>

ColeBW commented 4 years ago

Any updates on this? Also running into this issue. Thanks

TheRohitSharma commented 4 years ago

We're also getting spammed with this in the console, and it's causing noticeable performance issues during development. May eventually see if I can figure out why it's happening and PR.

katy6514 commented 4 years ago

I was able to remove these errors by installing an earlier version of the plugin to
"react-axe": "^3.3.0", not sure if parts of the app are going unevaluated now but at least the console isn't full red all the time.

EDIT: note that if you lower your version to 3.3.0, you will not be able to use the include/exclude objects for ignoring a class of objects, just an FYI that took me a long time to figure out

will-ks commented 4 years ago

I was facing this issue too. It's not specific to styled components nodes, as I'm not using styled components.

The problem seems to be related to the true debouncing introduced in https://github.com/dequelabs/react-axe/pull/135.

Seems that the debouncing is leading to react-axe trying to check nodes on unmounted components.

It can be fixed by simply firing on the leading edge instead of the trailing edge. @straker, you mention in #135:

We can discuss if we want react-axe to fire on the leading edge or the trailing edge (which is where it is currently).

I'm not sure what other implications this would have, but this might be a strong reason to use the leading edge?

straker commented 4 years ago

Interesting. That would make sense. Now that I can probably reproduce this I can set up some tests to see if leading edge fixes the issues. It'll be a bit though as we have a major release of axe-core coming up that I need to finish first.

If anyone would like to create a pr to solve this that would be most helpful.

straker commented 4 years ago

React axe v3.5.0 was released and hopefully should solve this problem https://www.npmjs.com/package/react-axe

straker commented 4 years ago

Going to close this issue as it seems to have been resolved as no one has commented that the new release still has it. Please re-open if the issue is not resolved.

katy6514 commented 4 years ago

following up, this update appears to be working perfectly so far! thank you!! Excited to get this in my team's codebase