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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-ui-lite",
-  "version": "10.2.2-alpha.2",
+  "version": "10.2.2-alpha.3",
   "description": "lightweight ui components for react native storybook",
   "keywords": [
     "react",
@@ -42,8 +42,8 @@
     "@legendapp/list": "3.0.0-beta.31",
     "@nozbe/microfuzz": "^1.0.0",
     "@storybook/react": "^10.2.2",
-    "@storybook/react-native-theming": "^10.2.2-alpha.2",
-    "@storybook/react-native-ui-common": "^10.2.2-alpha.2",
+    "@storybook/react-native-theming": "^10.2.2-alpha.3",
+    "@storybook/react-native-ui-common": "^10.2.2-alpha.3",
     "polished": "^4.3.1",
     "react-native-safe-area-context": "^5"
   },
@@ -58,5 +58,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "af294af11927af3754f6958f0f6f2a358897f7b9"
+  "gitHead": "b996f5156b78ae94b967434130a6af1bee2876a2"
 }

package/src/Explorer.tsx

@@ -24,7 +24,12 @@ export const Explorer: FC<ExplorerProps> = React.memo(function Explorer({
   const containerRef = useRef<View>(null);
 
   return (
-    <View ref={containerRef} style={containerStyle}>
+    <View
+      ref={containerRef}
+      style={containerStyle}
+      id="storybook-explorer-tree"
+      testID="storybook-explorer-tree"
+    >
       {dataset.entries.map(([refId, ref]) => (
         <Ref
           {...ref}

package/src/Layout.tsx

@@ -209,6 +209,7 @@ export const Layout = ({
 
   const mobileMenuDrawerRef = useRef<MobileMenuDrawerRef>(null);
   const addonPanelRef = useRef<MobileAddonsPanelRef>(null);
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
 
   const setSelection = useCallback(({ storyId: newStoryId }: { storyId: string }) => {
     const channel = addons.getChannel();
@@ -217,7 +218,11 @@ export const Layout = ({
   }, []);
 
   return (
-    <View style={containerStyle}>
+    <View
+      style={containerStyle}
+      accessibilityElementsHidden={isDrawerOpen}
+      importantForAccessibility={isDrawerOpen ? 'no-hide-descendants' : 'auto'}
+    >
       {isDesktop ? (
         <>
           <View style={desktopSidebarStyle} pointerEvents={isResizing ? 'none' : 'auto'}>
@@ -226,7 +231,11 @@ export const Layout = ({
                 <View style={desktopLogoContainer}>
                   <StorybookLogo theme={theme} />
 
-                  <IconButton onPress={() => setDesktopSidebarOpen(false)} Icon={MenuIcon} />
+                  <IconButton
+                    onPress={() => setDesktopSidebarOpen(false)}
+                    Icon={MenuIcon}
+                    accessibilityLabel="Close sidebar"
+                  />
                 </View>
 
                 <View style={flexStyle}>
@@ -243,7 +252,11 @@ export const Layout = ({
                 </View>
               </>
             ) : (
-              <IconButton onPress={() => setDesktopSidebarOpen(true)} Icon={MenuIcon} />
+              <IconButton
+                onPress={() => setDesktopSidebarOpen(true)}
+                Icon={MenuIcon}
+                accessibilityLabel="Open sidebar"
+              />
             )}
           </View>
           {desktopSidebarOpen ? (
@@ -267,6 +280,8 @@ export const Layout = ({
             style={fullScreenButtonStyle}
             hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
             onPress={() => setUiHidden((prev) => !prev)}
+            accessibilityRole="button"
+            accessibilityLabel={uiHidden ? 'Exit fullscreen' : 'Enter fullscreen'}
           >
             {uiHidden ? (
               <CloseFullscreenIcon color={theme.color.mediumdark} />
@@ -294,6 +309,7 @@ export const Layout = ({
                   style={iconFloatRightStyle}
                   onPress={() => setDesktopAddonsPanelOpen(true)}
                   Icon={BottomBarToggleIcon}
+                  accessibilityLabel="Open addons panel"
                 />
               )}
             </View>
@@ -309,6 +325,8 @@ export const Layout = ({
               style={navButtonStyle}
               hitSlop={navButtonHitSlop}
               onPress={() => mobileMenuDrawerRef.current?.setMobileMenuOpen(true)}
+              accessibilityRole="button"
+              accessibilityLabel="Open story list"
             >
               <MenuIcon color={theme.color.mediumdark} />
               <Text style={navButtonTextStyle} numberOfLines={1}>
@@ -321,13 +339,14 @@ export const Layout = ({
               hitSlop={addonButtonHitSlop}
               onPress={() => addonPanelRef.current.setAddonsPanelOpen(true)}
               Icon={BottomBarToggleIcon}
+              accessibilityLabel="Open addons panel"
             />
           </Nav>
         </Container>
       ) : null}
 
       {isDesktop ? null : (
-        <MobileMenuDrawer ref={mobileMenuDrawerRef}>
+        <MobileMenuDrawer ref={mobileMenuDrawerRef} onVisibilityChange={setIsDrawerOpen}>
           <View style={mobileMenuDrawerContentStyle}>
             <StorybookLogo theme={theme} />
           </View>

package/src/MobileAddonsPanel.tsx

@@ -148,6 +148,9 @@ export const MobileAddonsPanel = forwardRef<MobileAddonsPanelRef, { storyId?: st
           height: panelHeight,
           transform: [{ translateY: positionBottomAnimation }],
         }}
+        pointerEvents={isOpen ? 'auto' : 'none'}
+        accessibilityElementsHidden={!isOpen}
+        importantForAccessibility={isOpen ? 'auto' : 'no-hide-descendants'}
       >
         <View
           style={{
@@ -272,6 +275,7 @@ export const AddonsTabs = ({ onClose, storyId }: { onClose?: () => void; storyId
           hitSlop={hitSlop}
           Icon={CloseIcon}
           onPress={() => onClose?.()}
+          accessibilityLabel="Close addons panel"
         />
       </View>
       <ScrollView
@@ -288,7 +292,12 @@ export const AddonsTabs = ({ onClose, storyId }: { onClose?: () => void; storyId
 
 const Tab = ({ active, onPress, text }: { active: boolean; onPress: () => void; text: string }) => {
   return (
-    <TabButton active={active} onPress={onPress}>
+    <TabButton
+      active={active}
+      onPress={onPress}
+      accessibilityRole="tab"
+      accessibilityState={{ selected: active }}
+    >
       <TabText active={active}>{text}</TabText>
     </TabButton>
   );

package/src/MobileMenuDrawer.tsx

@@ -40,6 +40,7 @@ const portalContainerStyle: ViewStyle = {
 
 interface MobileMenuDrawerProps {
   children: ReactNode | ReactNode[];
+  onVisibilityChange?: (visible: boolean) => void;
 }
 
 export interface MobileMenuDrawerRef {
@@ -110,166 +111,177 @@ export const useAnimatedModalHeight = () => {
 };
 
 export const MobileMenuDrawer = memo(
-  forwardRef<MobileMenuDrawerRef, MobileMenuDrawerProps>(({ children }, ref) => {
-    // const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
-    const [isVisible, setIsVisible] = useState(false);
-    const { scrollCallback } = useSelectedNode();
-    const theme = useTheme();
-    const { height } = useWindowDimensions();
-    const animatedHeight = useAnimatedModalHeight();
-
-    // Slide animation for drawer entrance/exit
-    const slideAnim = useAnimatedValue(height);
-
-    // Create a reference for the drag handle animation
-    const dragY = useAnimatedValue(0);
-
-    const openDrawer = useCallback(() => {
-      dragY.setValue(0);
-      slideAnim.setValue(height);
-      setIsVisible(true);
-      // setMobileMenuOpen(true);
-      Animated.timing(slideAnim, {
-        toValue: 0,
-        duration: 300,
-        easing: Easing.out(Easing.quad),
-        useNativeDriver: true,
-      }).start(({ finished }) => {
-        if (finished) {
-          // go to the selected story and don't animate
-          scrollCallback({ animated: false, id: undefined });
-        }
-      });
-    }, [dragY, height, scrollCallback, slideAnim]);
-
-    const closeDrawer = useCallback(() => {
-      Keyboard.dismiss();
-      // setMobileMenuOpen(false);
-      Animated.timing(slideAnim, {
-        toValue: height,
-        duration: 300,
-        easing: Easing.in(Easing.quad),
-        useNativeDriver: true,
-      }).start(({ finished }) => {
-        if (finished) {
-          setIsVisible(false);
-        }
-      });
-    }, [height, slideAnim]);
-
-    // Create the pan responder for handling drag gestures
-    const panResponder = useMemo(
-      () =>
-        PanResponder.create({
-          onStartShouldSetPanResponder: () => true,
-          onMoveShouldSetPanResponder: (_, gestureState) => {
-            // Only capture downward dragging motions
-            return gestureState.dy > 0;
-          },
-          onPanResponderMove: (_, gestureState) => {
-            // Update dragY based on the gesture
-            if (gestureState.dy > 0) {
-              dragY.setValue(gestureState.dy);
-            }
-          },
-          onPanResponderRelease: (_, gestureState) => {
-            if (gestureState.dy > 50) {
-              closeDrawer();
-            } else {
-              // Only snap back if not closing
-              Animated.timing(dragY, {
-                toValue: 0,
-                duration: 300,
-                easing: Easing.out(Easing.quad),
-                useNativeDriver: true,
-              }).start();
-            }
-          },
+  forwardRef<MobileMenuDrawerRef, MobileMenuDrawerProps>(
+    ({ children, onVisibilityChange }, ref) => {
+      const [isVisible, setIsVisible] = useState(false);
+      const { scrollCallback } = useSelectedNode();
+      const theme = useTheme();
+      const { height } = useWindowDimensions();
+      const animatedHeight = useAnimatedModalHeight();
+
+      // Slide animation for drawer entrance/exit
+      const slideAnim = useAnimatedValue(height);
+
+      // Create a reference for the drag handle animation
+      const dragY = useAnimatedValue(0);
+
+      const openDrawer = useCallback(() => {
+        dragY.setValue(0);
+        slideAnim.setValue(height);
+        setIsVisible(true);
+        onVisibilityChange?.(true);
+
+        Animated.timing(slideAnim, {
+          toValue: 0,
+          duration: 300,
+          easing: Easing.out(Easing.quad),
+          useNativeDriver: true,
+        }).start(({ finished }) => {
+          if (finished) {
+            // go to the selected story and don't animate
+            scrollCallback({ animated: false, id: undefined });
+          }
+        });
+      }, [dragY, height, onVisibilityChange, scrollCallback, slideAnim]);
+
+      const closeDrawer = useCallback(() => {
+        Keyboard.dismiss();
+        onVisibilityChange?.(false);
+
+        Animated.timing(slideAnim, {
+          toValue: height,
+          duration: 300,
+          easing: Easing.in(Easing.quad),
+          useNativeDriver: true,
+        }).start(({ finished }) => {
+          if (finished) {
+            setIsVisible(false);
+          }
+        });
+      }, [height, onVisibilityChange, slideAnim]);
+
+      // Create the pan responder for handling drag gestures
+      const panResponder = useMemo(
+        () =>
+          PanResponder.create({
+            onStartShouldSetPanResponder: () => true,
+            onMoveShouldSetPanResponder: (_, gestureState) => {
+              // Only capture downward dragging motions
+              return gestureState.dy > 0;
+            },
+            onPanResponderMove: (_, gestureState) => {
+              // Update dragY based on the gesture
+              if (gestureState.dy > 0) {
+                dragY.setValue(gestureState.dy);
+              }
+            },
+            onPanResponderRelease: (_, gestureState) => {
+              if (gestureState.dy > 50) {
+                closeDrawer();
+              } else {
+                // Only snap back if not closing
+                Animated.timing(dragY, {
+                  toValue: 0,
+                  duration: 300,
+                  easing: Easing.out(Easing.quad),
+                  useNativeDriver: true,
+                }).start();
+              }
+            },
+          }),
+        [closeDrawer, dragY]
+      );
+
+      useImperativeHandle(ref, () => ({
+        setMobileMenuOpen: (open: boolean) => {
+          if (open) {
+            openDrawer();
+          } else {
+            closeDrawer();
+          }
+        },
+      }));
+
+      // Create the styles for the drag handle
+      const handleStyle = useMemo(
+        () => ({
+          width: 40,
+          height: 5,
+          backgroundColor: theme.color.mediumdark,
+          borderRadius: 2.5,
+          alignSelf: 'center' as const,
+        }),
+        [theme.color.mediumdark]
+      );
+
+      const drawerContainerStyle = useMemo(
+        () =>
+          ({
+            flex: 1,
+            borderTopColor: theme.appBorderColor,
+            borderTopWidth: 1,
+            borderStyle: 'solid' as const,
+            backgroundColor: theme.background.content,
+            elevation: 8,
+            boxShadow: `0 16px 32px 0 ${theme.color.border}`,
+          }) satisfies ViewStyle,
+        [theme.appBorderColor, theme.background.content, theme.color.border]
+      );
+
+      const dragHandleWrapperStyle = useMemo(
+        () => ({
+          alignItems: 'center' as const,
+          justifyContent: 'center' as const,
+          paddingBottom: 16,
+          paddingTop: 10,
+          backgroundColor: theme.background.content,
         }),
-      [closeDrawer, dragY]
-    );
-
-    useImperativeHandle(ref, () => ({
-      setMobileMenuOpen: (open: boolean) => {
-        if (open) {
-          openDrawer();
-        } else {
-          closeDrawer();
-        }
-      },
-    }));
-
-    // Create the styles for the drag handle
-    const handleStyle = useMemo(
-      () => ({
-        width: 40,
-        height: 5,
-        backgroundColor: theme.color.mediumdark,
-        borderRadius: 2.5,
-        alignSelf: 'center' as const,
-      }),
-      [theme.color.mediumdark]
-    );
-
-    const drawerContainerStyle = useMemo(
-      () =>
-        ({
+        [theme.background.content]
+      );
+
+      const childrenWrapperStyle = useMemo(
+        () => ({
           flex: 1,
-          borderTopColor: theme.appBorderColor,
-          borderTopWidth: 1,
-          borderStyle: 'solid' as const,
           backgroundColor: theme.background.content,
-          elevation: 8,
-          boxShadow: `0 16px 32px 0 ${theme.color.border}`,
-        }) satisfies ViewStyle,
-      [theme.appBorderColor, theme.background.content, theme.color.border]
-    );
-
-    const dragHandleWrapperStyle = useMemo(
-      () => ({
-        alignItems: 'center' as const,
-        justifyContent: 'center' as const,
-        paddingBottom: 16,
-        paddingTop: 10,
-        backgroundColor: theme.background.content,
-      }),
-      [theme.background.content]
-    );
-
-    const childrenWrapperStyle = useMemo(
-      () => ({
-        flex: 1,
-        backgroundColor: theme.background.content,
-      }),
-      [theme.background.content]
-    );
-
-    return (
-      <Portal hostName="storybook-lite-ui-root">
-        <Animated.View
-          style={[portalContainerStyle, { transform: [{ translateY: slideAnim }] }]}
-          pointerEvents={isVisible ? 'auto' : 'none'}
-        >
-          <View style={flexStyle}>
-            <Pressable style={flexStyle} onPress={closeDrawer} />
-          </View>
+        }),
+        [theme.background.content]
+      );
 
+      return (
+        <Portal hostName="storybook-lite-ui-root">
           <Animated.View
-            style={{
-              height: animatedHeight,
-            }}
+            style={[portalContainerStyle, { transform: [{ translateY: slideAnim }] }]}
+            pointerEvents={isVisible ? 'auto' : 'none'}
+            accessibilityElementsHidden={!isVisible}
+            importantForAccessibility={isVisible ? 'auto' : 'no-hide-descendants'}
+            accessibilityViewIsModal={isVisible}
           >
-            <Animated.View style={[drawerContainerStyle, { transform: [{ translateY: dragY }] }]}>
-              {/* Drag handle */}
-              <View {...panResponder.panHandlers} style={dragHandleWrapperStyle}>
-                <View style={handleStyle} />
-              </View>
+            <View style={flexStyle}>
+              <Pressable
+                style={flexStyle}
+                onPress={closeDrawer}
+                accessibilityRole="button"
+                accessibilityLabel="Close story list"
+              />
+            </View>
+
+            <Animated.View
+              style={{
+                height: animatedHeight,
+              }}
+            >
+              <Animated.View style={[drawerContainerStyle, { transform: [{ translateY: dragY }] }]}>
+                {/* Drag handle */}
+                <View {...panResponder.panHandlers} style={dragHandleWrapperStyle}>
+                  <View style={handleStyle} />
+                </View>
 
-              <View style={childrenWrapperStyle}>{children}</View>
+                <View style={childrenWrapperStyle}>{children}</View>
+              </Animated.View>
             </Animated.View>
           </Animated.View>
-        </Animated.View>
-      </Portal>
-    );
-  })
+        </Portal>
+      );
+    }
+  )
 );

package/src/Search.tsx

@@ -248,6 +248,8 @@ export const Search = React.memo<{
 
           {isOpen && (
             <ClearIcon
+              accessibilityRole="button"
+              accessibilityLabel="Clear search"
               onPress={() => {
                 setInputValue('');
                 inputRef.current.clear();

package/src/SearchResults.tsx

@@ -168,7 +168,12 @@ const Result: FC<SearchResultProps> = React.memo(function Result({
   const pathString = item.path?.join(' ') ?? '';
 
   return (
-    <ResultRow {...props} onPress={press}>
+    <ResultRow
+      {...props}
+      onPress={press}
+      accessibilityRole="button"
+      accessibilityLabel={`${item.name}, ${item.path?.join(' / ') ?? ''}`}
+    >
       <IconWrapper>
         {item.type === 'component' && (
           <ComponentIcon width={14} height={14} color={theme.color.secondary} />
@@ -277,7 +282,10 @@ export const SearchResults: FC<{
           return (
             <RecentlyOpenedTitle>
               <Text>Recently opened</Text>
-              <IconButton onPress={listItem.clearLastViewed} />
+              <IconButton
+                onPress={listItem.clearLastViewed}
+                accessibilityLabel="Clear recently opened"
+              />
             </RecentlyOpenedTitle>
           );
         case 'noResults':

package/src/Sidebar.tsx

@@ -45,8 +45,20 @@ const Swap = React.memo(function Swap({
   // // NOTE: its important not to completely hide items so that we don't lose the state of our list items
   return (
     <>
-      <View style={aStyle}>{a}</View>
-      <View style={bStyle}>{b}</View>
+      <View
+        style={aStyle}
+        accessibilityElementsHidden={!condition}
+        importantForAccessibility={condition ? 'auto' : 'no-hide-descendants'}
+      >
+        {a}
+      </View>
+      <View
+        style={bStyle}
+        accessibilityElementsHidden={condition}
+        importantForAccessibility={condition ? 'no-hide-descendants' : 'auto'}
+      >
+        {b}
+      </View>
     </>
   );
 });

package/src/StorybookLogo.tsx

@@ -54,6 +54,8 @@ const BrandLogo: FC<{ theme: Theme }> = ({ theme }) => {
         onPress={() => {
           if (theme.brand.url) Linking.openURL(theme.brand.url);
         }}
+        accessibilityRole="link"
+        accessibilityLabel={theme.brand.title ?? 'Brand logo'}
       >
         {image}
       </TouchableOpacity>
@@ -85,6 +87,8 @@ const BrandTitle: FC<{ theme: Theme }> = ({ theme }) => {
         onPress={() => {
           if (theme.brand.url) Linking.openURL(theme.brand.url);
         }}
+        accessibilityRole="link"
+        accessibilityLabel={theme.brand.title}
       >
         {title}
       </TouchableOpacity>

package/src/Tree.tsx

@@ -62,7 +62,7 @@ export const Node = React.memo<NodeProps>(function Node({
 
   if (item.type === 'story') {
     return (
-      <LeafNodeStyleWrapper>
+      <LeafNodeStyleWrapper accessible={false}>
         <StoryNode
           selected={isSelected}
           key={id}
@@ -88,6 +88,7 @@ export const Node = React.memo<NodeProps>(function Node({
             event.preventDefault();
             setExpanded({ ids: [item.id], value: !isExpanded });
           }}
+          accessibilityRole="button"
           aria-expanded={isExpanded}
         >
           <CollapseIcon isExpanded={isExpanded} />

package/src/TreeNode.tsx

@@ -96,7 +96,7 @@ export const GroupNode: FC<
   }, [theme.base, theme.color.primary, theme.color.ultraviolet]);
 
   return (
-    <BranchNode isExpandable={isExpandable} {...props}>
+    <BranchNode isExpandable={isExpandable} accessibilityRole="button" {...props}>
       <Wrapper key={`group-${props.id}-${color}`}>
         {isExpandable && <CollapseIcon isExpanded={isExpanded} />}
         <GroupIcon width={14} height={14} color={color} />
@@ -115,7 +115,7 @@ export const ComponentNode: FC<ComponentProps<typeof BranchNode>> = React.memo(
     }, [theme.color.secondary]);
 
     return (
-      <BranchNode isExpandable={isExpandable} {...props}>
+      <BranchNode isExpandable={isExpandable} accessibilityRole="button" {...props}>
         {/* workaround for macos icon color bug */}
         <Wrapper key={`component-${props.id}-${color}`}>
           {isExpandable && <CollapseIcon isExpanded={isExpanded} />}
@@ -139,7 +139,7 @@ export const StoryNode = React.memo(
     }, [props.selected, theme.color.lightest, theme.color.seafoam]);
 
     return (
-      <LeafNode {...props} ref={ref}>
+      <LeafNode {...props} ref={ref} accessibilityRole="button">
         <Wrapper key={`story-${props.id}-${color}`}>
           <StoryIcon width={14} height={14} color={color} />
         </Wrapper>