@storybook/react-native-ui-lite 10.2.2-alpha.2 → 10.2.2-alpha.4

package/dist/index.js

@@ -384,7 +384,7 @@ var GroupNode = import_react2.default.memo(function GroupNode2({
   const color = (0, import_react2.useMemo)(() => {
     return theme.base === "dark" ? theme.color.primary : theme.color.ultraviolet;
   }, [theme.base, theme.color.primary, theme.color.ultraviolet]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(BranchNode, { isExpandable, ...props, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(BranchNode, { isExpandable, accessibilityRole: "button", ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Wrapper, { children: [
       isExpandable && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CollapseIcon, { isExpanded }),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(GroupIcon, { width: 14, height: 14, color })
@@ -398,7 +398,7 @@ var ComponentNode = import_react2.default.memo(
     const color = (0, import_react2.useMemo)(() => {
       return theme.color.secondary;
     }, [theme.color.secondary]);
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(BranchNode, { isExpandable, ...props, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(BranchNode, { isExpandable, accessibilityRole: "button", ...props, children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Wrapper, { children: [
         isExpandable && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CollapseIcon, { isExpanded }),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ComponentIcon, { width: 12, height: 12, color })
@@ -413,7 +413,7 @@ var StoryNode = import_react2.default.memo(
     const color = (0, import_react2.useMemo)(() => {
       return props.selected ? theme.color.lightest : theme.color.seafoam;
     }, [props.selected, theme.color.lightest, theme.color.seafoam]);
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(LeafNode, { ...props, ref, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(LeafNode, { ...props, ref, accessibilityRole: "button", children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StoryIcon, { width: 14, height: 14, color }) }, `story-${props.id}-${color}`),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LeafNodeText, { selected: props.selected, numberOfLines: 1, children })
     ] });
@@ -464,10 +464,22 @@ var useSelectedNode = () => (0, import_react3.useContext)(SelectedNodeContext);
 
 // src/Tree.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var TextItem = import_react_native_theming3.styled.Text(({ theme }) => ({
-  fontSize: theme.typography.size.s2 + 1,
-  color: theme.color.defaultText
-}));
+var CASE_SPLIT_PATTERN = /\p{Lu}?\p{Ll}+|[0-9]+|\p{Lu}+(?!\p{Ll})|\p{Emoji_Presentation}|\p{Extended_Pictographic}|\p{L}+/gu;
+function words(str) {
+  return Array.from(str.match(CASE_SPLIT_PATTERN) ?? []);
+}
+function startCase(str) {
+  const words$1 = words(str.trim());
+  let result = "";
+  for (let i = 0; i < words$1.length; i++) {
+    const word = words$1[i];
+    if (result) {
+      result += " ";
+    }
+    result += word[0].toUpperCase() + word.slice(1).toLowerCase();
+  }
+  return result;
+}
 var Node = import_react4.default.memo(function Node2({
   item,
   refId,
@@ -483,7 +495,7 @@ var Node = import_react4.default.memo(function Node2({
 }) {
   const id = (0, import_react_native_ui_common.createId)(item.id, refId);
   if (item.type === "story") {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(LeafNodeStyleWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(LeafNodeStyleWrapper, { accessible: false, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       StoryNode,
       {
         selected: isSelected,
@@ -508,10 +520,11 @@ var Node = import_react4.default.memo(function Node2({
             event.preventDefault();
             setExpanded({ ids: [item.id], value: !isExpanded });
           },
+          accessibilityRole: "button",
           "aria-expanded": isExpanded,
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CollapseIcon, { isExpanded }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TextItem, { children: item.renderLabel?.(item, {}) || item.name })
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RootNodeText, { children: startCase(item.name) })
           ]
         }
       ),
@@ -547,7 +560,7 @@ var Node = import_react4.default.memo(function Node2({
           event.preventDefault();
           setExpanded({ ids: [item.id], value: !isExpanded });
         },
-        children: item.renderLabel?.(item) || item.name
+        children: startCase(item.name)
       },
       id
     );
@@ -576,7 +589,7 @@ var RootNode = import_react_native_theming3.styled.View(() => ({
   minHeight: 34
 }));
 var RootNodeText = import_react_native_theming3.styled.Text(({ theme }) => ({
-  fontSize: theme.typography.size.s1 - 1,
+  fontSize: theme.typography.size.s2,
   fontWeight: theme.typography.weight.bold,
   color: theme.textMutedColor,
   lineHeight: 16,
@@ -917,17 +930,26 @@ var Explorer = import_react6.default.memo(function Explorer2({
   setSelection
 }) {
   const containerRef = (0, import_react6.useRef)(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native3.View, { ref: containerRef, style: containerStyle, children: dataset.entries.map(([refId, ref]) => /* @__PURE__ */ (0, import_react7.createElement)(
-    Ref,
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_react_native3.View,
     {
-      ...ref,
-      key: refId,
-      isLoading,
-      isBrowsing,
-      selectedStoryId: selected?.refId === ref.id ? selected.storyId : null,
-      setSelection
+      ref: containerRef,
+      style: containerStyle,
+      id: "storybook-explorer-tree",
+      testID: "storybook-explorer-tree",
+      children: dataset.entries.map(([refId, ref]) => /* @__PURE__ */ (0, import_react7.createElement)(
+        Ref,
+        {
+          ...ref,
+          key: refId,
+          isLoading,
+          isBrowsing,
+          selectedStoryId: selected?.refId === ref.id ? selected.storyId : null,
+          setSelection
+        }
+      ))
     }
-  )) });
+  );
 });
 
 // src/Sidebar.tsx
@@ -1119,6 +1141,8 @@ var Search = import_react9.default.memo(function Search2({ children, dataset, se
       isOpen && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         ClearIcon,
         {
+          accessibilityRole: "button",
+          accessibilityLabel: "Clear search",
           onPress: () => {
             setInputValue("");
             inputRef.current.clear();
@@ -1268,16 +1292,25 @@ var Result = import_react10.default.memo(function Result2({
   );
   const nameHighlights = matches?.[0];
   const pathString = item.path?.join(" ") ?? "";
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(ResultRow, { ...props, onPress: press, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(IconWrapper, { children: [
-      item.type === "component" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ComponentIcon, { width: 14, height: 14, color: theme.color.secondary }),
-      item.type === "story" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(StoryIcon, { width: 14, height: 14, color: theme.color.seafoam })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(ResultRowContent, { testID: "search-result-item--label", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Title, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Highlight, { text: item.name, ranges: nameHighlights, children: item.name }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Path, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PathText, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Highlight, { text: pathString, ranges: matches?.[1], children: item.path?.join(" / ") }) }) })
-    ] })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    ResultRow,
+    {
+      ...props,
+      onPress: press,
+      accessibilityRole: "button",
+      accessibilityLabel: `${item.name}, ${item.path?.join(" / ") ?? ""}`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(IconWrapper, { children: [
+          item.type === "component" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ComponentIcon, { width: 14, height: 14, color: theme.color.secondary }),
+          item.type === "story" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(StoryIcon, { width: 14, height: 14, color: theme.color.seafoam })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(ResultRowContent, { testID: "search-result-item--label", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Title, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Highlight, { text: item.name, ranges: nameHighlights, children: item.name }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Path, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PathText, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Highlight, { text: pathString, ranges: matches?.[1], children: item.path?.join(" / ") }) }) })
+        ] })
+      ]
+    }
+  );
 });
 var Text = import_react_native_theming6.styled.Text(({ theme }) => ({
   color: theme.color.defaultText
@@ -1340,7 +1373,13 @@ var SearchResults = import_react10.default.memo(function SearchResults2({
         case "header":
           return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(RecentlyOpenedTitle, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { children: "Recently opened" }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_ui_common4.IconButton, { onPress: listItem.clearLastViewed })
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              import_react_native_ui_common4.IconButton,
+              {
+                onPress: listItem.clearLastViewed,
+                accessibilityLabel: "Clear recently opened"
+              }
+            )
           ] });
         case "noResults":
           return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(NoResults, { children: [
@@ -1422,8 +1461,24 @@ var Swap = import_react11.default.memo(function Swap2({
   const aStyle = (0, import_react11.useMemo)(() => condition ? flexStyle4 : noneStyle, [condition]);
   const bStyle = (0, import_react11.useMemo)(() => condition ? noneStyle : flexStyle4, [condition]);
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native6.View, { style: aStyle, children: a }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native6.View, { style: bStyle, children: b })
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      import_react_native6.View,
+      {
+        style: aStyle,
+        accessibilityElementsHidden: !condition,
+        importantForAccessibility: condition ? "auto" : "no-hide-descendants",
+        children: a
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      import_react_native6.View,
+      {
+        style: bStyle,
+        accessibilityElementsHidden: condition,
+        importantForAccessibility: condition ? "no-hide-descendants" : "auto",
+        children: b
+      }
+    )
   ] });
 });
 var useCombination = (index, indexError, previewInitialized, status, refs) => {
@@ -1630,6 +1685,9 @@ var MobileAddonsPanel = (0, import_react13.forwardRef)(
           height: panelHeight,
           transform: [{ translateY: positionBottomAnimation }]
         },
+        pointerEvents: isOpen ? "auto" : "none",
+        accessibilityElementsHidden: !isOpen,
+        importantForAccessibility: isOpen ? "auto" : "no-hide-descendants",
         children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           import_react_native8.View,
           {
@@ -1739,7 +1797,8 @@ var AddonsTabs = ({ onClose, storyId }) => {
           style: closeIconStyle,
           hitSlop,
           Icon: CloseIcon,
-          onPress: () => onClose?.()
+          onPress: () => onClose?.(),
+          accessibilityLabel: "Close addons panel"
         }
       )
     ] }),
@@ -1755,7 +1814,16 @@ var AddonsTabs = ({ onClose, storyId }) => {
   ] });
 };
 var Tab = ({ active, onPress, text }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TabButton, { active, onPress, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TabText, { active, children: text }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    TabButton,
+    {
+      active,
+      onPress,
+      accessibilityRole: "tab",
+      accessibilityState: { selected: active },
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TabText, { active, children: text })
+    }
+  );
 };
 var TabButton = import_react_native_theming8.styled.TouchableOpacity(({ theme, active }) => ({
   borderBottomWidth: active ? 2 : 0,
@@ -1840,139 +1908,154 @@ var useAnimatedModalHeight = () => {
   return animatedHeight;
 };
 var MobileMenuDrawer = (0, import_react14.memo)(
-  (0, import_react14.forwardRef)(({ children }, ref) => {
-    const [isVisible, setIsVisible] = (0, import_react14.useState)(false);
-    const { scrollCallback } = useSelectedNode();
-    const theme = (0, import_react_native_theming9.useTheme)();
-    const { height } = (0, import_react_native9.useWindowDimensions)();
-    const animatedHeight = useAnimatedModalHeight();
-    const slideAnim = useAnimatedValue(height);
-    const dragY = useAnimatedValue(0);
-    const openDrawer = (0, import_react14.useCallback)(() => {
-      dragY.setValue(0);
-      slideAnim.setValue(height);
-      setIsVisible(true);
-      import_react_native9.Animated.timing(slideAnim, {
-        toValue: 0,
-        duration: 300,
-        easing: import_react_native9.Easing.out(import_react_native9.Easing.quad),
-        useNativeDriver: true
-      }).start(({ finished }) => {
-        if (finished) {
-          scrollCallback({ animated: false, id: void 0 });
-        }
-      });
-    }, [dragY, height, scrollCallback, slideAnim]);
-    const closeDrawer = (0, import_react14.useCallback)(() => {
-      import_react_native9.Keyboard.dismiss();
-      import_react_native9.Animated.timing(slideAnim, {
-        toValue: height,
-        duration: 300,
-        easing: import_react_native9.Easing.in(import_react_native9.Easing.quad),
-        useNativeDriver: true
-      }).start(({ finished }) => {
-        if (finished) {
-          setIsVisible(false);
-        }
-      });
-    }, [height, slideAnim]);
-    const panResponder = (0, import_react14.useMemo)(
-      () => import_react_native9.PanResponder.create({
-        onStartShouldSetPanResponder: () => true,
-        onMoveShouldSetPanResponder: (_, gestureState) => {
-          return gestureState.dy > 0;
-        },
-        onPanResponderMove: (_, gestureState) => {
-          if (gestureState.dy > 0) {
-            dragY.setValue(gestureState.dy);
+  (0, import_react14.forwardRef)(
+    ({ children, onVisibilityChange }, ref) => {
+      const [isVisible, setIsVisible] = (0, import_react14.useState)(false);
+      const { scrollCallback } = useSelectedNode();
+      const theme = (0, import_react_native_theming9.useTheme)();
+      const { height } = (0, import_react_native9.useWindowDimensions)();
+      const animatedHeight = useAnimatedModalHeight();
+      const slideAnim = useAnimatedValue(height);
+      const dragY = useAnimatedValue(0);
+      const openDrawer = (0, import_react14.useCallback)(() => {
+        dragY.setValue(0);
+        slideAnim.setValue(height);
+        setIsVisible(true);
+        onVisibilityChange?.(true);
+        import_react_native9.Animated.timing(slideAnim, {
+          toValue: 0,
+          duration: 300,
+          easing: import_react_native9.Easing.out(import_react_native9.Easing.quad),
+          useNativeDriver: true
+        }).start(({ finished }) => {
+          if (finished) {
+            scrollCallback({ animated: false, id: void 0 });
           }
-        },
-        onPanResponderRelease: (_, gestureState) => {
-          if (gestureState.dy > 50) {
-            closeDrawer();
+        });
+      }, [dragY, height, onVisibilityChange, scrollCallback, slideAnim]);
+      const closeDrawer = (0, import_react14.useCallback)(() => {
+        import_react_native9.Keyboard.dismiss();
+        onVisibilityChange?.(false);
+        import_react_native9.Animated.timing(slideAnim, {
+          toValue: height,
+          duration: 300,
+          easing: import_react_native9.Easing.in(import_react_native9.Easing.quad),
+          useNativeDriver: true
+        }).start(({ finished }) => {
+          if (finished) {
+            setIsVisible(false);
+          }
+        });
+      }, [height, onVisibilityChange, slideAnim]);
+      const panResponder = (0, import_react14.useMemo)(
+        () => import_react_native9.PanResponder.create({
+          onStartShouldSetPanResponder: () => true,
+          onMoveShouldSetPanResponder: (_, gestureState) => {
+            return gestureState.dy > 0;
+          },
+          onPanResponderMove: (_, gestureState) => {
+            if (gestureState.dy > 0) {
+              dragY.setValue(gestureState.dy);
+            }
+          },
+          onPanResponderRelease: (_, gestureState) => {
+            if (gestureState.dy > 50) {
+              closeDrawer();
+            } else {
+              import_react_native9.Animated.timing(dragY, {
+                toValue: 0,
+                duration: 300,
+                easing: import_react_native9.Easing.out(import_react_native9.Easing.quad),
+                useNativeDriver: true
+              }).start();
+            }
+          }
+        }),
+        [closeDrawer, dragY]
+      );
+      (0, import_react14.useImperativeHandle)(ref, () => ({
+        setMobileMenuOpen: (open) => {
+          if (open) {
+            openDrawer();
           } else {
-            import_react_native9.Animated.timing(dragY, {
-              toValue: 0,
-              duration: 300,
-              easing: import_react_native9.Easing.out(import_react_native9.Easing.quad),
-              useNativeDriver: true
-            }).start();
+            closeDrawer();
           }
         }
-      }),
-      [closeDrawer, dragY]
-    );
-    (0, import_react14.useImperativeHandle)(ref, () => ({
-      setMobileMenuOpen: (open) => {
-        if (open) {
-          openDrawer();
-        } else {
-          closeDrawer();
+      }));
+      const handleStyle = (0, import_react14.useMemo)(
+        () => ({
+          width: 40,
+          height: 5,
+          backgroundColor: theme.color.mediumdark,
+          borderRadius: 2.5,
+          alignSelf: "center"
+        }),
+        [theme.color.mediumdark]
+      );
+      const drawerContainerStyle = (0, import_react14.useMemo)(
+        () => ({
+          flex: 1,
+          borderTopColor: theme.appBorderColor,
+          borderTopWidth: 1,
+          borderStyle: "solid",
+          backgroundColor: theme.background.content,
+          elevation: 8,
+          boxShadow: `0 16px 32px 0 ${theme.color.border}`
+        }),
+        [theme.appBorderColor, theme.background.content, theme.color.border]
+      );
+      const dragHandleWrapperStyle = (0, import_react14.useMemo)(
+        () => ({
+          alignItems: "center",
+          justifyContent: "center",
+          paddingBottom: 16,
+          paddingTop: 10,
+          backgroundColor: theme.background.content
+        }),
+        [theme.background.content]
+      );
+      const childrenWrapperStyle = (0, import_react14.useMemo)(
+        () => ({
+          flex: 1,
+          backgroundColor: theme.background.content
+        }),
+        [theme.background.content]
+      );
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_portal.Portal, { hostName: "storybook-lite-ui-root", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+        import_react_native9.Animated.View,
+        {
+          style: [portalContainerStyle, { transform: [{ translateY: slideAnim }] }],
+          pointerEvents: isVisible ? "auto" : "none",
+          accessibilityElementsHidden: !isVisible,
+          importantForAccessibility: isVisible ? "auto" : "no-hide-descendants",
+          accessibilityViewIsModal: isVisible,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native9.View, { style: flexStyle5, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              import_react_native9.Pressable,
+              {
+                style: flexStyle5,
+                onPress: closeDrawer,
+                accessibilityRole: "button",
+                accessibilityLabel: "Close story list"
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              import_react_native9.Animated.View,
+              {
+                style: {
+                  height: animatedHeight
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native9.Animated.View, { style: [drawerContainerStyle, { transform: [{ translateY: dragY }] }], children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native9.View, { ...panResponder.panHandlers, style: dragHandleWrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native9.View, { style: handleStyle }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native9.View, { style: childrenWrapperStyle, children })
+                ] })
+              }
+            )
+          ]
         }
-      }
-    }));
-    const handleStyle = (0, import_react14.useMemo)(
-      () => ({
-        width: 40,
-        height: 5,
-        backgroundColor: theme.color.mediumdark,
-        borderRadius: 2.5,
-        alignSelf: "center"
-      }),
-      [theme.color.mediumdark]
-    );
-    const drawerContainerStyle = (0, import_react14.useMemo)(
-      () => ({
-        flex: 1,
-        borderTopColor: theme.appBorderColor,
-        borderTopWidth: 1,
-        borderStyle: "solid",
-        backgroundColor: theme.background.content,
-        elevation: 8,
-        boxShadow: `0 16px 32px 0 ${theme.color.border}`
-      }),
-      [theme.appBorderColor, theme.background.content, theme.color.border]
-    );
-    const dragHandleWrapperStyle = (0, import_react14.useMemo)(
-      () => ({
-        alignItems: "center",
-        justifyContent: "center",
-        paddingBottom: 16,
-        paddingTop: 10,
-        backgroundColor: theme.background.content
-      }),
-      [theme.background.content]
-    );
-    const childrenWrapperStyle = (0, import_react14.useMemo)(
-      () => ({
-        flex: 1,
-        backgroundColor: theme.background.content
-      }),
-      [theme.background.content]
-    );
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_portal.Portal, { hostName: "storybook-lite-ui-root", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-      import_react_native9.Animated.View,
-      {
-        style: [portalContainerStyle, { transform: [{ translateY: slideAnim }] }],
-        pointerEvents: isVisible ? "auto" : "none",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native9.View, { style: flexStyle5, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native9.Pressable, { style: flexStyle5, onPress: closeDrawer }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-            import_react_native9.Animated.View,
-            {
-              style: {
-                height: animatedHeight
-              },
-              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native9.Animated.View, { style: [drawerContainerStyle, { transform: [{ translateY: dragY }] }], children: [
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native9.View, { ...panResponder.panHandlers, style: dragHandleWrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native9.View, { style: handleStyle }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native9.View, { style: childrenWrapperStyle, children })
-              ] })
-            }
-          )
-        ]
-      }
-    ) });
-  })
+      ) });
+    }
+  )
 );
 
 // src/ResizeHandle.tsx
@@ -2086,6 +2169,8 @@ var BrandLogo = ({ theme }) => {
         onPress: () => {
           if (theme.brand.url) import_react_native11.Linking.openURL(theme.brand.url);
         },
+        accessibilityRole: "link",
+        accessibilityLabel: theme.brand.title ?? "Brand logo",
         children: image
       }
     );
@@ -2110,6 +2195,8 @@ var BrandTitle = ({ theme }) => {
         onPress: () => {
           if (theme.brand.url) import_react_native11.Linking.openURL(theme.brand.url);
         },
+        accessibilityRole: "link",
+        accessibilityLabel: theme.brand.title,
         children: title
       }
     );
@@ -2258,118 +2345,147 @@ var Layout = ({
   );
   const mobileMenuDrawerRef = (0, import_react17.useRef)(null);
   const addonPanelRef = (0, import_react17.useRef)(null);
+  const [isDrawerOpen, setIsDrawerOpen] = (0, import_react17.useState)(false);
   const setSelection = (0, import_react17.useCallback)(({ storyId: newStoryId }) => {
     const channel = import_manager_api2.addons.getChannel();
     channel.emit(import_core_events.SET_CURRENT_STORY, { storyId: newStoryId });
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native12.View, { style: containerStyle2, children: [
-    isDesktop ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native12.View, { style: desktopSidebarStyle, pointerEvents: isResizing ? "none" : "auto", children: desktopSidebarOpen ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native12.View, { style: desktopLogoContainer, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(StorybookLogo, { theme }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_ui_common7.IconButton, { onPress: () => setDesktopSidebarOpen(false), Icon: MenuIcon })
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    import_react_native12.View,
+    {
+      style: containerStyle2,
+      accessibilityElementsHidden: isDrawerOpen,
+      importantForAccessibility: isDrawerOpen ? "no-hide-descendants" : "auto",
+      children: [
+        isDesktop ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native12.View, { style: desktopSidebarStyle, pointerEvents: isResizing ? "none" : "auto", children: desktopSidebarOpen ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native12.View, { style: desktopLogoContainer, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(StorybookLogo, { theme }),
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                import_react_native_ui_common7.IconButton,
+                {
+                  onPress: () => setDesktopSidebarOpen(false),
+                  Icon: MenuIcon,
+                  accessibilityLabel: "Close sidebar"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native12.View, { style: flexStyle6, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              Sidebar,
+              {
+                previewInitialized: true,
+                indexError: void 0,
+                refs: placeholderObject,
+                setSelection,
+                status: placeholderObject,
+                index: storyHash,
+                storyId: story?.id,
+                refId: DEFAULT_REF_ID
+              }
+            ) })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            import_react_native_ui_common7.IconButton,
+            {
+              onPress: () => setDesktopSidebarOpen(true),
+              Icon: MenuIcon,
+              accessibilityLabel: "Open sidebar"
+            }
+          ) }),
+          desktopSidebarOpen ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            ResizeHandle,
+            {
+              direction: "horizontal",
+              onResize: handleSidebarResize,
+              onResizeStart,
+              onResizeEnd
+            }
+          ) : null
+        ] }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native12.View, { style: mobileContentStyle, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native12.View, { style: contentContainerStyle, pointerEvents: isResizing ? "none" : "auto", children }),
+          story?.parameters?.hideFullScreenButton || isDesktop ? null : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            import_react_native12.TouchableOpacity,
+            {
+              style: fullScreenButtonStyle,
+              hitSlop: { top: 10, bottom: 10, left: 10, right: 10 },
+              onPress: () => setUiHidden((prev) => !prev),
+              accessibilityRole: "button",
+              accessibilityLabel: uiHidden ? "Exit fullscreen" : "Enter fullscreen",
+              children: uiHidden ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CloseFullscreenIcon, { color: theme.color.mediumdark }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(FullscreenIcon, { color: theme.color.mediumdark })
+            }
+          ),
+          isDesktop ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+            desktopAddonsPanelOpen ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              ResizeHandle,
+              {
+                direction: "vertical",
+                onResize: handleAddonsPanelResize,
+                onResizeStart,
+                onResizeEnd
+              }
+            ) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native12.View, { style: desktopAddonsPanelStyle, pointerEvents: isResizing ? "none" : "auto", children: desktopAddonsPanelOpen ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(AddonsTabs, { storyId: story?.id, onClose: () => setDesktopAddonsPanelOpen(false) }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              import_react_native_ui_common7.IconButton,
+              {
+                style: iconFloatRightStyle,
+                onPress: () => setDesktopAddonsPanelOpen(true),
+                Icon: BottomBarToggleIcon,
+                accessibilityLabel: "Open addons panel"
+              }
+            ) })
+          ] }) : null
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native12.View, { style: flexStyle6, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-          Sidebar,
-          {
-            previewInitialized: true,
-            indexError: void 0,
-            refs: placeholderObject,
-            setSelection,
-            status: placeholderObject,
-            index: storyHash,
-            storyId: story?.id,
-            refId: DEFAULT_REF_ID
-          }
-        ) })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_ui_common7.IconButton, { onPress: () => setDesktopSidebarOpen(true), Icon: MenuIcon }) }),
-      desktopSidebarOpen ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-        ResizeHandle,
-        {
-          direction: "horizontal",
-          onResize: handleSidebarResize,
-          onResizeStart,
-          onResizeEnd
-        }
-      ) : null
-    ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native12.View, { style: mobileContentStyle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native12.View, { style: contentContainerStyle, pointerEvents: isResizing ? "none" : "auto", children }),
-      story?.parameters?.hideFullScreenButton || isDesktop ? null : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-        import_react_native12.TouchableOpacity,
-        {
-          style: fullScreenButtonStyle,
-          hitSlop: { top: 10, bottom: 10, left: 10, right: 10 },
-          onPress: () => setUiHidden((prev) => !prev),
-          children: uiHidden ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CloseFullscreenIcon, { color: theme.color.mediumdark }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(FullscreenIcon, { color: theme.color.mediumdark })
-        }
-      ),
-      isDesktop ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-        desktopAddonsPanelOpen ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-          ResizeHandle,
-          {
-            direction: "vertical",
-            onResize: handleAddonsPanelResize,
-            onResizeStart,
-            onResizeEnd
-          }
-        ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native12.View, { style: desktopAddonsPanelStyle, pointerEvents: isResizing ? "none" : "auto", children: desktopAddonsPanelOpen ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(AddonsTabs, { storyId: story?.id, onClose: () => setDesktopAddonsPanelOpen(false) }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-          import_react_native_ui_common7.IconButton,
-          {
-            style: iconFloatRightStyle,
-            onPress: () => setDesktopAddonsPanelOpen(true),
-            Icon: BottomBarToggleIcon
-          }
-        ) })
-      ] }) : null
-    ] }),
-    !uiHidden && !isDesktop ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Container2, { style: navContainerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Nav, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
-        Button2,
-        {
-          testID: "mobile-menu-button",
-          style: navButtonStyle,
-          hitSlop: navButtonHitSlop,
-          onPress: () => mobileMenuDrawerRef.current?.setMobileMenuOpen(true),
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MenuIcon, { color: theme.color.mediumdark }),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native12.Text, { style: navButtonTextStyle, numberOfLines: 1, children: [
-              story?.title,
-              "/",
-              story?.name
-            ] })
-          ]
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-        import_react_native_ui_common7.IconButton,
-        {
-          testID: "mobile-addons-button",
-          hitSlop: addonButtonHitSlop,
-          onPress: () => addonPanelRef.current.setAddonsPanelOpen(true),
-          Icon: BottomBarToggleIcon
-        }
-      )
-    ] }) }) : null,
-    isDesktop ? null : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(MobileMenuDrawer, { ref: mobileMenuDrawerRef, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native12.View, { style: mobileMenuDrawerContentStyle, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(StorybookLogo, { theme }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-        Sidebar,
-        {
-          previewInitialized: true,
-          indexError: void 0,
-          refs: placeholderObject,
-          setSelection,
-          status: placeholderObject,
-          index: storyHash,
-          storyId: story?.id,
-          refId: DEFAULT_REF_ID
-        }
-      )
-    ] }),
-    isDesktop ? null : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MobileAddonsPanel, { ref: addonPanelRef, storyId: story?.id })
-  ] });
+        !uiHidden && !isDesktop ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Container2, { style: navContainerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Nav, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+            Button2,
+            {
+              testID: "mobile-menu-button",
+              style: navButtonStyle,
+              hitSlop: navButtonHitSlop,
+              onPress: () => mobileMenuDrawerRef.current?.setMobileMenuOpen(true),
+              accessibilityRole: "button",
+              accessibilityLabel: "Open story list",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MenuIcon, { color: theme.color.mediumdark }),
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native12.Text, { style: navButtonTextStyle, numberOfLines: 1, children: [
+                  story?.title,
+                  "/",
+                  story?.name
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            import_react_native_ui_common7.IconButton,
+            {
+              testID: "mobile-addons-button",
+              hitSlop: addonButtonHitSlop,
+              onPress: () => addonPanelRef.current.setAddonsPanelOpen(true),
+              Icon: BottomBarToggleIcon,
+              accessibilityLabel: "Open addons panel"
+            }
+          )
+        ] }) }) : null,
+        isDesktop ? null : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(MobileMenuDrawer, { ref: mobileMenuDrawerRef, onVisibilityChange: setIsDrawerOpen, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native12.View, { style: mobileMenuDrawerContentStyle, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(StorybookLogo, { theme }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            Sidebar,
+            {
+              previewInitialized: true,
+              indexError: void 0,
+              refs: placeholderObject,
+              setSelection,
+              status: placeholderObject,
+              index: storyHash,
+              storyId: story?.id,
+              refId: DEFAULT_REF_ID
+            }
+          )
+        ] }),
+        isDesktop ? null : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MobileAddonsPanel, { ref: addonPanelRef, storyId: story?.id })
+      ]
+    }
+  );
 };
 var Nav = import_react_native_theming11.styled.View({
   display: "flex",