Release: Prerelease beta 8.5.0-beta.10

CHANGELOG.prerelease.md

@@ -1,3 +1,10 @@
+## 8.5.0-beta.10
+
+- Addon A11y: Adjust default behaviour when using with experimental-addon-test - [#30162](https://github.com/storybookjs/storybook/pull/30162), thanks @valentinpalkovic!
+- Addon A11y: Change default element selector - [#30253](https://github.com/storybookjs/storybook/pull/30253), thanks @valentinpalkovic!
+- Addon Docs: Make new code panel opt in - [#30248](https://github.com/storybookjs/storybook/pull/30248), thanks @shilman!
+- Addon Test: Fix generated path to `vitest.setup.js`  - [#30233](https://github.com/storybookjs/storybook/pull/30233), thanks @JReinhold!
+
 ## 8.5.0-beta.9
 
 - Addon Test: Add prerequisite check for MSW - [#30193](https://github.com/storybookjs/storybook/pull/30193), thanks @yannbf!

MIGRATION.md

@@ -4,6 +4,7 @@
   - [Introducing features.developmentModeForBuild](#introducing-featuresdevelopmentmodeforbuild)
   - [Added source code panel to docs](#added-source-code-panel-to-docs)
   - [Addon-a11y: Component test integration](#addon-a11y-component-test-integration)
+  - [Addon-a11y: Changing the default element selector](#addon-a11y-changing-the-default-element-selector)
   - [Addon-a11y: Deprecated `parameters.a11y.manual`](#addon-a11y-deprecated-parametersa11ymanual)
   - [Addon-test: You should no longer copy the content of `viteFinal` to your configuration](#addon-test-you-should-no-longer-copy-the-content-of-vitefinal-to-your-configuration)
   - [Addon-test: Indexing behavior of @storybook/experimental-addon-test is changed](#addon-test-indexing-behavior-of-storybookexperimental-addon-test-is-changed)
@@ -435,7 +436,7 @@ As part of our ongoing efforts to improve the testability and debuggability of S
 In development mode, React and other libraries often include additional checks and warnings that help catch potential issues early. These checks are usually stripped out in production builds to optimize performance. However, when running tests or debugging issues in a built Storybook, having these additional checks can be incredibly valuable. One such feature is React's `act`, which ensures that all updates related to a test are processed and applied before making assertions. `act` is crucial for reliable and predictable test results, but it only works correctly when `NODE_ENV` is set to `development`.
 
 ```js
-// main.js
+// .storybook/main.js
 export default {
   features: {
     developmentModeForBuild: true,
@@ -445,15 +446,16 @@ export default {
 
 ### Added source code panel to docs
 
-Starting in 8.5, Storybook Docs (`@storybook/addon-docs`) automatically adds a new addon panel to stories that displays a source snippet beneath each story. This works similarly to the existing [source snippet doc block](https://storybook.js.org/docs/writing-docs/doc-blocks#source), but in the story view. It is intended to replace the [Storysource addon](https://storybook.js.org/addons/@storybook/addon-storysource).
+Storybook Docs (`@storybook/addon-docs`) now can automatically add a new addon panel to stories that displays a source snippet beneath each story. This is an experimental feature that works similarly to the existing [source snippet doc block](https://storybook.js.org/docs/writing-docs/doc-blocks#source), but in the story view. It is intended to replace the [Storysource addon](https://storybook.js.org/addons/@storybook/addon-storysource).
 
-If you wish to disable this panel globally, add the following line to your `.storybook/preview.js` project configuration. You can also selectively disable/enable at the story level.
+To enable this globally, add the following line to your project configuration. You can also configure at the component/story level.
 
 ```js
+// .storybook/preview.js
 export default {
   parameters: {
     docs: {
-      codePanel: false,
+      codePanel: true,
     },
   },
 };
@@ -481,11 +483,24 @@ const annotations = setProjectAnnotations([
 beforeAll(annotations.beforeAll);
 ```
 
+### Addon-a11y: Changing the default element selector
+
+In Storybook 8.5, we changed the default element selector used by the Accessibility addon from `#storybook-root` to `body`. This change was made to align with the default element selector used by the Test addon when running accessibility tests via Vitest. Additionally, Tooltips or Popovers that are rendered outside the `#storybook-root` element will now be included in the accessibility tests per default allowing for a more comprehensive test coverage. If you want to fall back to the previous behavior, you can set the `a11y.element` parameter in your `.storybook/preview.<ts|js>` configuration:
+
+```diff
+// .storybook/preview.js
+export const parameters = {
+  a11y: {
++    element: '#storybook-root',
+  },
+};
+```
+
 ### Addon-a11y: Deprecated `parameters.a11y.manual`
 
 We have deprecated `parameters.a11y.manual` in 8.5. Please use `globals.a11y.manual` instead.
 
-### Addon-test: You should no longer copy the content of `viteFinal` to your configuration 
+### Addon-test: You should no longer copy the content of `viteFinal` to your configuration
 
 In version 8.4 of `@storybook/experimental-addon-test`, it was required to copy any custom configuration you had in `viteFinal` in `main.ts`, to the Vitest Storybook project. This is no longer necessary, as the Storybook Test plugin will automatically include your `viteFinal` configuration. You should remove any configurations you might already have in `viteFinal` to remove duplicates.
 

code/.storybook/preview.tsx

@@ -360,4 +360,4 @@ export const parameters = {
   },
 };
 
-export const tags = ['test', 'vitest', '!a11ytest'];
+export const tags = ['test', 'vitest'];

code/addons/a11y/src/a11yRunner.ts

@@ -41,7 +41,7 @@ const runNext = async () => {
 export const run = async (input: A11yParameters = defaultParameters) => {
   const { default: axe } = await import('axe-core');
 
-  const { element = '#storybook-root', config = {}, options = {} } = input;
+  const { element = 'body', config = {}, options = {} } = input;
   const htmlElement = document.querySelector(element as string) ?? document.body;
 
   if (!htmlElement) {

code/addons/a11y/src/constants.ts

@@ -14,4 +14,4 @@ export const TEST_PROVIDER_ID = 'storybook/addon-a11y/test-provider';
 
 export const EVENTS = { RESULT, REQUEST, RUNNING, ERROR, MANUAL };
 
-export const A11Y_TEST_TAG = 'a11ytest';
+export const A11Y_TEST_TAG = 'a11y-test';

code/addons/a11y/src/postinstall.ts

@@ -11,5 +11,7 @@ const $ = execa({
 });
 
 export default async function postinstall(options: PostinstallOptions) {
-  await $`storybook automigrate addonA11yAddonTest ${options.yes ? '--yes' : ''}`;
+  await $({
+    stdio: 'inherit',
+  })`storybook automigrate addonA11yAddonTest ${options.yes ? '--yes' : ''}`;
 }

code/addons/a11y/src/preview.test.tsx

@@ -156,7 +156,7 @@ describe('afterEach', () => {
     });
   });
 
-  it('should run accessibility checks if "a11ytest" flag is not available and is not running in Vitest', async () => {
+  it('should run accessibility checks if "a11y-test" flag is not available and is not running in Vitest', async () => {
     const context = createContext({
       tags: [],
     });

code/addons/a11y/src/preview.tsx

@@ -85,6 +85,3 @@ export const initialGlobals = {
     manual: false,
   },
 };
-
-// A11Y_TEST_TAG constant in ./constants.ts. Has to be statically analyzable.
-export const tags = ['a11ytest'];

code/addons/docs/src/manager.tsx

@@ -12,25 +12,19 @@ addons.register(ADDON_ID, (api) => {
     type: types.PANEL,
     paramKey: PARAM_KEY,
     /**
-     * This code panel can be disabled by the user by adding this parameter:
+     * This code panel can be enabled by adding this parameter:
      *
      * @example
      *
      * ```ts
      *  parameters: {
      *    docs: {
-     *      codePanel: false,
+     *      codePanel: true,
      *    },
      *  },
      * ```
      */
-    disabled: (parameters) => {
-      return (
-        !!parameters &&
-        typeof parameters[PARAM_KEY] === 'object' &&
-        parameters[PARAM_KEY].codePanel === false
-      );
-    },
+    disabled: (parameters) => !parameters?.docs?.codePanel,
     match: ({ viewMode }) => viewMode === 'story',
     render: ({ active }) => {
       const [codeSnippet, setSourceCode] = useAddonState<{

code/addons/test/src/components/TestProviderRender.tsx

@@ -1,4 +1,12 @@
-import React, { type ComponentProps, type FC, useCallback, useMemo, useRef, useState } from 'react';
+import React, {
+  type ComponentProps,
+  type FC,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
 import {
   Button,
@@ -12,10 +20,11 @@ import {
   type TestProviderConfig,
   type TestProviderState,
 } from 'storybook/internal/core-events';
-import { addons } from 'storybook/internal/manager-api';
+import { addons, useStorybookState } from 'storybook/internal/manager-api';
 import type { API } from 'storybook/internal/manager-api';
 import { styled, useTheme } from 'storybook/internal/theming';
 
+import type { Tag } from '@storybook/csf';
 import {
   AccessibilityIcon,
   EditIcon,
@@ -106,23 +115,38 @@ const statusMap: Record<TestStatus, ComponentProps<typeof TestStatusIcon>['statu
   pending: 'pending',
 };
 
-export const TestProviderRender: FC<
-  {
-    api: API;
-    state: TestProviderConfig & TestProviderState<Details, Config>;
-    entryId?: string;
-  } & ComponentProps<typeof Container>
-> = ({ state, api, entryId, ...props }) => {
+type TestProviderRenderProps = {
+  api: API;
+  state: TestProviderConfig & TestProviderState<Details, Config>;
+  entryId?: string;
+} & ComponentProps<typeof Container>;
+
+export const TestProviderRender: FC<TestProviderRenderProps> = ({
+  state,
+  api,
+  entryId,
+  ...props
+}) => {
   const [isEditing, setIsEditing] = useState(false);
   const theme = useTheme();
   const coverageSummary = state.details?.coverageSummary;
+  const storybookState = useStorybookState();
 
   const isA11yAddon = addons.experimental_getRegisteredAddons().includes(A11Y_ADDON_ID);
 
+  const isA11yAddonInitiallyChecked = useMemo(() => {
+    const internalIndex = storybookState.internal_index;
+    if (!internalIndex || !isA11yAddon) {
+      return false;
+    }
+
+    return Object.values(internalIndex.entries).some((entry) => entry.tags?.includes('a11y-test'));
+  }, [isA11yAddon, storybookState.internal_index]);
+
   const [config, updateConfig] = useConfig(
     api,
     state.id,
-    state.config || { a11y: false, coverage: false }
+    state.config || { a11y: isA11yAddonInitiallyChecked, coverage: false }
   );
 
   const isStoryEntry = entryId?.includes('--') ?? false;
@@ -425,14 +449,22 @@ export const TestProviderRender: FC<
 };
 
 function useConfig(api: API, providerId: string, initialConfig: Config) {
+  const updateTestProviderState = useCallback(
+    (config: Config) => {
+      api.updateTestProviderState(providerId, { config });
+      api.emit(TESTING_MODULE_CONFIG_CHANGE, { providerId, config });
+    },
+    [api, providerId]
+  );
+
   const [currentConfig, setConfig] = useState<Config>(initialConfig);
+
   const lastConfig = useRef(initialConfig);
 
   const saveConfig = useCallback(
     debounce((config: Config) => {
       if (!isEqual(config, lastConfig.current)) {
-        api.updateTestProviderState(providerId, { config });
-        api.emit(TESTING_MODULE_CONFIG_CHANGE, { providerId, config });
+        updateTestProviderState(config);
         lastConfig.current = config;
       }
     }, 500),
@@ -450,5 +482,9 @@ function useConfig(api: API, providerId: string, initialConfig: Config) {
     [saveConfig]
   );
 
+  useEffect(() => {
+    updateTestProviderState(initialConfig);
+  }, []);
+
   return [currentConfig, updateConfig] as const;
 }

code/addons/test/src/postinstall.ts

@@ -325,20 +325,13 @@ export default async function postInstall(options: PostinstallOptions) {
     existsSync
   );
 
-  const a11yAddon = info.addons.find((addon) => addon.includes(addonA11yName));
-
   const imports = [
     `import { beforeAll } from 'vitest';`,
     `import { setProjectAnnotations } from '${annotationsImport}';`,
   ];
 
   const projectAnnotations = [];
 
-  if (a11yAddon) {
-    imports.push(`import * as a11yAddonAnnotations from '@storybook/addon-a11y/preview';`);
-    projectAnnotations.push('a11yAddonAnnotations');
-  }
-
   if (previewExists) {
     imports.push(`import * as projectAnnotations from './preview';`);
     projectAnnotations.push('projectAnnotations');
@@ -357,6 +350,27 @@ export default async function postInstall(options: PostinstallOptions) {
     `
   );
 
+  const a11yAddon = info.addons.find((addon) => addon.includes(addonA11yName));
+
+  if (a11yAddon) {
+    try {
+      logger.plain(`${step} Setting up ${addonA11yName} for @storybook/experimental-addon-test:`);
+      await $({
+        stdio: 'inherit',
+      })`storybook automigrate addonA11yAddonTest ${options.yes ? '--yes' : ''}`;
+    } catch (e) {
+      printError(
+        '🚨 Oh no!',
+        dedent`
+        We have detected that you have ${addonA11yName} installed but could not automatically set it up for @storybook/experimental-addon-test.
+
+        Please refer to the documentation to complete the setup manually:
+        ${picocolors.cyan(`https://storybook.js.org/docs/writing-tests/accessibility-testing#test-addon-integration`)}
+      `
+      );
+    }
+  }
+
   // Check for existing Vitest workspace. We can't extend it so manual setup is required.
   const vitestWorkspaceFile = await findFile('vitest.workspace');
   if (vitestWorkspaceFile) {
@@ -407,6 +421,8 @@ export default async function postInstall(options: PostinstallOptions) {
     // If there's an existing config, we create a workspace file so we can run Storybook tests alongside.
     const extension = extname(rootConfig);
     const browserWorkspaceFile = resolve(dirname(rootConfig), `vitest.workspace${extension}`);
+    // to be set in vitest config
+    const vitestSetupFilePath = relative(dirname(browserWorkspaceFile), vitestSetupFile);
 
     logger.line(1);
     logger.plain(`${step} Creating a Vitest project workspace file:`);
@@ -442,7 +458,7 @@ export default async function postInstall(options: PostinstallOptions) {
                 name: 'chromium',
                 provider: 'playwright',
               },
-              setupFiles: ['./.storybook/vitest.setup.ts'],
+              setupFiles: ['${vitestSetupFilePath}'],
             },
           },
         ]);

code/addons/test/src/vitest-plugin/index.ts

@@ -216,16 +216,25 @@ export const storybookTest = async (options?: UserOptions): Promise<Plugin[]> =>
               getInitialGlobals: () => {
                 const envConfig = JSON.parse(process.env.VITEST_STORYBOOK_CONFIG ?? '{}');
 
-                const isA11yEnabled = process.env.VITEST_STORYBOOK
+                const shouldRunA11yTests = process.env.VITEST_STORYBOOK
                   ? (envConfig.a11y ?? false)
                   : true;
 
                 return {
                   a11y: {
-                    manual: !isA11yEnabled,
+                    manual: !shouldRunA11yTests,
                   },
                 };
               },
+              getTags: () => {
+                const envConfig = JSON.parse(process.env.VITEST_STORYBOOK_CONFIG ?? '{}');
+
+                const shouldSetTag = process.env.VITEST_STORYBOOK
+                  ? (envConfig.a11y ?? false)
+                  : false;
+
+                return shouldSetTag ? ['a11y-test'] : [];
+              },
             },
             // if there is a test.browser config AND test.browser.screenshotFailures is not explicitly set, we set it to false
             ...(inputConfig_ONLY_MUTATE_WHEN_STRICTLY_NEEDED_OR_YOU_WILL_BE_FIRED.test?.browser &&

code/addons/test/src/vitest-plugin/test-utils.ts

@@ -13,10 +13,11 @@ import { setViewport } from './viewports';
 declare module '@vitest/browser/context' {
   interface BrowserCommands {
     getInitialGlobals: () => Promise<Record<string, any>>;
+    getTags: () => Promise<string[] | undefined>;
   }
 }
 
-const { getInitialGlobals } = server.commands;
+const { getInitialGlobals, getTags } = server.commands;
 
 export const testStory = (
   exportName: string,
@@ -28,7 +29,7 @@ export const testStory = (
     const composedStory = composeStory(
       story,
       meta,
-      { initialGlobals: (await getInitialGlobals?.()) ?? {} },
+      { initialGlobals: (await getInitialGlobals?.()) ?? {}, tags: await getTags?.() },
       undefined,
       exportName
     );