Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add faq to a11y test page about RSC and async components #610

Merged
merged 1 commit into from
Dec 20, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions src/content/notInNavigation/accessibility.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

</details>

<details>
<summary>Why don't the accessibility results show violations, even though I know there are some?</summary>

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;
```

</details>
Loading