@momo-kits/tab-view 0.103.2 → 0.104.1

package/index.tsx

@@ -4,6 +4,7 @@ import React, {
   useCallback,
   useContext,
   useImperativeHandle,
+  useMemo,
   useRef,
   useState,
 } from 'react';
@@ -17,7 +18,11 @@ import PagerView, {
   PagerViewOnPageScrollEvent,
   PagerViewOnPageSelectedEvent,
 } from 'react-native-pager-view';
-import {ApplicationContext} from '@momo-kits/foundation';
+import {
+  ApplicationContext,
+  MiniAppContext,
+  ScreenContext,
+} from '@momo-kits/foundation';
 
 const TabComponent: ForwardRefRenderFunction<TabViewRef, TabViewProps> = (
   {
@@ -31,6 +36,8 @@ const TabComponent: ForwardRefRenderFunction<TabViewRef, TabViewProps> = (
     selectedColor,
     unselectedColor,
     style,
+    accessibilityLabel,
+    accessibilityLabelForSelectedCard,
   },
   ref
 ) => {
@@ -43,6 +50,18 @@ const TabComponent: ForwardRefRenderFunction<TabViewRef, TabViewProps> = (
   const scrollX = useRef(new Animated.Value(startPage));
   const lazy = useRef([selectedIndex]).current;
   const {theme} = useContext(ApplicationContext);
+  const app = useContext<any>(MiniAppContext);
+  const screen = useContext<any>(ScreenContext);
+  const componentName = 'TabView';
+
+  const componentId = useMemo(() => {
+    if (accessibilityLabel) {
+      return accessibilityLabel;
+    }
+    let id = `${app.appId}/${app.code}/${screen.screenName}/${componentName}`;
+    return id;
+  }, [componentName, accessibilityLabel, app, screen]);
+
   const _onPressTabItem = (index: number) => {
     onPressTabItem?.(index);
     pagerRef.current?.setPage(index);
@@ -93,7 +112,10 @@ const TabComponent: ForwardRefRenderFunction<TabViewRef, TabViewProps> = (
   }));
 
   return (
-    <View onLayout={onLayout} style={[styles.tabView, {flex: 1}]}>
+    <View
+      onLayout={onLayout}
+      style={[styles.tabView, {flex: 1}]}
+      accessibilityLabel={componentId}>
       <Animated.View style={style}>
         <TabBarComponent
           onPressTabItem={_onPressTabItem}
@@ -104,6 +126,7 @@ const TabComponent: ForwardRefRenderFunction<TabViewRef, TabViewProps> = (
           direction={direction}
           selectedColor={selectedColor ?? theme.colors.primary}
           unselectedColor={unselectedColor ?? theme.colors.text.default}
+          accessibilityLabelForSelectedCard={accessibilityLabelForSelectedCard}
         />
       </Animated.View>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/tab-view",
-  "version": "0.103.2",
+  "version": "0.104.1",
   "private": false,
   "main": "index.tsx",
   "dependencies": {},
@@ -13,5 +13,8 @@
   "devDependencies": {
     "@momo-platform/versions": "4.1.11"
   },
-  "license": "MoMo"
-}
+  "license": "MoMo",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  }
+}

package/publish.sh

@@ -6,6 +6,7 @@ mkdir dist
 rsync -r --exclude=/dist ./* dist
 cd dist
 
+
 if [ "$1" == "stable" ]; then
   npm version $(npm view @momo-kits/foundation@stable version)
   npm version patch

package/tabBar/CardTabBar.tsx

@@ -22,6 +22,7 @@ const CardTabBar: FC<TabBarProps> = ({
   selectedIndex,
   selectedColor,
   unselectedColor,
+  accessibilityLabelForSelectedCard,
 }) => {
   const {theme} = useContext(ApplicationContext);
   const itemWidth = containerWidth / tabs.length;
@@ -58,7 +59,10 @@ const CardTabBar: FC<TabBarProps> = ({
           <PathSvg style={{transform: [{rotateY: '180deg'}], left: 8}} />
         )}
         <View
-          accessibilityLabel={tabs[selectedIndex]?.accessibilityLabel}
+          accessibilityLabel={
+            accessibilityLabelForSelectedCard ??
+            tabs[selectedIndex]?.accessibilityLabel
+          }
           style={[
             styles.overlayTextWrapper,
             {

package/tabItem/CardTabItem.tsx

@@ -1,8 +1,16 @@
-import React, {FC} from 'react';
+import React, {FC, useContext, useMemo} from 'react';
 import {TouchableOpacity, View} from 'react-native';
 import {TabItemProps} from '../types';
 import styles from '../styles';
-import {Badge, BadgeDot, Icon, Spacing, Text} from '@momo-kits/foundation';
+import {
+  Badge,
+  BadgeDot,
+  Icon,
+  MiniAppContext,
+  ScreenContext,
+  Spacing,
+  Text,
+} from '@momo-kits/foundation';
 
 const CardTabItem: FC<TabItemProps> = ({
   tab,
@@ -23,18 +31,31 @@ const CardTabItem: FC<TabItemProps> = ({
   } = tab;
   const color = active ? selectedColor : unselectedColor;
 
+  const app = useContext<any>(MiniAppContext);
+  const screen = useContext<any>(ScreenContext);
+
+  const componentName = 'CardTabItem';
+
+  const componentId = useMemo(() => {
+    if (accessibilityLabel) {
+      return accessibilityLabel;
+    }
+    let id = `${app.appId}/${app.code}/${screen.screenName}/${componentName}/${title}`;
+    return id;
+  }, [componentName, accessibilityLabel, app, screen]);
+
   return (
     <TouchableOpacity
       onPress={onPressTabItem}
       style={[styles.cardTabItem, {width}]}
-      accessibilityLabel={accessibilityLabel}>
-      {renderIcon &&
-        !['string', 'boolean', 'number'].includes(typeof renderIcon) && (
-          <View
-            style={[styles.icon, styles.iconHolder, {marginRight: Spacing.XS}]}>
-            {renderIcon}
-          </View>
-        )}
+      accessibilityLabel={componentId}
+      accessibilityState={{checked: active}}>
+      {typeof renderIcon === 'function' && (
+        <View
+          style={[styles.icon, styles.iconHolder, {marginRight: Spacing.XS}]}>
+          {renderIcon(active)}
+        </View>
+      )}
       {!renderIcon && !!icon && (
         <Icon
           color={color}
@@ -45,7 +66,8 @@ const CardTabItem: FC<TabItemProps> = ({
       <Text
         numberOfLines={1}
         style={[styles.textCenter, {flexShrink: 1}]}
-        typography={'body_default_regular'}>
+        typography={'body_default_regular'}
+        accessibilityLabel={`${componentId}|text`}>
         {title}
       </Text>
       {showDot && (
@@ -58,7 +80,11 @@ const CardTabItem: FC<TabItemProps> = ({
       )}
       {!showDot && badgeValue && (
         <View>
-          <Badge label={badgeValue} style={{marginLeft: Spacing.XS}} />
+          <Badge
+            label={badgeValue}
+            style={{marginLeft: Spacing.XS}}
+            accessibilityLabel={`${componentId}|badge`}
+          />
         </View>
       )}
     </TouchableOpacity>

package/tabItem/TabItem.tsx

@@ -1,11 +1,13 @@
-import React, {FC} from 'react';
+import React, {FC, useContext, useMemo} from 'react';
 import {TouchableOpacity, View} from 'react-native';
 import {TabItemProps} from '../types';
 import {
   Badge,
   BadgeDot,
   Icon,
+  MiniAppContext,
   scaleSize,
+  ScreenContext,
   Spacing,
   Text,
   Typography,
@@ -35,11 +37,24 @@ const TabItem: FC<TabItemProps> = ({
     : 'body_default_regular';
   const color = active ? selectedColor : unselectedColor;
   const dotStyle = dotSize === 'large' ? styles.dot : styles.dotSmall;
+  const app = useContext<any>(MiniAppContext);
+  const screen = useContext<any>(ScreenContext);
+
+  const componentName = 'TabItem';
+
+  const componentId = useMemo(() => {
+    if (accessibilityLabel) {
+      return accessibilityLabel;
+    }
+    let id = `${app.appId}/${app.code}/${screen.screenName}/${componentName}/${title}`;
+    return id;
+  }, [componentName, accessibilityLabel, app, screen]);
 
   const renderRowItem = () => {
     return (
       <TouchableOpacity
-        accessibilityLabel={accessibilityLabel}
+        accessibilityLabel={componentId}
+        accessibilityState={{checked: active}}
         style={[
           styles.tabItem,
           {
@@ -69,7 +84,8 @@ const TabItem: FC<TabItemProps> = ({
           numberOfLines={1}
           typography={typography}
           color={color}
-          style={{flexShrink: 1}}>
+          style={{flexShrink: 1}}
+          accessibilityLabel={`${componentId}|text`}>
           {title}
         </Text>
         {showDot && (
@@ -77,7 +93,11 @@ const TabItem: FC<TabItemProps> = ({
         )}
         {!showDot && badgeValue && (
           <View>
-            <Badge label={badgeValue} style={{marginLeft: Spacing.XS}} />
+            <Badge
+              label={badgeValue}
+              style={{marginLeft: Spacing.XS}}
+              accessibilityLabel={`${componentId}|badge`}
+            />
           </View>
         )}
       </TouchableOpacity>
@@ -99,7 +119,8 @@ const TabItem: FC<TabItemProps> = ({
           },
         ]}
         onPress={onPressTabItem}
-        accessibilityLabel={accessibilityLabel}>
+        accessibilityLabel={componentId}
+        accessibilityState={{checked: active}}>
         <View>
           {renderIcon && typeof renderIcon === 'function' && (
             <View
@@ -127,10 +148,18 @@ const TabItem: FC<TabItemProps> = ({
             <BadgeDot style={dotStyle} size={dotSize} />
           )}
           {(renderIcon || !!icon) && !showDot && badgeValue && (
-            <Badge label={badgeValue} style={styles.badge} />
+            <Badge
+              label={badgeValue}
+              style={styles.badge}
+              accessibilityLabel={`${componentId}|badge`}
+            />
           )}
         </View>
-        <Text numberOfLines={1} typography={typography} color={color}>
+        <Text
+          numberOfLines={1}
+          typography={typography}
+          color={color}
+          accessibilityLabel={`${componentId}|text`}>
           {title}
         </Text>
       </TouchableOpacity>

package/types.ts

@@ -1,6 +1,6 @@
 import {ReactElement} from 'react';
 import {PagerViewProps} from 'react-native-pager-view';
-import {Animated} from 'react-native';
+import {Animated, ViewStyle} from 'react-native';
 
 export type Tab = {
   /**
@@ -105,6 +105,12 @@ export type TabViewProps = {
   selectedColor?: string;
 
   unselectedColor?: string;
+
+  style?: ViewStyle;
+
+  accessibilityLabel?: string;
+
+  accessibilityLabelForSelectedCard?: string;
 };
 
 /**
@@ -144,6 +150,8 @@ export type TabBarProps = {
   selectedColor?: string;
 
   unselectedColor?: string;
+
+  accessibilityLabelForSelectedCard?: string;
 };
 
 export type TabViewRef = {