a11y accessibility plugin slow on larger components

[DerJacques]

Bug or support request summary

The a11y accessibility plugin for good reasons takes some time to run its analysis.
We have a somewhat large component and it takes the plugin about 3 seconds to complete the analysis.

From reading the code, it appears that the accessibility analysis is run as soon as the component is mounted. Maybe it would make sense to run the analysis on request only?

Steps to reproduce

1. Start a performance recording in chrome
2. Mount a somewhat large component
3. Search for "runA11yCheck"

I have attached a screenshot of the local test results.

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

• @storybook/react 3.4.3
• @storybook/addon-a11y 3.4.3

Affected platforms

Chrome, Mac OS

Screenshots / Screencast / Code Snippets (Optional)

Solution suggestion

I think that it would make sense to run the analysis on demand only. So whenever the accessibility tab is actually opened. As of right now, the analysis is always run.

[ndelangen]

@DerJacques I see that becoming a problem! I'd be happy to take a PR to change the behavior.

Do you think you'd be up for it? any help you'd need from me?

[DerJacques]

@ndelangen Thank you for the quick response! I just gave it a shot, but this would be my first contribution to Storybook and I have a hard time getting a development environment up and running that allows me to make changes to addon-a11y and have them compiled so I can see the changes of my code.

I used your Development guide to get me started, but still am unsure how I can make changes to not only the stories, but the addon I would like to work on. Can you point me in the right direction?

[Keraito]

@DerJacques, I think this is what you're mainly looking for: https://github.com/storybooks/storybook/blob/master/CONTRIBUTING.md#initial-setup, specifically the 7. yarn dev You must have this running for your changes to show up part!

From my experience, the easiest is to do the initial setup, then run yarn dev at root (so your changes will be reflected in the examples), and then go to examples/official-storybook (or examples/cra-kitchen-sink) and then run yarn storybook (to launch the examples locally). Any changes you then apply and save in the addons-a11y of your project will be reflected in the example. Hope this can help you, feel free to ping me if you need help!

[ndelangen]

@DerJacques I'd be more then happy to help you with that! Would you care to join our slack and we can possibly setup a online meeting where I can assist you.

invite to slack

[DerJacques]

@Keraito, thank you for the great explanation! My dev environment works perfectly now 👌

Back to the issue at hand:
My first intuition was to move the following line from /a11y/src/index.js#L26 to the addon panel's componentDidMount hook:

// storybook/addons/a11y/src/components/Panel.js
componentDidMount() {
  this.channel.on(Events.STORY_RENDERED, runA11yCheck);
  this.channel.on(CHECK_EVENT_ID, this.onUpdate);
}

However, it seems that the addon panels are actually all mounted and rendered all the time. They are just hidden using a display: none.

Is there any other way to check if an addon has been selected? Feels a bit bad to look at the URL for this, but that would be a possibility.

Changing the behaviour from display: none to a conditional rendering may be a different way to go, but this would potentially be a breaking change and may have unforeseen consequences.

[DerJacques]

Thanks @ndelangen for the invitation! I am a bit busy at the moment but will try to get in touch asap. :)

[ndelangen]

@DerJacques I'm working on that!

https://github.com/storybooks/storybook/blob/d0b507ec8bc4aeb1868b5f571002a79d7e8b6409/addons/a11y/src/register.js#L13

[DerJacques]

@ndelangen Fantastic! I guess it makes sense to wait for your branch to be merged in? :) If you remember to update this issue when the change is made that would be great. If not, I will make sure to check back in regularly.

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[DerJacques]

Fixed in #3690.