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.