-
-
Notifications
You must be signed in to change notification settings - Fork 9.5k
[Bug]: addon-a11y runs in docs mode and slows down large docs pages #30975
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Comments
** Disclaimer** This information might be inaccurate, due to it being generated automatically function isDocsMode() { Then conditionally init axe: if (!isDocsMode()) { This disables axe.js in docs mode.
|
Since the change was no effort (besides having tons of issues with the Storybook repo setup...) I already created a PR. I'll try to create a repo with a relatively complex component (let's hope AI can help me out..) and try to reproduce the slow, if so |
Can confirm the same issue, it came suddenly in the last few weeks. One table heavy docs page freezed completely. Seeing axe in the performance panel as the culprit. I've found that instead of disabling the complete addon, another workaround was to set the globals.a11y.manual to true, so that the accessibility addon panel can still be run via click on the little button in the story view. Hint: We had the issues suddenly without upgrade being on SB Angular 8.5.5 for a while, but persisted after upgrading to 8.6.10 |
We’re experiencing the same issue with large stories/components (like a MUI Table). The browser almost freezes when rendering the story. Hover effects and interactions appear tens of seconds, making it nearly unusable. Option 1: Disabling addon-a11y "resolves" the issue for us as well. const config: StorybookConfig = {
addons: [
// '@storybook/addon-a11y',
...
],
...
}; Option 2: Setting const preview: Preview = {
parameters: {
globals: {
a11y: {
// Optional flag to prevent the automatic check
// It fixes the issue with the a11y addon freezing
// cf. https://github.com/storybookjs/storybook/issues/30975
manual: true,
},
},
}
} However, according to @valentinpalkovic 's comment here, this setting will be removed in v9. So it's probably not a future-proof solution.
|
@guicara Typo in your comment. I think you mean
|
@shilman Indeed, you're right! |
I saw this add-on clearly blocking the main thread on Chrome's Performance profiler. TY! |
Describe the bug
We recently discovered in our internal Storybook that a large story in docs mode with a relatively complex component (many elements to check for axe.js) got significantly slower to a point where axe.js is a browser blocking task. Checking each story in story mode runs fast but in docs mode, it is just too much for axejs it seems. To confirm this, I disabled addon-a11y and the story was instantly rendered with no input lags.
We can't tell why addon-a11y suddenly is slow for this story (multiple seconds input lag until the page is fully loaded) but one solution would be to just not run addon-a11y in docs mode. Is there any reason it should run in docs mode? There are no controls to check for a11y violations and to me, it seems it would only make sense to have it turned on in story mode.
If you agree, I'll provide a small PR to fix this.
Reproduction link
https://stackblitz.com/edit/github-q96uz5cy?file=src%2Fstories%2FButton.mdx
Reproduction steps
System
Additional context
No response
The text was updated successfully, but these errors were encountered: