@sigmela/router 0.2.8 → 0.3.1

package/lib/module/ScreenStack/ScreenStack.web.js

@@ -6,7 +6,7 @@ import { ScreenStackItemsContext, ScreenStackAnimatingContext, useScreenStackCon
 import { getPresentationTypeClass, computeAnimationType } from "./animationHelpers.js";
 import { RouterContext } from "../RouterContext.js";
 import { isModalLikePresentation } from "../types.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const isScreenStackItemElement = child => {
   if (! /*#__PURE__*/isValidElement(child)) return false;
   const anyProps = child.props;
@@ -58,8 +58,9 @@ export const ScreenStack = /*#__PURE__*/memo(props => {
   const router = useContext(RouterContext);
   const debugEnabled = router?.isDebugEnabled() ?? false;
   const devLog = useCallback((msg, data) => {
-    if (!debugEnabled) return;
-    console.log(msg, data !== undefined ? JSON.stringify(data) : '');
+    if (typeof __DEV__ !== 'undefined' && __DEV__ && debugEnabled) {
+      console.log(msg, data !== undefined ? JSON.stringify(data) : '');
+    }
   }, [debugEnabled]);
   devLog('[ScreenStack] Render', {
     transitionTime,
@@ -121,13 +122,15 @@ export const ScreenStack = /*#__PURE__*/memo(props => {
       const key = item?.key || getItemKey(child);
       map.set(key, child);
     }
-    childMapRef.current = map;
     devLog('[ScreenStack] childMap updated', {
       size: map.size,
       keys: Array.from(map.keys())
     });
     return map;
   }, [devLog, stackChildren]);
+  useEffect(() => {
+    childMapRef.current = childMap;
+  }, [childMap]);
   const {
     stateMap,
     toggle,
@@ -160,7 +163,7 @@ export const ScreenStack = /*#__PURE__*/memo(props => {
     isEnter: state.isEnter,
     isResolved: state.isResolved
   })));
-  const stateMapEntries = Array.from(stateMap.entries());
+  const stateMapEntries = useMemo(() => Array.from(stateMap.entries()), [stateMap]);
   const prevKeysForDirection = prevKeysRef.current;
   const direction = useMemo(() => {
     const computed = computeDirection(prevKeysForDirection, routeKeys);
@@ -190,9 +193,7 @@ export const ScreenStack = /*#__PURE__*/memo(props => {
     });
     return result;
   }, [devLog, routeKeys, stateMapEntries]);
-  const containerClassName = useMemo(() => {
-    return 'screen-stack';
-  }, []);
+  const containerClassName = 'screen-stack';
 
   // CRITICAL: Calculate bulk removal BEFORE useMemo for itemsContextValue
   // so the flag is available when computing animation types
@@ -331,6 +332,7 @@ export const ScreenStack = /*#__PURE__*/memo(props => {
     }
   }, [routeKeys, animateFirstScreenAfterEmpty]);
   useEffect(() => {
+    if (!debugEnabled) return;
     if (!containerRef.current) return;
     const items = containerRef.current.querySelectorAll('.screen-stack-item');
     if (items.length === 0) return;
@@ -340,7 +342,7 @@ export const ScreenStack = /*#__PURE__*/memo(props => {
       containerDataDirection: containerRef.current.dataset.direction,
       itemCount: items.length
     });
-  });
+  }, [debugEnabled, devLog]);
   const topKey = routeKeys[routeKeys.length - 1] ?? null;
   const routeKeySet = useMemo(() => new Set(routeKeys), [routeKeys]);
   const hasExitingItems = useMemo(() => {
@@ -353,6 +355,47 @@ export const ScreenStack = /*#__PURE__*/memo(props => {
       return isModalLikePresentation(item?.options?.stackPresentation);
     });
   }, [childMap, routeKeySet, stateMapEntries]);
+
+  // D4: Compute active modal/sheet state for data attributes
+  const hasActiveModal = useMemo(() => {
+    for (const key of routeKeys) {
+      const child = childMap.get(key);
+      if (!child) continue;
+      const presentation = child.props.item?.options?.stackPresentation;
+      if (presentation && presentation !== 'push' && presentation !== 'formSheet' && presentation !== 'pageSheet' && presentation !== 'sheet' && isModalLikePresentation(presentation)) {
+        return true;
+      }
+    }
+    return false;
+  }, [routeKeys, childMap]);
+  const hasActiveSheet = useMemo(() => {
+    for (const key of routeKeys) {
+      const child = childMap.get(key);
+      if (!child) continue;
+      const presentation = child.props.item?.options?.stackPresentation;
+      if (presentation === 'formSheet' || presentation === 'pageSheet' || presentation === 'sheet') {
+        return true;
+      }
+    }
+    return false;
+  }, [routeKeys, childMap]);
+
+  // D5: Scroll lock during active modal (ref-counted for nested stacks)
+  useEffect(() => {
+    if (!hasActiveModal) return;
+    const g = globalThis;
+    g.__scrollLockCount = (g.__scrollLockCount ?? 0) + 1;
+    if (g.__scrollLockCount === 1) {
+      g.__scrollLockPrev = document.body.style.overflow;
+      document.body.style.overflow = 'hidden';
+    }
+    return () => {
+      g.__scrollLockCount = Math.max(0, (g.__scrollLockCount ?? 1) - 1);
+      if (g.__scrollLockCount === 0) {
+        document.body.style.overflow = g.__scrollLockPrev ?? '';
+      }
+    };
+  }, [hasActiveModal]);
   const animationDirection = hasExitingItems ? lastDirectionRef.current : direction;
   const stackDismissedByRouter = router?.isStackBeingDismissed?.(currentStackId ?? undefined) ?? false;
   if (stackDismissedByRouter) {
@@ -459,17 +502,40 @@ export const ScreenStack = /*#__PURE__*/memo(props => {
   const animating = useMemo(() => {
     return stateMapEntries.some(([, state]) => state.isMounted && (state.status === 'entering' || state.status === 'exiting' || state.status === 'preEnter' || state.status === 'preExit'));
   }, [stateMapEntries]);
+
+  // D6: Compute current screen label for accessibility
+  const currentScreenLabel = useMemo(() => {
+    if (!topKey) return '';
+    const child = childMap.get(topKey);
+    if (!child) return '';
+    const item = child.props.item;
+    return item?.routeId || topKey;
+  }, [topKey, childMap]);
   return /*#__PURE__*/_jsx(ScreenStackItemsContext.Provider, {
     value: itemsContextValue,
     children: /*#__PURE__*/_jsx(ScreenStackAnimatingContext.Provider, {
       value: animating,
-      children: /*#__PURE__*/_jsx("div", {
+      children: /*#__PURE__*/_jsxs("div", {
         ref: containerRef,
         className: containerClassName + (animating ? ' animating' : ''),
+        "data-has-active-modal": hasActiveModal ? 'true' : undefined,
+        "data-has-active-sheet": hasActiveSheet ? 'true' : undefined,
+        "data-animation": animating ? 'true' : undefined,
         style: {
           '--stack-transition-time': `${transitionTime}ms`
         },
-        children: keysToRender.map(key => {
+        children: [/*#__PURE__*/_jsx("div", {
+          "aria-live": "polite",
+          role: "status",
+          style: {
+            position: 'absolute',
+            width: 1,
+            height: 1,
+            overflow: 'hidden',
+            clip: 'rect(0,0,0,0)'
+          },
+          children: currentScreenLabel
+        }), keysToRender.map(key => {
           const transitionState = stateMap.get(key);
           if (!transitionState || !transitionState.isMounted) {
             devLog(`[ScreenStack] Skipping ${key} - no state or not mounted`, {
@@ -488,7 +554,7 @@ export const ScreenStack = /*#__PURE__*/memo(props => {
           return /*#__PURE__*/_jsx(Fragment, {
             children: child
           }, child.key || key);
-        })
+        })]
       })
     })
   });

package/lib/module/ScreenStackItem/ScreenStackItem.js

@@ -4,7 +4,7 @@ import { ScreenStackItem as RNSScreenStackItem } from 'react-native-screens';
 import { RouteLocalContext, useRouter } from "../RouterContext.js";
 import { ScreenStackSheetItem } from "../ScreenStackSheetItem/index.js";
 import { StyleSheet } from 'react-native';
-import { memo } from 'react';
+import { memo, useMemo, useCallback } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const ScreenStackItem = /*#__PURE__*/memo(({
   item,
@@ -20,15 +20,15 @@ export const ScreenStackItem = /*#__PURE__*/memo(({
 
   // On native, modalRight behaves as regular modal
   const nativePresentation = stackPresentation === 'modalRight' ? 'modal' : stackPresentation;
-  const route = {
+  const route = useMemo(() => ({
     presentation: stackPresentation ?? 'push',
     params: item.params,
     query: item.query,
     pattern: item.pattern,
     path: item.path
-  };
+  }), [stackPresentation, item.params, item.query, item.pattern, item.path]);
   const router = useRouter();
-  const onDismissed = () => {
+  const onDismissed = useCallback(() => {
     if (stackId) {
       const history = router.getStackHistory(stackId);
       const topKey = history.length ? history[history.length - 1]?.key : null;
@@ -36,12 +36,12 @@ export const ScreenStackItem = /*#__PURE__*/memo(({
         router.goBack();
       }
     }
-  };
-  const headerConfig = {
+  }, [stackId, router, item.key]);
+  const headerConfig = useMemo(() => ({
     ...header,
     hidden: !header?.title || header?.hidden,
     backgroundColor: appearance?.header?.backgroundColor ?? 'transparent'
-  };
+  }), [header, appearance?.header?.backgroundColor]);
   if (route.presentation === 'sheet') {
     return /*#__PURE__*/_jsx(ScreenStackSheetItem, {
       appearance: appearance?.sheet,

package/lib/module/ScreenStackItem/ScreenStackItem.web.js

@@ -2,7 +2,7 @@
 
 import { RouteLocalContext, useRouter } from "../RouterContext.js";
 import { isModalLikePresentation } from "../types.js";
-import { memo, useMemo, useCallback } from 'react';
+import { memo, useMemo, useCallback, useEffect, useRef } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { useScreenStackItemsContext } from "../ScreenStack/ScreenStackContext.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -13,6 +13,7 @@ export const ScreenStackItem = /*#__PURE__*/memo(({
 }) => {
   const itemsContext = useScreenStackItemsContext();
   const router = useRouter();
+  const containerRef = useRef(null);
   const debugEnabled = router.isDebugEnabled();
   const devLog = useCallback((msg, data) => {
     if (!debugEnabled) return;
@@ -65,36 +66,94 @@ export const ScreenStackItem = /*#__PURE__*/memo(({
       maxWidth: `${item.options.maxWidth}px`
     };
   }, [isModalLike, item.options?.maxWidth]);
-  const value = {
+  const routeValue = useMemo(() => ({
     presentation,
     params: item.params,
     query: item.query,
     pattern: item.pattern,
     path: item.path
-  };
+  }), [presentation, item.params, item.query, item.pattern, item.path]);
+  const handleDismiss = useCallback(() => router.dismiss(), [router]);
+  const handleDismissKeyDown = useCallback(e => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault?.();
+      router.dismiss();
+    }
+  }, [router]);
+
+  // Escape key handler for modals — only dismiss if this is the topmost modal
+  useEffect(() => {
+    if (!isModalLike) return;
+    const handler = e => {
+      if (e.key !== 'Escape') return;
+      const allModals = document.querySelectorAll('[aria-modal="true"]');
+      if (allModals.length > 0) {
+        const last = allModals[allModals.length - 1] ?? null;
+        if (!containerRef.current?.contains(last)) return;
+      }
+      router.dismiss();
+    };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, [isModalLike, router]);
+
+  // Focus trap for modals — re-queries focusable elements on each Tab
+  useEffect(() => {
+    if (!isModalLike || !containerRef.current) return;
+    const container = containerRef.current;
+    const FOCUSABLE = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+    const focusable = container.querySelectorAll(FOCUSABLE);
+    focusable[0]?.focus();
+    const trap = e => {
+      if (e.key !== 'Tab') return;
+      const els = container.querySelectorAll(FOCUSABLE);
+      if (!els.length) return;
+      const first = els[0];
+      const last = els[els.length - 1];
+      if (e.shiftKey && document.activeElement === first) {
+        e.preventDefault();
+        last?.focus();
+      } else if (!e.shiftKey && document.activeElement === last) {
+        e.preventDefault();
+        first?.focus();
+      }
+    };
+    container.addEventListener('keydown', trap);
+    return () => container.removeEventListener('keydown', trap);
+  }, [isModalLike]);
   if (!itemState) {
     return null;
   }
   return /*#__PURE__*/_jsxs("div", {
+    ref: containerRef,
     style: mergedStyle,
     className: className,
     children: [isModalLike && /*#__PURE__*/_jsx("div", {
       className: "stack-modal-overlay",
-      onClick: () => router.dismiss()
+      onClick: handleDismiss,
+      onKeyDown: handleDismissKeyDown,
+      role: "button",
+      "aria-label": "Close modal",
+      tabIndex: 0
     }), /*#__PURE__*/_jsx("div", {
       className: isModalLike ? 'stack-modal-container' : 'stack-screen-container',
       style: modalContainerStyle,
+      ...(isModalLike ? {
+        'role': 'dialog',
+        'aria-modal': true,
+        'aria-label': item.pattern || 'Dialog'
+      } : undefined),
       children: appearance?.screen ? /*#__PURE__*/_jsx(View, {
         style: [appearance?.screen, styles.flex],
         children: /*#__PURE__*/_jsx(RouteLocalContext.Provider, {
-          value: value,
+          value: routeValue,
           children: /*#__PURE__*/_jsx(item.component, {
             ...(item.passProps || {}),
             appearance: appearance
           })
         })
       }) : /*#__PURE__*/_jsx(RouteLocalContext.Provider, {
-        value: value,
+        value: routeValue,
         children: /*#__PURE__*/_jsx(item.component, {
           ...(item.passProps || {}),
           appearance: appearance

package/lib/module/ScreenStackSheetItem/ScreenStackSheetItem.native.js

@@ -3,7 +3,7 @@
 import { ScreenStackItem as RNSScreenStackItem } from 'react-native-screens';
 import { NativeSheetView, Commands } from '@sigmela/native-sheet';
 import { RouteLocalContext, useRouter } from "../RouterContext.js";
-import { memo, useRef, useEffect } from 'react';
+import { memo, useRef, useEffect, useCallback } from 'react';
 import { StyleSheet } from 'react-native';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const ScreenStackSheetItem = /*#__PURE__*/memo(props => {
@@ -31,12 +31,11 @@ export const ScreenStackSheetItem = /*#__PURE__*/memo(props => {
       return () => router.unregisterSheetDismisser(item.key);
     }
     return undefined;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  const handleSheetDismissed = () => {
+  }, [route.presentation, router, item.key]);
+  const handleSheetDismissed = useCallback(() => {
     router.unregisterSheetDismisser(item.key);
     onDismissed();
-  };
+  }, [router, item.key, onDismissed]);
   return /*#__PURE__*/_jsx(RNSScreenStackItem, {
     stackPresentation: "transparentModal",
     headerConfig: headerConfig,

package/lib/module/SplitView/RenderSplitView.web.js

@@ -77,6 +77,9 @@ export const RenderSplitView = /*#__PURE__*/memo(({
       '--split-view-primary-max-width': `${splitView.primaryMaxWidth}px`
     };
   }, [splitView.primaryMaxWidth]);
+  const secondaryConfig = useMemo(() => ({
+    animateFirstScreenAfterEmpty: !isWide
+  }), [isWide]);
   return /*#__PURE__*/_jsx(SplitViewContext.Provider, {
     value: splitView,
     children: /*#__PURE__*/_jsxs("div", {
@@ -91,17 +94,12 @@ export const RenderSplitView = /*#__PURE__*/memo(({
         })
       }), /*#__PURE__*/_jsx("div", {
         className: "split-view-secondary",
-        children: isWide ? /*#__PURE__*/_jsx(ScreenStackConfigContext.Provider, {
-          value: {
-            animateFirstScreenAfterEmpty: false
-          },
+        children: /*#__PURE__*/_jsx(ScreenStackConfigContext.Provider, {
+          value: secondaryConfig,
           children: /*#__PURE__*/_jsx(StackSliceRenderer, {
             appearance: appearance,
             stack: splitView.secondary
           })
-        }) : /*#__PURE__*/_jsx(StackSliceRenderer, {
-          appearance: appearance,
-          stack: splitView.secondary
         })
       })]
     })

package/lib/module/SplitView/SplitView.js

@@ -35,12 +35,14 @@ class SecondaryStackWrapper {
   }
 }
 export class SplitView {
+  _cachedRenderer = null;
   constructor(options) {
     this.splitViewId = `splitview-${Math.random().toString(36).slice(2)}`;
     this.primary = options.primary;
     this.secondary = options.secondary;
     this.minWidth = options.minWidth;
     this.primaryMaxWidth = options.primaryMaxWidth ?? 390;
+    this.secondaryWrapper = new SecondaryStackWrapper(this.secondary);
   }
   getId() {
     return this.splitViewId;
@@ -54,18 +56,24 @@ export class SplitView {
       node: this.primary
     }, {
       prefix: '',
-      node: new SecondaryStackWrapper(this.secondary)
+      node: this.secondaryWrapper
     }];
   }
   getRenderer() {
+    if (this._cachedRenderer) {
+      return this._cachedRenderer;
+    }
+
     // eslint-disable-next-line consistent-this
     const instance = this;
-    return function SplitViewScreen(props) {
+    const renderer = function SplitViewScreen(props) {
       return /*#__PURE__*/React.createElement(RenderSplitView, {
         splitView: instance,
         appearance: props?.appearance
       });
     };
+    this._cachedRenderer = renderer;
+    return renderer;
   }
   hasRoute(routeId) {
     return this.primary.getRoutes().some(r => r.routeId === routeId) || this.secondary.getRoutes().some(r => r.routeId === routeId);

package/lib/module/StackRenderer.js

@@ -12,10 +12,16 @@ export const StackRenderer = /*#__PURE__*/memo(({
   history
 }) => {
   const router = useRouter();
-  const subscribe = useCallback(cb => router.subscribeStack(stackId, cb), [router, stackId]);
-  const get = useCallback(() => router.getStackHistory(stackId), [router, stackId]);
-  const historyFromStore = useSyncExternalStore(subscribe, get, get);
-  const historyForThisStack = history ?? historyFromStore;
+  const hasHistoryProp = history != null;
+  const subscribe = useCallback(cb => {
+    if (hasHistoryProp) return () => {};
+    return router.subscribeStack(stackId, cb);
+  }, [router, stackId, hasHistoryProp]);
+  const get = useCallback(() => {
+    if (hasHistoryProp) return history;
+    return router.getStackHistory(stackId);
+  }, [router, stackId, hasHistoryProp, history]);
+  const historyForThisStack = useSyncExternalStore(subscribe, get, get);
   return /*#__PURE__*/_jsx(ScreenStack, {
     style: [styles.flex, appearance?.screen],
     children: historyForThisStack.map(item => /*#__PURE__*/_jsx(ScreenStackItem, {

package/lib/module/TabBar/RenderTabBar.native.js

@@ -3,7 +3,7 @@
 import { StackRenderer } from "../StackRenderer.js";
 import { TabBarContext } from "./TabBarContext.js";
 import { useRouter } from "../RouterContext.js";
-import { BottomTabsScreen, BottomTabs, ScreenStackItem } from 'react-native-screens';
+import { Tabs, ScreenStackItem } from 'react-native-screens';
 import { Platform, StyleSheet, View } from 'react-native';
 import { useCallback, useSyncExternalStore, memo, useEffect, useState, useMemo } from 'react';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -178,7 +178,13 @@ export const RenderTabBar = /*#__PURE__*/memo(({
     title,
     backgroundColor,
     badgeBackgroundColor,
-    iOSShadowColor
+    iOSShadowColor,
+    hidden,
+    tintColor,
+    controllerMode,
+    minimizeBehavior,
+    nativeContainerBackgroundColor,
+    iOSBlurEffect
   } = appearance?.tabBar ?? {};
   const onNativeFocusChange = useCallback(event => {
     const tabKey = event.nativeEvent.tabKey;
@@ -259,10 +265,11 @@ export const RenderTabBar = /*#__PURE__*/memo(({
       }
     }
   }, [tabs, tabBar, index, router]);
-  const containerProps = {
+  const containerProps = useMemo(() => ({
     tabBarBackgroundColor: backgroundColor,
     tabBarItemTitleFontFamily: title?.fontFamily,
     tabBarItemTitleFontSize: title?.fontSize,
+    tabBarItemTitleFontSizeActive: title?.activeFontSize,
     tabBarItemTitleFontWeight: title?.fontWeight,
     tabBarItemTitleFontStyle: title?.fontStyle,
     tabBarItemTitleFontColor: title?.color,
@@ -272,36 +279,55 @@ export const RenderTabBar = /*#__PURE__*/memo(({
     tabBarItemActiveIndicatorColor: androidActiveIndicatorColor,
     tabBarItemActiveIndicatorEnabled: androidActiveIndicatorEnabled,
     tabBarItemRippleColor: androidRippleColor,
-    tabBarItemLabelVisibilityMode: labelVisibilityMode
-  };
-  const iosState = {
+    tabBarItemLabelVisibilityMode: labelVisibilityMode,
+    tabBarHidden: hidden,
+    tabBarTintColor: tintColor,
+    tabBarControllerMode: controllerMode,
+    tabBarMinimizeBehavior: minimizeBehavior,
+    nativeContainerStyle: nativeContainerBackgroundColor ? {
+      backgroundColor: nativeContainerBackgroundColor
+    } : undefined
+  }), [backgroundColor, title?.fontFamily, title?.fontSize, title?.activeFontSize, title?.fontWeight, title?.fontStyle, title?.color, title?.activeColor, iconColor, iconColorActive, androidActiveIndicatorColor, androidActiveIndicatorEnabled, androidRippleColor, labelVisibilityMode, hidden, tintColor, controllerMode, minimizeBehavior, nativeContainerBackgroundColor]);
+  const iosNormalState = useMemo(() => ({
     tabBarItemTitleFontFamily: title?.fontFamily,
     tabBarItemTitleFontSize: title?.fontSize,
     tabBarItemTitleFontWeight: title?.fontWeight,
     tabBarItemTitleFontStyle: title?.fontStyle,
     tabBarItemTitleFontColor: title?.color,
     tabBarItemBadgeBackgroundColor: badgeBackgroundColor,
-    tabBarItemTitleFontColorActive: title?.color,
-    tabBarItemIconColorActive: iconColorActive,
     tabBarItemIconColor: iconColor
-  };
-  const iosAppearance = Platform.select({
+  }), [title?.fontFamily, title?.fontSize, title?.fontWeight, title?.fontStyle, title?.color, badgeBackgroundColor, iconColor]);
+  const iosSelectedState = useMemo(() => ({
+    tabBarItemTitleFontFamily: title?.fontFamily,
+    tabBarItemTitleFontSize: title?.fontSize,
+    tabBarItemTitleFontWeight: title?.fontWeight,
+    tabBarItemTitleFontStyle: title?.fontStyle,
+    tabBarItemTitleFontColor: title?.activeColor ?? title?.color,
+    tabBarItemBadgeBackgroundColor: badgeBackgroundColor,
+    tabBarItemIconColor: iconColorActive ?? iconColor
+  }), [title?.fontFamily, title?.fontSize, title?.fontWeight, title?.fontStyle, title?.color, title?.activeColor, badgeBackgroundColor, iconColorActive, iconColor]);
+  const iosAppearance = useMemo(() => Platform.select({
     default: undefined,
     ios: {
       tabBarBackgroundColor: backgroundColor,
       tabBarShadowColor: iOSShadowColor,
+      tabBarBlurEffect: iOSBlurEffect,
       compactInline: {
-        normal: iosState
+        normal: iosNormalState,
+        selected: iosSelectedState
       },
       stacked: {
-        normal: iosState
+        normal: iosNormalState,
+        selected: iosSelectedState
       },
       inline: {
-        normal: iosState
+        normal: iosNormalState,
+        selected: iosSelectedState
       }
     }
-  });
+  }), [backgroundColor, iOSShadowColor, iOSBlurEffect, iosNormalState, iosSelectedState]);
   const CustomTabBar = config.component;
+  const tabIcons = useMemo(() => tabs.map(tab => getTabIcon(tab)), [tabs]);
   const [visited, setVisited] = useState({});
   useEffect(() => {
     const key = tabs[index]?.tabKey;
@@ -357,25 +383,30 @@ export const RenderTabBar = /*#__PURE__*/memo(({
     stackAnimation: "slide_from_right",
     children: /*#__PURE__*/_jsx(TabBarContext.Provider, {
       value: tabBar,
-      children: /*#__PURE__*/_jsx(BottomTabs, {
+      children: /*#__PURE__*/_jsx(Tabs.Host, {
         onNativeFocusChange: onNativeFocusChange,
+        bottomAccessory: config.bottomAccessory,
+        experimentalControlNavigationStateInJS: config.experimentalControlNavigationStateInJS,
         ...containerProps,
-        children: tabs.map(tab => {
+        children: tabs.map((tab, i) => {
           const isFocused = tab.tabKey === tabs[index]?.tabKey;
           const stack = tabBar.stacks[tab.tabKey];
           const node = tabBar.nodes[tab.tabKey];
           const Screen = tabBar.screens[tab.tabKey];
-          const icon = getTabIcon(tab);
-          return /*#__PURE__*/_jsx(BottomTabsScreen, {
+          const convertedIcon = tabIcons[i];
+          const {
+            icon: _icon,
+            selectedIcon: _selectedIcon,
+            tabPrefix: _prefix,
+            ...tabScreenProps
+          } = tab;
+          return /*#__PURE__*/_jsx(Tabs.Screen, {
+            ...tabScreenProps,
             scrollEdgeAppearance: iosAppearance,
             standardAppearance: iosAppearance,
             isFocused: isFocused,
-            tabKey: tab.tabKey,
-            title: tab.title,
-            badgeValue: tab.badgeValue,
-            specialEffects: tab.specialEffects,
-            icon: icon?.icon,
-            selectedIcon: icon?.selectedIcon,
+            icon: convertedIcon?.icon,
+            selectedIcon: convertedIcon?.selectedIcon,
             children: stack ? /*#__PURE__*/_jsx(TabStackRenderer, {
               appearance: appearance,
               stack: stack

package/lib/module/TabBar/RenderTabBar.web.js

@@ -106,6 +106,15 @@ export const RenderTabBar = /*#__PURE__*/memo(({
       tabBar.onIndexChange(nextIndex);
     }
   }, [router, tabBar, tabs, index]);
+  const onKeyDown = useCallback((e, currentIndex) => {
+    let nextIndex = currentIndex;
+    if (e.key === 'ArrowRight') nextIndex = (currentIndex + 1) % tabs.length;else if (e.key === 'ArrowLeft') nextIndex = (currentIndex - 1 + tabs.length) % tabs.length;else return;
+    e.preventDefault();
+    onTabClick(nextIndex);
+    const container = e.currentTarget.parentElement;
+    const buttons = container?.querySelectorAll('[role="tab"]');
+    buttons?.[nextIndex]?.focus();
+  }, [tabs.length, onTabClick]);
   const tabBarStyle = useMemo(() => {
     const tabBarBg = toColorString(appearance?.tabBar?.backgroundColor);
     const style = {
@@ -125,6 +134,14 @@ export const RenderTabBar = /*#__PURE__*/memo(({
     fontWeight: appearance?.tabBar?.title?.fontWeight,
     fontStyle: appearance?.tabBar?.title?.fontStyle
   }), [appearance?.tabBar?.title?.fontFamily, appearance?.tabBar?.title?.fontSize, appearance?.tabBar?.title?.fontWeight, appearance?.tabBar?.title?.fontStyle]);
+  const handleTabClick = useCallback(e => {
+    const index = Number(e.currentTarget.dataset.index);
+    onTabClick(index);
+  }, [onTabClick]);
+  const handleKeyDown = useCallback(e => {
+    const index = Number(e.currentTarget.dataset.index);
+    onKeyDown(e, index);
+  }, [onKeyDown]);
   const CustomTabBar = config.component;
   return /*#__PURE__*/_jsx(TabBarContext.Provider, {
     value: tabBar,
@@ -152,6 +169,7 @@ export const RenderTabBar = /*#__PURE__*/memo(({
             "aria-hidden": "true"
           }), /*#__PURE__*/_jsxs("div", {
             className: "tab-bar-content",
+            role: "tablist",
             children: [/*#__PURE__*/_jsx("div", {
               className: "tab-bar-active-indicator",
               "aria-hidden": "true"
@@ -166,11 +184,15 @@ export const RenderTabBar = /*#__PURE__*/memo(({
               };
               return /*#__PURE__*/_jsxs("button", {
                 type: "button",
+                role: "tab",
+                id: `tab-${tab.tabKey}`,
                 "data-index": i,
                 "data-active": isActive ? 'true' : 'false',
-                "aria-current": isActive ? 'page' : undefined,
+                "aria-selected": isActive,
+                tabIndex: isActive ? 0 : -1,
                 className: `tab-item${isActive ? ' active' : ''}`,
-                onClick: () => onTabClick(i),
+                onClick: handleTabClick,
+                onKeyDown: handleKeyDown,
                 children: [/*#__PURE__*/_jsx("div", {
                   className: "tab-item-icon",
                   children: isImageSource(tab.icon) ? /*#__PURE__*/_jsx(TabIcon, {
@@ -183,6 +205,7 @@ export const RenderTabBar = /*#__PURE__*/memo(({
                   children: tab.title
                 }), tab.badgeValue ? /*#__PURE__*/_jsx("span", {
                   className: "tab-item-label-badge",
+                  "aria-label": `${tab.badgeValue} notifications`,
                   children: tab.badgeValue
                 }) : null]
               }, tab.tabKey);