DEV Community

loading...

Discussion on: Taking the Axe to inaccessibility

Collapse
alessia profile image
Alessia

The @axe-core/react cannot respond to the react-router route change(not evaluate the page switched by react-router), do you have any idea on how to solve this problem?

Collapse
stories_of_ren profile image
⚡️Ren⚡️ Author • Edited

I've not had that problem come up before, I'll take a look later today, and see if I have the same problems and try to work them out. If you need to get your pages check immediately, Deque axe does have a dev tools extension, or Lighthouse house a dev tools extension that will check the accessibility but also the performance. Additionally Deque came out with a VS Code extension that is an A11y linter.

I should probably also mention I don't work for Deque, but I do like their products. I'm so sorry you're having issues with the wrapper and I will try to get back with a solution in a timely manner.

Collapse
stories_of_ren profile image
⚡️Ren⚡️ Author

@alessia This was great that you asked this question, because I was able to find some errors in my personal website that need fixing. So I went through and was wondering why I wasn't having the problem with react-router specifically, and it's because when I followed the quick-start guide for web on the react-router docs, it actually has you have react-router-dom.

So when I switched the imports to import from react-router there were problems, likely mine had more to do with the with switching, but the update between pages should work if you update to importing from react-router-dom, I've also successfully used it with @reach/router.

Here is an example repo of where I'm using it with react-router-dom

I hope this kind of helps for now, I'll need to build a new test project to really dig in deeper.