Release: Prerelease 10.3.0-beta.2

AGENTS.md

@@ -8,6 +8,7 @@ This file is the canonical instruction source for coding agents. Files like `CLA
 
 Storybook is a large TypeScript monorepo. The git root is the repo root, the main code lives in `code/`, and build tooling lives in `scripts/`.
 
+- **Base branch**: `next` (all PRs should target `next`, not `main`)
 - **Node.js**: `22.21.1` (see `.nvmrc`)
 - **Package Manager**: Yarn Berry
 - **Task orchestration**: NX plus the custom `yarn task` runner

CHANGELOG.prerelease.md

@@ -1,3 +1,11 @@
+## 10.3.0-beta.2
+
+- UI: Hide addon panel Drag on pages without a panel - [#34162](https://github.com/storybookjs/storybook/pull/34162), thanks @Sidnioulz!
+- UI: Hide manifest tag for now - [#34165](https://github.com/storybookjs/storybook/pull/34165), thanks @Sidnioulz!
+- UI: Make disabled Buttons keyboard-focusable - [#34166](https://github.com/storybookjs/storybook/pull/34166), thanks @Sidnioulz!
+- UI: Use correct selector for addon panel focus check - [#34164](https://github.com/storybookjs/storybook/pull/34164), thanks @Sidnioulz!
+- Vue: Make globals reactive in decorators - [#34116](https://github.com/storybookjs/storybook/pull/34116), thanks @Sidnioulz!
+
 ## 10.3.0-beta.1
 
 - Addon-Docs: Add React as optimizeDeps entry - [#34176](https://github.com/storybookjs/storybook/pull/34176), thanks @valentinpalkovic!

code/addons/onboarding/src/features/IntentSurvey/IntentSurvey.stories.tsx

@@ -21,23 +21,23 @@ export const Default: Story = {};
 export const Submitting: Story = {
   play: async ({ args }) => {
     const button = await screen.findByRole('button', { name: 'Submit' });
-    await expect(button).toBeDisabled();
+    await expect(button).toHaveAttribute('aria-disabled', 'true');
 
     await userEvent.click(await screen.findByText('Design system'));
-    await expect(button).toBeDisabled();
+    await expect(button).toHaveAttribute('aria-disabled', 'true');
 
     await userEvent.click(await screen.findByText('Functional testing'));
     await userEvent.click(await screen.findByText('Accessibility testing'));
     await userEvent.click(await screen.findByText('Visual testing'));
-    await expect(button).toBeDisabled();
+    await expect(button).toHaveAttribute('aria-disabled', 'true');
 
     await userEvent.selectOptions(screen.getByRole('combobox'), ['We use it at work']);
-    await expect(button).not.toBeDisabled();
+    await expect(button).not.toHaveAttribute('aria-disabled', 'true');
 
     await userEvent.click(button);
 
     await waitFor(async () => {
-      await expect(button).toBeDisabled();
+      await expect(button).toHaveAttribute('aria-disabled', 'true');
       await expect(args.onComplete).toHaveBeenCalledWith({
         building: {
           'application-ui': false,

code/core/src/component-testing/components/test-fn.stories.tsx

@@ -96,7 +96,7 @@ TestFunctionTypes.test(
   },
   async ({ canvas }) => {
     const button = canvas.getByText('Arg from story');
-    await expect(button).toBeEnabled();
+    await expect(button).not.toHaveAttribute('aria-disabled', 'true');
   }
 );
 
@@ -106,7 +106,7 @@ export const ExtendedStorySinglePlayExample = TestFunctionTypes.extend({
   },
   play: async ({ canvas }) => {
     const button = canvas.getByText('Arg from extended story');
-    await expect(button).toBeEnabled();
+    await expect(button).not.toHaveAttribute('aria-disabled', 'true');
   },
 });
 
@@ -120,7 +120,7 @@ ExtendedStorySingleTestExample.test(
   'this is a very long test name to explain that this story test should guarantee that the args have been extended correctly',
   async ({ canvas }) => {
     const button = canvas.getByText('Arg from extended story');
-    await expect(button).toBeEnabled();
+    await expect(button).not.toHaveAttribute('aria-disabled', 'true');
   }
 );
 

code/core/src/components/components/Button/Button.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { FaceHappyIcon } from '@storybook/icons';
 
-import { fn } from 'storybook/test';
+import { expect, fn } from 'storybook/test';
 import { styled } from 'storybook/theming';
 
 import preview from '../../../../../.storybook/preview';
@@ -291,6 +291,32 @@ export const Disabled = meta.story({
     ariaLabel: false,
     disabled: true,
     children: 'Disabled Button',
+    onClick: fn(),
+  },
+  render: (args) => (
+    <Row>
+      <Button variant="solid" {...args}>
+        Disabled Button
+      </Button>
+    </Row>
+  ),
+  play: async ({ args, canvas, step }) => {
+    const button = canvas.getByRole('button', { name: 'Disabled Button' });
+
+    await step('Disabled button should be aria-disabled', async () => {
+      expect(button).toHaveAttribute('aria-disabled', 'true');
+    });
+
+    await step('Disabled button should not be clickable', async () => {
+      button.click();
+      expect(args.onClick).not.toHaveBeenCalled();
+    });
+
+    await step('Disabled button should be focusable for accessibility', async () => {
+      const button = canvas.getByRole('button', { name: 'Disabled Button' });
+      button.focus();
+      expect(button).toHaveFocus();
+    });
   },
 });
 

code/core/src/components/components/Button/Button.tsx

@@ -138,12 +138,13 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
             variant={variant}
             size={size}
             padding={padding}
-            disabled={disabled || readOnly}
+            $disabled={disabled || readOnly}
+            aria-disabled={disabled || readOnly ? 'true' : undefined}
             readOnly={readOnly}
             active={active}
             animating={isAnimating}
             animation={animation}
-            onClick={handleClick}
+            onClick={disabled || readOnly ? undefined : handleClick}
             aria-label={!readOnly && ariaLabel !== false ? ariaLabel : undefined}
             aria-keyshortcuts={readOnly ? undefined : shortcutAttribute}
             {...(readOnly ? {} : ariaDescriptionAttrs)}
@@ -165,7 +166,7 @@ const StyledButton = styled('button', {
   padding?: 'small' | 'medium' | 'none';
   variant?: 'outline' | 'solid' | 'ghost';
   active?: boolean;
-  disabled?: boolean;
+  $disabled?: boolean;
   readOnly?: boolean;
   animating?: boolean;
   animation?: 'none' | 'rotate360' | 'glow' | 'jiggle';
@@ -174,15 +175,15 @@ const StyledButton = styled('button', {
     theme,
     variant,
     size,
-    disabled,
+    $disabled,
     readOnly,
     active,
     animating,
     animation = 'none',
     padding,
   }) => ({
     border: 0,
-    cursor: readOnly ? 'inherit' : disabled ? 'not-allowed' : 'pointer',
+    cursor: readOnly ? 'inherit' : $disabled ? 'not-allowed' : 'pointer',
     display: 'inline-flex',
     gap: '6px',
     alignItems: 'center',
@@ -216,7 +217,7 @@ const StyledButton = styled('button', {
     verticalAlign: 'top',
     whiteSpace: 'nowrap',
     userSelect: 'none',
-    opacity: disabled && !readOnly ? 0.5 : 1,
+    opacity: $disabled && !readOnly ? 0.5 : 1,
     margin: 0,
     fontSize: `${theme.typography.size.s1}px`,
     fontWeight: theme.typography.weight.bold,

code/core/src/manager-api/modules/shortcuts.ts

@@ -16,6 +16,10 @@ import { focusableUIElements } from './layout';
 
 const { navigator, document } = global;
 
+function wasFocusInElement(element: HTMLElement | null) {
+  return document.activeElement && element?.contains(document.activeElement);
+}
+
 export const isMacLike = () =>
   navigator && navigator.platform ? !!navigator.platform.match(/(Mac|iPhone|iPod|iPad)/i) : false;
 export const controlOrMetaKey = () => (isMacLike() ? 'meta' : 'control');
@@ -359,13 +363,11 @@ export const init: ModuleFn = ({ store, fullAPI, provider }) => {
 
         case 'togglePanel': {
           const wasPanelShown = fullAPI.getIsPanelShown();
-          const panelElement = document.getElementById(focusableUIElements.storyPanelRoot);
-          const wasFocusInPanel =
-            panelElement && document.activeElement && panelElement.contains(document.activeElement);
+          const panelElement = document.getElementById(focusableUIElements.addonPanel);
 
           fullAPI.togglePanel();
 
-          if (wasPanelShown && wasFocusInPanel) {
+          if (wasPanelShown && wasFocusInElement(panelElement)) {
             // poll: true always returns a Promise.
             (
               fullAPI.focusOnUIElement(focusableUIElements.showAddonPanel, {
@@ -384,11 +386,10 @@ export const init: ModuleFn = ({ store, fullAPI, provider }) => {
         case 'toggleNav': {
           const wasNavShown = fullAPI.getIsNavShown();
           const sidebarElement = document.getElementById(focusableUIElements.sidebarRegion);
-          const wasFocusInSidebar = sidebarElement?.contains(document?.activeElement);
 
           fullAPI.toggleNav();
 
-          if (wasNavShown && wasFocusInSidebar) {
+          if (wasNavShown && wasFocusInElement(sidebarElement)) {
             // poll: true always returns a Promise.
             (
               fullAPI.focusOnUIElement(focusableUIElements.showSidebar, {

code/core/src/manager/components/layout/Layout.tsx

@@ -201,15 +201,15 @@ export const Layout = ({ managerLayoutState, setManagerLayoutState, hasTab, ...s
           slotPages={slots.slotPages}
         />
 
-        {isDesktop && (
+        {isDesktop && showPanel && (
           <PanelContainer
             bottomPanelHeight={bottomPanelHeight}
             rightPanelWidth={rightPanelWidth}
             panelMaxSize={panelMaxSize}
             panelResizerRef={panelResizerRef}
             position={panelPosition}
           >
-            {showPanel && slots.slotPanel}
+            {slots.slotPanel}
           </PanelContainer>
         )}
         {isMobile && <Notifications />}

code/core/src/manager/components/sidebar/TagsFilter.stories.tsx

@@ -207,9 +207,9 @@ export const ResetToDefaults: Story = {
     const resetButton = await screen.findByRole('button', { name: 'Reset filters' });
 
     expect(resetButton).toBeInTheDocument();
-    expect(resetButton).not.toBeDisabled();
+    expect(resetButton).not.toHaveAttribute('aria-disabled', 'true');
     resetButton.click();
-    await waitFor(() => expect(resetButton).toBeDisabled());
+    await waitFor(() => expect(resetButton).toHaveAttribute('aria-disabled', 'true'));
   },
 } satisfies Story;
 

code/core/src/manager/components/sidebar/TagsFilterPanel.tsx

@@ -59,6 +59,7 @@ interface TagsFilterPanelProps {
   excludedFilters: string[];
 }
 
+/* Those tags are hidden in the UI. There's a more general built-in list defined in `shared/constants/tags`. */
 const BUILT_IN_TAGS = new Set([
   'dev',
   'test',
@@ -67,6 +68,7 @@ const BUILT_IN_TAGS = new Set([
   'unattached-mdx',
   'play-fn',
   'test-fn',
+  'manifest',
 ]);
 
 // This equality check works on the basis that there are no duplicates in the arrays.

code/core/src/shared/checklist-store/checklistData.tsx

@@ -718,7 +718,7 @@ export const Disabled: Story = {
     await userEvent.click(button);
 
     // 👇 Make assertions
-    await expect(button).toBeDisabled();
+    await expect(button).toHaveAttribute('aria-disabled', 'true');
     await expect(args.onClick).not.toHaveBeenCalled();
   }
 };`}

code/e2e-tests/addon-toolbars.spec.ts

@@ -32,6 +32,6 @@ test.describe('addon-toolbars', () => {
     await expect(sbPage.previewRoot()).toContainText('안녕하세요');
 
     const button = sbPage.page.getByLabel('Internationalization locale');
-    await expect(button).toBeDisabled();
+    await expect(button).toHaveAttribute('aria-disabled', 'true');
   });
 });

code/e2e-tests/addon-viewport.spec.ts

@@ -54,6 +54,6 @@ test.describe('addon-viewport', () => {
 
     const toolbar = page.getByLabel('Viewport size');
 
-    await expect(toolbar).toBeDisabled();
+    await expect(toolbar).toHaveAttribute('aria-disabled', 'true');
   });
 });

code/e2e-tests/framework-vue3.spec.ts

@@ -0,0 +1,49 @@
+import { expect, test } from '@playwright/test';
+import process from 'process';
+
+import { SbPage } from './util';
+
+const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:6006';
+const templateName = process.env.STORYBOOK_TEMPLATE_NAME;
+
+test.describe('Vue 3', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(storybookUrl);
+    await new SbPage(page, expect).waitUntilLoaded();
+  });
+
+  test.skip(templateName !== 'vue3-vite/default-ts', 'Only run these tests on Vue 3');
+
+  test('updateArgs works in decorators', async ({ page }) => {
+    const sbPage = new SbPage(page, expect);
+
+    await sbPage.navigateToStory(
+      'stories/renderers/vue3_vue3-vite-default-ts/decorators',
+      'update-args'
+    );
+    const previewRoot = sbPage.previewRoot();
+    const button = previewRoot.getByRole('button', { name: 'Add 1' });
+
+    await expect(previewRoot).toContainText('0');
+    await button.click();
+    await expect(previewRoot).toContainText('1');
+    await button.click();
+    await expect(previewRoot).toContainText('2');
+  });
+
+  test('Decorators can consume reactive globals', async ({ page }) => {
+    const sbPage = new SbPage(page, expect);
+
+    await sbPage.navigateToStory(
+      'stories/renderers/vue3_vue3-vite-default-ts/decorators',
+      'reactive-global-decorator'
+    );
+
+    // Check the original language
+    await expect(sbPage.previewRoot()).toContainText('Hello');
+
+    // Select spanish in the locale toolbar and check that the text changes
+    await sbPage.selectToolbar('[aria-label^="Internationalization locale"]', 'text=/Español/');
+    await expect(sbPage.previewRoot()).toContainText('Hola');
+  });
+});

code/package.json

@@ -214,5 +214,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "10.3.0-beta.2"
 }

code/renderers/react/template/stories/test-fn.stories.tsx

@@ -78,7 +78,7 @@ Default.test(
   },
   async ({ canvas }) => {
     const button = canvas.getByText('Arg from story');
-    await expect(button).toBeEnabled();
+    await expect(button).not.toHaveAttribute('aria-disabled', 'true');
   }
 );
 export const Extended = Default.extend({
@@ -88,5 +88,5 @@ export const Extended = Default.extend({
 });
 Extended.test('should have extended args', async ({ canvas }) => {
   const button = canvas.getByText('Arg from extended story');
-  await expect(button).toBeEnabled();
+  await expect(button).not.toHaveAttribute('aria-disabled', 'true');
 });