Description
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
- Go to stackblitz example
- Open dev console
- Open button story in docs mode
- See axe timing logs
System
System:
OS: macOS 15.3.2
CPU: (8) arm64 Apple M1 Pro
Shell: 5.9 - /bin/zsh
Binaries:
Node: 22.13.1 - ~/.nvm/versions/node/v22.13.1/bin/node
Yarn: 1.22.22 - /opt/homebrew/bin/yarn
npm: 10.9.2 - ~/.nvm/versions/node/v22.13.1/bin/npm <----- active
pnpm: 9.15.4 - ~/.nvm/versions/node/v22.13.1/bin/pnpm
Browsers:
Chrome: 134.0.6998.166
Edge: 134.0.3124.85
Safari: 18.3.1
npmPackages:
@storybook/addon-a11y: 8.6.11 => 8.6.11
@storybook/addon-essentials: 8.6.11 => 8.6.11
@storybook/addon-interactions: 8.6.11 => 8.6.11
@storybook/angular: 8.6.11 => 8.6.11
@storybook/blocks: ^8.6.11 => 8.6.11
@storybook/icons: ^1.4.0 => 1.4.0
@storybook/test: ^8.6.11 => 8.6.11
@storybook/theming: ^8.6.11 => 8.6.11
chromatic: ^11.12.6 => 11.12.6
eslint-plugin-storybook: ^0.10.1 => 0.10.1
storybook: ^8.4.2 => 8.6.11
Additional context
No response