From 7fad7e9e55df2e76cfbc55462eec4a04e2ce2046 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..e9ebc55a 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 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). + +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; +``` + +