Release: Prerelease 10.3.0-alpha.8

.github/workflows/nx.yml

@@ -21,13 +21,14 @@ env:
 jobs:
   nx:
     if: >
-      (github.event_name == 'pull_request' &&
-        github.event.pull_request.head.repo.full_name == github.repository &&
-        (contains(github.event.pull_request.labels.*.name, 'ci:normal') ||
-         contains(github.event.pull_request.labels.*.name, 'ci:merged') ||
-         contains(github.event.pull_request.labels.*.name, 'ci:daily'))
-      ) || (github.event_name == 'push' && github.ref == 'refs/heads/next') ||
-      (github.event_name == 'schedule')
+      github.repository == 'storybookjs/storybook' &&
+        ((github.event_name == 'pull_request' &&
+          github.event.pull_request.head.repo.full_name == github.repository &&
+          (contains(github.event.pull_request.labels.*.name, 'ci:normal') ||
+           contains(github.event.pull_request.labels.*.name, 'ci:merged') ||
+           contains(github.event.pull_request.labels.*.name, 'ci:daily'))
+        ) || (github.event_name == 'push' && github.ref == 'refs/heads/next') ||
+        (github.event_name == 'schedule'))
 
     runs-on: ubuntu-latest
     env:

CHANGELOG.prerelease.md

@@ -1,3 +1,13 @@
+## 10.3.0-alpha.8
+
+- A11y: Ensure popover dialogs have an ARIA label - [#33500](https://github.com/storybookjs/storybook/pull/33500), thanks @gayanMatch!
+- Addon-Vitest: Add channel API to programmatically trigger test runs - [#33206](https://github.com/storybookjs/storybook/pull/33206), thanks @JReinhold!
+- Builder-Vite: Centralize Vite plugins for builder-vite and addon-vitest - [#33819](https://github.com/storybookjs/storybook/pull/33819), thanks @valentinpalkovic!
+- Core: Revert Pull Request #33420 from Maelryn/fix/copy-button-overlap - [#33877](https://github.com/storybookjs/storybook/pull/33877), thanks @Sidnioulz!
+- Next.js-Vite: Fix failing postcss mutation - [#33879](https://github.com/storybookjs/storybook/pull/33879), thanks @valentinpalkovic!
+- React: Fix manifest stories empty when meta has no explicit title - [#33878](https://github.com/storybookjs/storybook/pull/33878), thanks @kasperpeulen!
+- UI: Fix Copy button overlapping code in portrait mode - [#33420](https://github.com/storybookjs/storybook/pull/33420), thanks @Maelryn!
+
 ## 10.3.0-alpha.7
 
 - Core: Require token for websocket connections - [#33820](https://github.com/storybookjs/storybook/pull/33820), thanks @ghengeveld!

MIGRATION.md

@@ -627,6 +627,16 @@ The PopoverProvider component acts as a counterpoint to WithTooltip. When you wa
 
 PopoverProvider is based on react-aria. It must have a single child that acts as a trigger. This child must have a pressable role (can be clicked or pressed) and must be able to receive React refs. Wrap your trigger component in `forwardRef` if you notice placement issues for your popover.
 
+##### Added: ariaLabel
+
+The `ariaLabel` prop was added in Storybook 10.3 to provide an accessible label for the popover dialog. This label is announced by screen readers when the popover opens. `ariaLabel` will become mandatory in Storybook 11.
+
+```tsx
+<PopoverProvider ariaLabel="Share options" popover={<ShareMenu />}>
+  <Button ariaLabel="Share">Share</Button>
+</PopoverProvider>
+```
+
 #### WithTooltip Component API Changes
 
 The WithTooltip component has been reimplemented from the ground up, under the new name `TooltipProvider`. The new implementation will replace `WithTooltip` entirely in Storybook 11. Below is a summary of the changes between both APIs, which will take full effect in Storybook 11.

code/addons/a11y/build-config.ts

@@ -23,6 +23,11 @@ const config: BuildEntries = {
         entryPoint: './src/postinstall.ts',
         dts: false,
       },
+      {
+        exportEntries: ['./preset'],
+        entryPoint: './src/preset.ts',
+        dts: false,
+      },
     ],
   },
 };

code/addons/a11y/package.json

@@ -43,6 +43,7 @@
     "./manager": "./dist/manager.js",
     "./package.json": "./package.json",
     "./postinstall": "./dist/postinstall.js",
+    "./preset": "./dist/preset.js",
     "./preview": {
       "types": "./dist/preview.d.ts",
       "code": "./src/preview.tsx",

code/addons/a11y/preset.js

@@ -0,0 +1 @@
+export * from './dist/preset.js';

code/addons/a11y/src/components/A11yContext.tsx

@@ -27,7 +27,7 @@ import { convert, themes } from 'storybook/theming';
 import { getFriendlySummaryForAxeResult, getTitleForAxeResult } from '../axeRuleMappingHelper';
 import { ADDON_ID, EVENTS, STATUS_TYPE_ID_A11Y, STATUS_TYPE_ID_COMPONENT_TEST } from '../constants';
 import type { A11yParameters } from '../params';
-import type { A11YReport, EnhancedResult, EnhancedResults, Status } from '../types';
+import type { A11yReport, EnhancedResult, EnhancedResults, Status } from '../types';
 import { RuleType } from '../types';
 import type { TestDiscrepancy } from './TestDiscrepancyMessage';
 
@@ -244,7 +244,7 @@ export const A11yContextProvider: FC<PropsWithChildren> = (props) => {
 
   const handleReport = useCallback(
     ({ reporters }: StoryFinishedPayload) => {
-      const a11yReport = reporters.find((r) => r.type === 'a11y') as Report<A11YReport> | undefined;
+      const a11yReport = reporters.find((r) => r.type === 'a11y') as Report<A11yReport> | undefined;
 
       if (a11yReport) {
         if ('error' in a11yReport.result) {

code/addons/a11y/src/index.ts

@@ -5,6 +5,6 @@ import type { A11yTypes } from './types';
 
 export { PARAM_KEY } from './constants';
 export * from './params';
-export type { A11yGlobals, A11yTypes } from './types';
+export type { A11yGlobals, A11yTypes, A11yReport } from './types';
 
 export default () => definePreviewAddon<A11yTypes>(addonAnnotations);

code/addons/a11y/src/preset.ts

@@ -0,0 +1,3 @@
+// enables other addons/presets to detect if a11y is enabled and adjust their behavior accordingly
+// using await presets.apply('isAddonA11yEnabled', false);
+export const isAddonA11yEnabled = true;

code/addons/a11y/src/types.ts

@@ -2,7 +2,7 @@ import type { AxeResults, NodeResult, Result } from 'axe-core';
 
 import type { A11yParameters as A11yParams } from './params';
 
-export type A11YReport = EnhancedResults | { error: Error };
+export type A11yReport = EnhancedResults | { error: Error };
 
 export interface A11yParameters {
   /**

code/addons/docs/src/blocks/components/ArgsTable/ArgValue.tsx

@@ -203,6 +203,7 @@ const ArgSummary: FC<ArgSummaryProps> = ({ value, initialExpandedArgs }) => {
 
   return (
     <PopoverProvider
+      ariaLabel="Arg value details"
       placement="bottom"
       visible={isOpen}
       onVisibleChange={(isVisible) => {

code/addons/docs/src/blocks/controls/Color.tsx

@@ -393,6 +393,7 @@ export const ColorControl: FC<ColorControlProps> = ({
         placeholder="Choose color..."
       />
       <PopoverProvider
+        ariaLabel="Color picker"
         defaultVisible={startOpen}
         visible={readOnly ? false : undefined}
         onVisibleChange={() => color && addPreset(color)}

code/addons/vitest/build-config.ts

@@ -24,6 +24,10 @@ const config: BuildEntries = {
       },
     ],
     node: [
+      {
+        exportEntries: ['./constants'],
+        entryPoint: './src/constants.ts',
+      },
       {
         exportEntries: ['./preset'],
         entryPoint: './src/preset.ts',

code/addons/vitest/package.json

@@ -43,6 +43,11 @@
       "code": "./src/index.ts",
       "default": "./dist/index.js"
     },
+    "./constants": {
+      "types": "./dist/constants.d.ts",
+      "code": "./src/constants.ts",
+      "default": "./dist/constants.js"
+    },
     "./internal/coverage-reporter": "./dist/node/coverage-reporter.js",
     "./internal/global-setup": "./dist/vitest-plugin/global-setup.js",
     "./internal/setup-file": "./dist/vitest-plugin/setup-file.js",
@@ -74,6 +79,7 @@
     "@storybook/icons": "^2.0.1"
   },
   "devDependencies": {
+    "@storybook/addon-a11y": "workspace:*",
     "@types/istanbul-lib-report": "^3.0.3",
     "@types/micromatch": "^4.0.0",
     "@types/node": "^22.19.1",

code/addons/vitest/src/constants.ts

@@ -1,6 +1,6 @@
 import type { StoreOptions } from 'storybook/internal/types';
 
-import type { RunTrigger, StoreState } from './types';
+import type { CurrentRun, RunTrigger, StoreState } from './types';
 
 export { PANEL_ID as COMPONENT_TESTING_PANEL_ID } from '../../../core/src/component-testing/constants';
 export {
@@ -28,14 +28,17 @@ export const storeOptions = {
     watching: false,
     cancelling: false,
     fatalError: undefined,
-    indexUrl: undefined,
+    index: { entries: {}, v: 5 },
     previewAnnotations: [],
     currentRun: {
       triggeredBy: undefined,
       config: {
         coverage: false,
         a11y: false,
       },
+      componentTestStatuses: [],
+      a11yStatuses: [],
+      a11yReports: {},
       componentTestCount: {
         success: 0,
         error: 0,
@@ -63,3 +66,26 @@ export const TEST_PROVIDER_STORE_CHANNEL_EVENT_NAME = 'UNIVERSAL_STORE:storybook
 
 export const STATUS_TYPE_ID_COMPONENT_TEST = 'storybook/component-test';
 export const STATUS_TYPE_ID_A11Y = 'storybook/a11y';
+
+// Channel event names for programmatic test triggering
+export const TRIGGER_TEST_RUN_REQUEST = `${ADDON_ID}/trigger-test-run-request`;
+export const TRIGGER_TEST_RUN_RESPONSE = `${ADDON_ID}/trigger-test-run-response`;
+
+export type TriggerTestRunRequestPayload = {
+  requestId: string;
+  actor: string;
+  storyIds?: string[];
+  config?: Partial<StoreState['config']>;
+};
+
+export type TestRunResult = CurrentRun;
+
+export type TriggerTestRunResponsePayload = {
+  requestId: string;
+  status: 'completed' | 'error' | 'cancelled';
+  result?: TestRunResult;
+  error?: {
+    message: string;
+    error?: import('./types').ErrorLike;
+  };
+};

code/addons/vitest/src/manager.tsx

@@ -42,14 +42,8 @@ addons.register(ADDON_ID, (api) => {
         },
       });
     });
-    store.untilReady().then(() => {
-      store.setState((state) => ({
-        ...state,
-        indexUrl: new URL('index.json', window.location.href).toString(),
-      }));
-      store.subscribe('TEST_RUN_COMPLETED', ({ payload }) => {
-        api.emit(STORYBOOK_ADDON_TEST_CHANNEL, { type: 'test-run-completed', payload });
-      });
+    store.subscribe('TEST_RUN_COMPLETED', ({ payload }) => {
+      api.emit(STORYBOOK_ADDON_TEST_CHANNEL, { type: 'test-run-completed', payload });
     });
 
     addons.add(TEST_PROVIDER_ID, {