storybookjs · yannbf · Nov 25, 2025 · Nov 12, 2025 · Nov 12, 2025 · Nov 12, 2025
diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md
@@ -1,3 +1,15 @@
+## 10.1.0-beta.5
+
+- Checklist: Autocomplete "See what's new" on URL navigation - [#33167](https://github.com/storybookjs/storybook/pull/33167), thanks @ghengeveld!
+- Core: Fix testing widget focus outline - [#33172](https://github.com/storybookjs/storybook/pull/33172), thanks @ghengeveld!
+- Core: Rename `Listbox` component to `ActionList` and use it in `TagsFilterPanel` - [#33140](https://github.com/storybookjs/storybook/pull/33140), thanks @ghengeveld!
+- UI: Add padding for ArgsTable shadow in TabbedArgsTable - [#33034](https://github.com/storybookjs/storybook/pull/33034), thanks @Sidnioulz!
+- UI: Fix crashes in Select when passed falsy non-string options - [#33164](https://github.com/storybookjs/storybook/pull/33164), thanks @Sidnioulz!
+- UI: Fix regression on addon panel empty content fontsize - [#33021](https://github.com/storybookjs/storybook/pull/33021), thanks @Sidnioulz!
+- UI: Fix trivial RefBlocks ARIA violations - [#33026](https://github.com/storybookjs/storybook/pull/33026), thanks @Sidnioulz!
+- UI: Refocus search input after clearing it - [#33165](https://github.com/storybookjs/storybook/pull/33165), thanks @Sidnioulz!
+- UI: Rework default background of Color swatch for dark mode - [#33023](https://github.com/storybookjs/storybook/pull/33023), thanks @Sidnioulz!
+
 ## 10.1.0-beta.4
 
 - Angular: Migrate from RxJS to async/await in command builders and run Compodoc utility as spinner - [#33156](https://github.com/storybookjs/storybook/pull/33156), thanks @valentinpalkovic!

diff --git a/code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.tsx b/code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.tsx
@@ -106,6 +106,7 @@ export const TableWrapper = styled.table<{
 
     // Makes border alignment consistent w/other DocBlocks
     marginInline: inAddonPanel || inTabPanel ? 0 : 1,
+    paddingInline: inTabPanel ? 3 : 0,
 
     tbody: {
       // Safari doesn't love shadows on tbody so we need to use a shadow filter. In order to do this,

diff --git a/code/addons/docs/src/blocks/controls/Color.tsx b/code/addons/docs/src/blocks/controls/Color.tsx
@@ -42,7 +42,8 @@ const Swatches = styled.div({
   width: 200,
 });
 
-const swatchBackground = `url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>')`;
+const swatchBackground = (isDark: boolean) =>
+  `url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity="0.05" fill="${isDark ? 'white' : 'black'}"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>')`;
 
 const SwatchColor = styled(Button)<{ selected?: boolean; value: string }>(
   ({ value, selected, theme }) => ({
@@ -56,7 +57,7 @@ const SwatchColor = styled(Button)<{ selected?: boolean; value: string }>(
     '&, &:hover': {
       background: 'unset',
       backgroundColor: 'unset',
-      backgroundImage: `linear-gradient(${value}, ${value}), ${swatchBackground}, linear-gradient(hsl(0 0 100 / .4), hsl(0 0 100 / .4))`,
+      backgroundImage: `linear-gradient(${value}, ${value}), ${swatchBackground(theme.base === 'dark')}`,
     },
   })
 );

diff --git a/code/addons/pseudo-states/src/manager/PseudoStateTool.tsx b/code/addons/pseudo-states/src/manager/PseudoStateTool.tsx
@@ -36,7 +36,8 @@ export const PseudoStateTool = () => {
       multiSelect
       onChange={(selected) => {
         updateGlobals({
-          [PARAM_KEY]: selected.reduce((acc, curr) => ({ ...acc, [curr]: true }), {}),
+          // We know curr is a string because we are using string values in options
+          [PARAM_KEY]: selected.reduce((acc, curr) => ({ ...acc, [curr as string]: true }), {}),
         });
       }}
     />

diff --git a/code/addons/vitest/src/components/TestProviderRender.tsx b/code/addons/vitest/src/components/TestProviderRender.tsx
@@ -1,9 +1,9 @@
 import React, { type ComponentProps, type FC } from 'react';
 
 import {
+  ActionList,
   Button,
   Form,
-  ListItem,
   ProgressSpinner,
   ToggleButton,
 } from 'storybook/internal/components';
@@ -27,10 +27,11 @@ import type { StatusValueToStoryIds } from '../use-test-provider-state';
 import { Description } from './Description';
 import { TestStatusIcon } from './TestStatusIcon';
 
-const Container = styled.div({
+const Container = styled.div<{ inContextMenu?: boolean }>(({ inContextMenu }) => ({
   display: 'flex',
   flexDirection: 'column',
-});
+  paddingBottom: inContextMenu ? 0 : 1,
+}));
 
 const Heading = styled.div({
   display: 'flex',
@@ -57,8 +58,8 @@ const Actions = styled.div({
   gap: 4,
 });
 
-const Extras = styled.div({
-  marginBottom: 2,
+const StyledActionList = styled(ActionList)({
+  padding: 0,
 });
 
 const Muted = styled.span(({ theme }) => ({
@@ -69,11 +70,6 @@ const Progress = styled(ProgressSpinner)({
   margin: 4,
 });
 
-const Row = styled.div({
-  display: 'flex',
-  gap: 4,
-});
-
 const StopIcon = styled(StopAltIcon)({
   width: 10,
 });
@@ -147,7 +143,7 @@ export const TestProviderRender: FC<TestProviderRenderProps> = ({
             : ['unknown', 'Run tests to see accessibility results'];
 
   return (
-    <Container {...props}>
+    <Container {...props} inContextMenu={!!entry}>
       <Heading>
         <Info>
           {entry ? (
@@ -257,15 +253,20 @@ export const TestProviderRender: FC<TestProviderRenderProps> = ({
           )}
         </Actions>
       </Heading>
-      <Extras>
-        <Row>
-          <ListItem
-            as="label"
-            // FIXME: why interactions? why not components?
-            title="Interactions"
-            icon={entry ? null : <Form.Checkbox checked disabled />}
-          />
-          <Button
+
+      <StyledActionList>
+        <ActionList.Item>
+          {entry ? (
+            <ActionList.Text>Interactions</ActionList.Text>
+          ) : (
+            <ActionList.Action as="label" readOnly>
+              <ActionList.Icon>
+                <Form.Checkbox name="Interactions" checked disabled />
+              </ActionList.Icon>
+              <ActionList.Text>Interactions</ActionList.Text>
+            </ActionList.Action>
+          )}
+          <ActionList.Button
             ariaLabel={`${componentTestStatusLabel}${
               componentTestStatusValueToStoryIds['status-value:error'].length +
                 componentTestStatusValueToStoryIds['status-value:warning'].length >
@@ -277,9 +278,6 @@ export const TestProviderRender: FC<TestProviderRenderProps> = ({
                 : ''
             }`}
             tooltip={componentTestStatusLabel}
-            padding="small"
-            size="medium"
-            variant="ghost"
             disabled={
               componentTestStatusValueToStoryIds['status-value:error'].length === 0 &&
               componentTestStatusValueToStoryIds['status-value:warning'].length === 0 &&
@@ -300,16 +298,15 @@ export const TestProviderRender: FC<TestProviderRenderProps> = ({
             <TestStatusIcon status={componentTestStatusIcon} isRunning={isRunning} />
             {componentTestStatusValueToStoryIds['status-value:error'].length +
               componentTestStatusValueToStoryIds['status-value:warning'].length || null}
-          </Button>
-        </Row>
+          </ActionList.Button>
+        </ActionList.Item>
 
         {!entry && (
-          <Row>
-            <ListItem
-              as="label"
-              title={watching ? <Muted>Coverage (unavailable)</Muted> : 'Coverage'}
-              icon={
+          <ActionList.Item>
+            <ActionList.Action as="label" readOnly={isRunning} ariaLabel={false}>
+              <ActionList.Icon>
                 <Form.Checkbox
+                  name="Coverage"
                   checked={config.coverage}
                   disabled={isRunning}
                   onChange={() =>
@@ -319,34 +316,27 @@ export const TestProviderRender: FC<TestProviderRenderProps> = ({
                     }))
                   }
                 />
-              }
-            />
-
-            {/* FIXME: aria labels were not 100% consistent with the tooltip logic. Double check this logic during review please! */}
+              </ActionList.Icon>
+              <ActionList.Text>
+                {watching ? <Muted>Coverage (unavailable)</Muted> : 'Coverage'}
+              </ActionList.Text>
+            </ActionList.Action>
             {watching ||
             (currentRun.triggeredBy && !FULL_RUN_TRIGGERS.includes(currentRun.triggeredBy)) ? (
-              <Button
-                padding="small"
-                size="medium"
-                variant="ghost"
+              <ActionList.Button
                 disabled
                 ariaLabel={
                   watching
                     ? `Coverage unavailable in watch mode`
-                    : `Coverage unavailable when running focused tests`
+                    : `Coverage only available after running all tests`
                 }
               >
                 <InfoIcon />
-              </Button>
+              </ActionList.Button>
             ) : currentRun.coverageSummary ? (
-              <Button
+              <ActionList.Button
                 asChild
-                padding="small"
-                size="medium"
-                variant="ghost"
                 ariaLabel={
-                  // FIXME: I can't deduce from the original tooltip logic whether this use case
-                  // is logically possible or not. It is a reachable conditional branch in the original code.
                   isRunning
                     ? 'Open coverage report (testing still in progress)'
                     : `Open coverage report (${currentRun.coverageSummary.percentage}% coverage)`
@@ -360,12 +350,9 @@ export const TestProviderRender: FC<TestProviderRenderProps> = ({
                   />
                   {currentRun.coverageSummary.percentage}%
                 </a>
-              </Button>
+              </ActionList.Button>
             ) : (
-              <Button
-                padding="small"
-                size="medium"
-                variant="ghost"
+              <ActionList.Button
                 disabled
                 ariaLabel={
                   isRunning
@@ -379,19 +366,20 @@ export const TestProviderRender: FC<TestProviderRenderProps> = ({
                   isRunning={isRunning}
                   status={fatalError ? 'critical' : 'unknown'}
                 />
-              </Button>
+              </ActionList.Button>
             )}
-          </Row>
+          </ActionList.Item>
         )}
 
         {hasA11yAddon && (
-          <Row>
-            <ListItem
-              as="label"
-              title="Accessibility"
-              icon={
-                entry ? null : (
+          <ActionList.Item>
+            {entry ? (
+              <ActionList.Text>Accessibility</ActionList.Text>
+            ) : (
+              <ActionList.Action as="label" readOnly={isRunning} ariaLabel={false}>
+                <ActionList.Icon>
                   <Form.Checkbox
+                    name="Accessibility"
                     checked={config.a11y}
                     disabled={isRunning}
                     onChange={() =>
@@ -401,14 +389,12 @@ export const TestProviderRender: FC<TestProviderRenderProps> = ({
                       }))
                     }
                   />
-                )
-              }
-            />
-            <Button
+                </ActionList.Icon>
+                <ActionList.Text>Accessibility</ActionList.Text>
+              </ActionList.Action>
+            )}
+            <ActionList.Button
               ariaLabel={a11yStatusLabel}
-              padding="small"
-              size="medium"
-              variant="ghost"
               disabled={
                 a11yStatusValueToStoryIds['status-value:error'].length === 0 &&
                 a11yStatusValueToStoryIds['status-value:warning'].length === 0 &&
@@ -429,10 +415,10 @@ export const TestProviderRender: FC<TestProviderRenderProps> = ({
               <TestStatusIcon status={a11yStatusIcon} isRunning={isRunning} />
               {a11yStatusValueToStoryIds['status-value:error'].length +
                 a11yStatusValueToStoryIds['status-value:warning'].length || null}
-            </Button>
-          </Row>
+            </ActionList.Button>
+          </ActionList.Item>
         )}
-      </Extras>
+      </StyledActionList>
     </Container>
   );
 };
diff --git a/code/core/src/backgrounds/components/Tool.tsx b/code/core/src/backgrounds/components/Tool.tsx
@@ -54,7 +54,6 @@ interface PureProps {
 
 const Pure = memo(function PureTool(props: PureProps) {
   const {
-    item,
     length,
     updateGlobals,
     backgroundMap,
@@ -104,7 +103,7 @@ const Pure = memo(function PureTool(props: PureProps) {
           tooltip={isLocked ? 'Background set by story parameters' : 'Change background'}
           defaultOptions={backgroundName}
           options={options}
-          onSelect={(selected) => update({ value: selected, grid: isGrid })}
+          onSelect={(selected) => update({ value: selected as string, grid: isGrid })}
         />
       ) : null}
     </Fragment>