Skip to content

Commit

Permalink
Update docs/writing-tests/accessibility-testing.mdx
Browse files Browse the repository at this point in the history
Co-authored-by: Kyle Gach <kyle.gach@gmail.com>
  • Loading branch information
valentinpalkovic and kylegach authored Dec 21, 2024
1 parent 4d708a0 commit d7b2b34
Showing 1 changed file with 4 additions and 6 deletions.
10 changes: 4 additions & 6 deletions docs/writing-tests/accessibility-testing.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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 */}

Expand Down

0 comments on commit d7b2b34

Please sign in to comment.