From 5681d592739c39aae0c750d0166299a4645d7ffa Mon Sep 17 00:00:00 2001 From: winkerVSbecks Date: Fri, 20 Dec 2024 11:53:41 -0500 Subject: [PATCH] add faq to a11y test page about RSC and async components --- src/content/notInNavigation/accessibility.md | 29 ++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/src/content/notInNavigation/accessibility.md b/src/content/notInNavigation/accessibility.md index 9130c4d1..eaafcfa5 100644 --- a/src/content/notInNavigation/accessibility.md +++ b/src/content/notInNavigation/accessibility.md @@ -89,3 +89,32 @@ Chromatic builds upon Storybook's accessibility testing by providing automated t No, automated testing catches a subset of accessibility issues. Manual testing is still recommended for comprehensive accessibility compliance. + +
+Why don't the accessibility results show violations, even though I know there are some? + +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). + +This only impacts users using: +* Storybook 8.5+ +* Async components (RSC, or using Suspense or similar) +* Stories without a play function that awaits for the final component state + +To address this issue, enable the `developmentModeForBuild` feature flag. This sets `process.env.NODE_ENV` to `development` when building your Storybooks. This ensures that React’s `act` utility is used, which helps ensure that all updates related to a test are processed and applied before making assertions. + +```ts title=".storybook/main.ts" +// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) +import type { StorybookConfig } from '@storybook/your-framework'; + +const config: StorybookConfig = { + framework: '@storybook/your-framework', + stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], + features: { + developmentModeForBuild: true, + }, +}; + +export default config; +``` + +