Consider integrating with React Axe
https://github.com/dequelabs/react-axe/
React Axe would handle all of the DOM analysis for us so we wouldn't be recreating the wheel here. We would get the added benefit of having warnings synchronized between the console and the browser window as well.
I am not even sure if it's really possible at this point, as it doesn't look like react-axe exposes its logic. We might also consider forking it and exposing logic as a hook that we can use for both console warnings and our overlay components. Thoughts?
Interesting idea!
I'm not sure if this would be worth it for a couple of reasons:
- I feel like the overlays are superior to console warnings, which are just a bunch of messages that are hard to decipher and link to a specific node. I mean, if you want the console logs, then maybe
react-axeshould be used instead of this library? - Our component variant is much more flexible in its application. Meaning, you don't have to run axe on your entire app, but wrap it around components. I didn't look too closely at the implementation of
react-axe, so maybe it could be modified to only run on specific component trees. - I don't see
react-axedoing anything special in terms of DOM analysis. It just seems to format the violations and print them to console.
Yeah, I haven't vetted the idea thoroughly so it's possible there are some gaps. I want to explore it a bit more before adding to the conversation.
As far as not needing console logs, perhaps that's true. But I like waving as many flags as possible if they can nudge developers in the right direction. That would be my main motivation for adding them. Devs hate a dirty console, let's push them to clean it up!