Storybook: Handle a11y for components with delayed rendering

Created on 22 Dec 2017 · 2Comments · Source: storybookjs/storybook

Issue details

The a11y addon doesn't work with content that loads late. I have a component that waits until data has arrived before rendering, but the a11y addon runs immediately. There is no way to access the underlying axe object used by the addon in order to re-run the test once the content is available.

The best solution would be to magically handle components with delayed rendering. A shortcut solution might be to just add a button to the UI that allows the user to re-run the tests. A way around this issue is to install the aXe Chrome extension, open the preview iframe in a new tab, and run aXe manually on the rendered view.

Steps to reproduce

Install the a11y addon, then include the story I added below.
The a11y panel reports no violations were found and no checks were passed.

Please specify which version of Storybook and optionally any affected addons that you're running

storybook/react 3.2.18
storybook/addon-a11y 3.2.18

Affected platforms

All platforms.

Screenshots / Screencast / Code Snippets (Optional)

class TestA11yComponent extends React.Component {
  state = {
    show: false
  }
  constructor(props) {
    super(props)
    setTimeout(() => this.setState({ show: true }), 1000)
  }
  render() {
    return this.state.show && <div>testing</div>
  }
}
storiesOf('test', module).add('default', () => <TestA11yComponent />)

a11y feature request

Source