@storybook/react-native-ui 10.4.6 → 10.4.8-canary-20260711115827

package/dist/index.d.ts

@@ -5,7 +5,6 @@ import { CombinedDataset, ExpandAction, Item, SBUI, Selection } from "@storybook
 import { API_IndexHash, API_LoadedRefData } from "storybook/internal/types";
 import { ReactRenderer } from "@storybook/react";
 import { Args, StoryContext } from "storybook/internal/csf";
-
 //#region src/TreeNode.d.ts
 interface NodeProps {
   children: React.ReactNode | React.ReactNode[];
@@ -105,25 +104,11 @@ interface SidebarProps extends API_LoadedRefData {
   menuHighlighted?: boolean;
   setSelection: (selection: Selection) => void;
 }
-declare const Sidebar: React.MemoExoticComponent<({
-  storyId,
-  refId,
-  index,
-  indexError,
-  status,
-  previewInitialized,
-  refs,
-  setSelection
-}: SidebarProps) => import("react/jsx-runtime").JSX.Element>;
+declare const Sidebar: React.MemoExoticComponent<({ storyId, refId, index, indexError, status, previewInitialized, refs, setSelection }: SidebarProps) => import("react/jsx-runtime").JSX.Element>;
 //#endregion
 //#region src/Layout.d.ts
 declare const FullUI: SBUI;
-declare const Layout: ({
-  storyHash,
-  story,
-  storyBackgroundColor,
-  children
-}: {
+declare const Layout: ({ storyHash, story, storyBackgroundColor, children }: {
   storyHash: API_IndexHash | undefined;
   story?: StoryContext<ReactRenderer, Args>;
   storyBackgroundColor?: string;

package/dist/index.js

@@ -1182,6 +1182,9 @@ const MobileAddonsPanel = (0, react.forwardRef)(({ storyId, parameters }, ref) =
 		enableHandlePanningGesture: true,
 		stackBehavior: "replace",
 		enableDynamicSizing: false,
+		accessible: false,
+		accessibilityLabel: null,
+		accessibilityRole: null,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_reanimated.default.View, {
 			style: [contentStyle, adjustedBottomSheetSize],
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AddonsTabs, {
@@ -1252,7 +1255,8 @@ const AddonsTabs = ({ onClose, storyId, parameters }) => {
 				style: closeIconStyle,
 				hitSlop,
 				Icon: CloseIcon,
-				onPress: () => onClose?.()
+				onPress: () => onClose?.(),
+				accessibilityLabel: "Close addons panel"
 			})]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_gesture_handler.ScrollView, {
 			style: addonsScrollStyle,
@@ -1274,9 +1278,15 @@ const PanelRenderer = ({ panel }) => {
 	return panel.render({ active: true });
 };
 const Tab = ({ active, onPress, text }) => {
+	const testID = `addon-tab-${text.toLowerCase().replace(/[^a-z0-9]+/g, "-")}`;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TabButton, {
 		active,
 		onPress,
+		testID,
+		accessible: true,
+		accessibilityRole: "tab",
+		accessibilityState: { selected: active },
+		accessibilityLabel: text,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TabText, {
 			active,
 			children: text
@@ -1758,7 +1768,8 @@ const Layout = ({ storyHash, story, storyBackgroundColor, children }) => {
 				}), hasEnabledPanels && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_storybook_react_native_ui_common.IconButton, {
 					testID: "mobile-addons-button",
 					onPress: () => addonPanelRef.current.setAddonsPanelOpen(true),
-					Icon: BottomBarToggleIcon
+					Icon: BottomBarToggleIcon,
+					accessibilityLabel: "Open addons panel"
 				})] })
 			}) : null,
 			!isDesktop ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectedNodeProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(MobileMenuDrawer, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-ui",
-  "version": "10.4.6",
+  "version": "10.4.8-canary-20260711115827",
   "description": "ui components for react native storybook",
   "keywords": [
     "react",
@@ -30,15 +30,15 @@
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
     "@nozbe/microfuzz": "^1.0.0",
-    "@storybook/react": "^10.4.6",
-    "@storybook/react-native-theming": "^10.4.6",
-    "@storybook/react-native-ui-common": "^10.4.6",
+    "@storybook/react": "^10.5.0",
+    "@storybook/react-native-theming": "10.4.8-canary-20260711115827",
+    "@storybook/react-native-ui-common": "10.4.8-canary-20260711115827",
     "polished": "^4.3.1"
   },
   "devDependencies": {
     "@types/react": "~19.2.14",
-    "storybook": "^10.4.6",
-    "tsdown": "^0.22.3",
+    "storybook": "^10.5.0",
+    "tsdown": "^0.22.4",
     "typescript": "~6.0.3"
   },
   "peerDependencies": {

package/src/Layout.tsx

@@ -133,6 +133,7 @@ export const Layout = ({
   const [uiHidden, setUiHidden] = useState(false);
 
   useLayoutEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setUiHidden(story?.parameters?.storybookUIVisibility === 'hidden');
   }, [story?.parameters?.storybookUIVisibility]);
 
@@ -322,6 +323,7 @@ export const Layout = ({
                 testID="mobile-addons-button"
                 onPress={() => addonPanelRef.current.setAddonsPanelOpen(true)}
                 Icon={BottomBarToggleIcon}
+                accessibilityLabel="Open addons panel"
               />
             )}
           </Nav>

package/src/MobileAddonsPanel.tsx

@@ -99,6 +99,9 @@ export const MobileAddonsPanel = forwardRef<MobileAddonsPanelRef, MobileAddonsPa
         // enableContentPanningGesture={true}
         stackBehavior="replace"
         enableDynamicSizing={false}
+        accessible={false}
+        accessibilityLabel={null}
+        accessibilityRole={null}
       >
         <Animated.View style={[contentStyle, adjustedBottomSheetSize]}>
           <AddonsTabs
@@ -209,6 +212,7 @@ export const AddonsTabs = ({
           hitSlop={hitSlop}
           Icon={CloseIcon}
           onPress={() => onClose?.()}
+          accessibilityLabel="Close addons panel"
         />
       </View>
       <ScrollView
@@ -241,8 +245,18 @@ const PanelRenderer = ({ panel }: { panel: Addon_BaseType }) => {
 };
 
 const Tab = ({ active, onPress, text }: { active: boolean; onPress: () => void; text: string }) => {
+  const testID = `addon-tab-${text.toLowerCase().replace(/[^a-z0-9]+/g, '-')}`;
+
   return (
-    <TabButton active={active} onPress={onPress}>
+    <TabButton
+      active={active}
+      onPress={onPress}
+      testID={testID}
+      accessible
+      accessibilityRole="tab"
+      accessibilityState={{ selected: active }}
+      accessibilityLabel={text}
+    >
       <TabText active={active}>{text}</TabText>
     </TabButton>
   );