dequelabs / react-axe

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

AXE not analyzing changes updated from React-Router #122

Closed sudPatil closed 4 years ago

sudPatil commented 5 years ago

Hi, I am using basic implementation of react to test a11y using axe. But once same code integrated with react-router, Axe is not analyzing component for a11y errors updated by Router.

App.js

axe(React, ReactDOM, 1000);
ReactDOM.render(
    <Provider store={store}>
        <RouterCom />
    </Provider>, document.getElementById('root')
);

RouterCom.js

<Router history={this.history}>
    <div><Link to='/'>Home</Link></div>
    <div><Link to='/about'>about</Link></div>
    <div><Link to='/profile'>profile</Link></div>
    <Switch>
        <Route exact path='/' render={() => (<div><img src="#" title="home" /></div>)} />
        <Route path='/about' render={() => (<img src="#" />)} />
        <Route path='/profile' component={Profile} />
    </Switch>
</Router>

On first load console giving error for alt text, but once clicked on other links( about/profile) its not reporting any issues from current loaded component( about / profile).

On clearing console and clicking on home link not giving original error also.

My assumption is it should give error for all dynamic loaded component if any. If not can anybody explain how to achieve a11y testing in such scenario.

Version using

"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-axe": "^3.3.0",
"react-router-dom": "^5.1.2",

Note

straker commented 4 years ago

We have moved this package to be under our axe-core-npm monorepo for easier management. As a result, this repository will be deprecated in the coming weeks.

I have transferred the issue so we can still keep track of it.