GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-06 00:41:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

Update docs/writing-tests/accessibility-testing.mdx

Browse Source 
Co-authored-by: Kyle Gach <kyle.gach@gmail.com>
This commit is contained in:
Valentin Palkovic 2024-12-21 12:44:18 +01:00 committed by GitHub
parent 4d708a0597
commit d7b2b34362
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 4 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
docs/writing-tests/accessibility-testing.mdx
View File

@ -239,15 +239,13 @@ If you enabled the experimental test addon (i.e.,`@storybook/experimental-addon-
<If renderer={['react']}>
### The a11y addon panel does not show violations, although I know there are some
### The addon panel does not show expected violations
Modern React components often use asynchronous techniques like Suspense or React Server Components (RSC) to handle complex data fetching and rendering. These components don’t immediately render their final UI state. Storybook doesn’t inherently know when an async component has fully rendered. As a result, the a11y addon sometimes run too early, before the component finishes rendering, leading to false negatives (no reported violations even if they exist).
Modern React components often use asynchronous techniques like [Suspense](https://react.dev/reference/react/Suspense) or [React Server Components (RSC)](https://react.dev/reference/rsc/server-components) to handle complex data fetching and rendering. These components don’t immediately render their final UI state. Storybook doesn’t inherently know when an async component has fully rendered. As a result, the a11y checks sometimes run too early, before the component finishes rendering, leading to false negatives (no reported violations even if they exist).
To address this issue, we have introduced a feature flag: developmentModeForBuild. This feature flag allows you to set process.env.NODE_ENV to development in built Storybooks, enabling development-related optimizations that are typically disabled in production builds. By enabling this feature flag, you can ensure that React’s act utility is used, which helps ensure that all updates related to a test are processed and applied before making assertions.
To address this issue, we have introduced a feature flag: `developmentModeForBuild`. This feature flag allows you to set `process.env.NODE_ENV` to `'development'` in built Storybooks, enabling development-related optimizations that are typically disabled in production builds. One of those development optimizations is React’s [`act` utility](https://react.dev/reference/react/act), which helps ensure that all updates related to a test are processed and applied before making assertions, like a11y checks.
#### How to enable the feature flag
To enable this feature flag, add the following configuration to your .storybook/main.<js|ts> file:
To enable this feature flag, add the following configuration to your `.storybook/main.js|ts` file:
{/* prettier-ignore-start */}