1

I have an Ionic React app that I am trying to test using axe-core-npm

Here's my basic app setup:

const startAccessibilityTestingIfDebug = () => {
  if (showDebugInfo) {
    import('@axe-core/react').then((axe) => {
      axe.default(React, ReactDOM, 1000, config);
      startIonic();
    });
  } else {
    startIonic();
  }
};

const startIonic = () => {
  setupIonicReact();
  ReactDOM.render(<App />, document.getElementById('root'));
};

When I serve my app via npm run serve (Ionic is using CRA v5), then my app loads at localhost:8100 and I can see the axe errors in the browser's console-- but only for the initial page load.

Even if I navigate to different pages of my app (Ionic uses react-router v5), I don't see any new axe information. If I reload the page, I do see the new errors.

So, it seems like axe is only printing information for the initial page load, but it should be printing info for every component load. What am I doing wrong?

I found this tutorial on using axe to test accessibility, and the comments suggest other people are having the same problem. There is no solution identified in those comments.

Patrick Kenny
  • 4,515
  • 7
  • 47
  • 76
  • Are you seeing any logs after the initial page load but before navigating? For example, if you have things on the first page that trigger new elements to load or hide, does axe trigger logs for those events? – Steven Lambert Jan 03 '22 at 18:33
  • @StevenLambert In the browser console, I get logs for the very first page, but only once. The "initial page load" actually includes several calls to React ``, but I only get one set of axe issues. – Patrick Kenny Jan 04 '22 at 02:38
  • 1
    Just a heads up, we might have identified the problem. Are you by chance using react 17? We were notified of a problem with react 17 using @axe-core/react and have a pr opened that might fix it https://github.com/dequelabs/axe-core-npm/pull/437 – Steven Lambert Feb 10 '22 at 17:03
  • @StevenLambert Yes, I'm using react 17. I'll try to check out the PR when I get a free moment. – Patrick Kenny Feb 10 '22 at 17:33
  • 1
    Update on this. We released @axe-core/react 4.4.1 which should now properly support React 17. Might fix this particular issue. – Steven Lambert Mar 10 '22 at 16:59

0 Answers0