From d7b2b3436208b6dd41bd9cb4bf170b209f85a3c9 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Sat, 21 Dec 2024 12:44:18 +0100 Subject: [PATCH] Update docs/writing-tests/accessibility-testing.mdx Co-authored-by: Kyle Gach --- docs/writing-tests/accessibility-testing.mdx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/docs/writing-tests/accessibility-testing.mdx b/docs/writing-tests/accessibility-testing.mdx index d275839c213..48ce67a1b4a 100644 --- a/docs/writing-tests/accessibility-testing.mdx +++ b/docs/writing-tests/accessibility-testing.mdx @@ -239,15 +239,13 @@ If you enabled the experimental test addon (i.e.,`@storybook/experimental-addon- -### 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. file: +To enable this feature flag, add the following configuration to your `.storybook/main.js|ts` file: {/* prettier-ignore-start */}