@momo-kits/step 0.111.1-rc.7 → 0.112.1-beta.0

package/StepsHorizontal.tsx

@@ -4,7 +4,7 @@ import {FlexAlignType, TouchableOpacity, View} from 'react-native';
 import StepIcon from './StepIcon';
 import styles from './styles';
 import {Step, StepsProps} from './types';
-import { getStepColor, getStepTypo} from './utils';
+import {getStepColor, getStepTypo} from './utils';
 
 type TextAlign = 'left' | 'right' | 'center';
 
@@ -17,6 +17,7 @@ const StepsHorizontal: FC<StepsProps> = ({
   customIcon,
   onPress,
   disabled,
+  accessibilityLabel = 'steps-horizontal',
 }) => {
   const renderStepItem = (item: Step, index: number) => {
     const {title, description, error, time} = item;
@@ -53,12 +54,18 @@ const StepsHorizontal: FC<StepsProps> = ({
           marginRight: haveMarginRight ? Spacing.XS : 0,
         }}
         disabled={disabled || !onPress}
-        onPress={() => onPress && onPress(item, index)}>
+        onPress={() => onPress && onPress(item, index)}
+        accessibilityLabel={`${accessibilityLabel}-touch-${index}`}
+        accessibilityState={{
+          disabled,
+        }}
+        >
         {!!time && (
           <Text
             style={{textAlign}}
             color={disabled ? theme.colors.text.disable : typoStyle.time.color}
-            typography={typoStyle.time.typography}>
+            typography={typoStyle.time.typography}
+            accessibilityLabel={`${accessibilityLabel}-time-${index}`}>
             {time}
           </Text>
         )}
@@ -67,7 +74,8 @@ const StepsHorizontal: FC<StepsProps> = ({
           <Text
             style={[styles.title, {textAlign}]}
             color={disabled ? theme.colors.text.disable : typoStyle.title.color}
-            typography={typoStyle.title.typography}>
+            typography={typoStyle.title.typography}
+            accessibilityLabel={`${accessibilityLabel}-title-${index}`}>
             {title}
           </Text>
         )}
@@ -77,7 +85,8 @@ const StepsHorizontal: FC<StepsProps> = ({
             color={
               disabled ? theme.colors.text.disable : typoStyle.description.color
             }
-            typography={typoStyle.description.typography}>
+            typography={typoStyle.description.typography}
+            accessibilityLabel={`${accessibilityLabel}-description-${index}`}>
             {description}
           </Text>
         )}
@@ -93,7 +102,13 @@ const StepsHorizontal: FC<StepsProps> = ({
   ) => {
     const {error} = item;
 
-    const stepStyle = getStepColor(activeIndex, index, error, steps.length, disabled);
+    const stepStyle = getStepColor(
+      activeIndex,
+      index,
+      error,
+      steps.length,
+      disabled
+    );
     const {backgroundColor, borderColor, lineColorRight, lineColorLeft} =
       stepStyle;
 

package/StepsVertical.tsx

@@ -13,6 +13,7 @@ const StepsVertical: FC<StepsProps> = ({
   useNumber = false,
   onPress,
   disabled,
+  accessibilityLabel = 'steps-vertical',
 }) => {
   const {theme} = useContext(ApplicationContext);
 
@@ -36,7 +37,8 @@ const StepsVertical: FC<StepsProps> = ({
         return (
           <Text
             color={disabled ? theme.colors.text.disable : typoStyle.title.color}
-            typography={typoStyle.description.typography}>
+            typography={typoStyle.description.typography}
+            accessibilityLabel={`${accessibilityLabel}-description-${index}`}>
             {description}
           </Text>
         );
@@ -52,7 +54,11 @@ const StepsVertical: FC<StepsProps> = ({
           marginBottom: Spacing.XS,
         }}
         disabled={disabled || !onPress}
-        onPress={() => onPress && onPress(item, index)}>
+        onPress={() => onPress && onPress(item, index)}
+        accessibilityLabel={`${accessibilityLabel}-touch-${index}`}
+        accessibilityState={{
+          disabled,
+        }}>
         <View
           style={{
             alignItems: 'center',
@@ -89,14 +95,16 @@ const StepsVertical: FC<StepsProps> = ({
               color={
                 disabled ? theme.colors.text.disable : typoStyle.title.color
               }
-              typography={typoStyle.title.typography}>
+              typography={typoStyle.title.typography}
+              accessibilityLabel={`${accessibilityLabel}-title-${index}`}>
               {title}
             </Text>
             <Text
               color={
                 disabled ? theme.colors.text.disable : typoStyle.time.color
               }
-              typography={typoStyle.time.typography}>
+              typography={typoStyle.time.typography}
+              accessibilityLabel={`${accessibilityLabel}-time-${index}`}>
               {time}
             </Text>
           </View>

package/package.json

@@ -1,20 +1,20 @@
 {
-  "name": "@momo-kits/step",
-  "version": "0.111.1-rc.7",
-  "private": false,
-  "main": "index.tsx",
-  "dependencies": {},
-  "peerDependencies": {
-    "@momo-kits/foundation": "latest",
-    "prop-types": "^15.7.2",
-    "react": "16.9.0",
-    "react-native": ">=0.55"
-  },
-  "devDependencies": {
-    "@momo-platform/versions": "4.1.11"
-  },
-  "license": "MoMo",
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
-  }
+    "name": "@momo-kits/step",
+    "version": "0.112.1-beta.0",
+    "private": false,
+    "main": "index.tsx",
+    "dependencies": {},
+    "peerDependencies": {
+        "@momo-kits/foundation": "latest",
+        "prop-types": "^15.7.2",
+        "react": "16.9.0",
+        "react-native": ">=0.55"
+    },
+    "devDependencies": {
+        "@momo-platform/versions": "4.1.11"
+    },
+    "license": "MoMo",
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org/"
+    }
 }

package/types.ts

@@ -54,6 +54,8 @@ export type StepsProps = {
    * Optional. If `true`, the user won't be able to interact with the Steps component.
    */
   disabled?: boolean;
+
+  accessibilityLabel?: string;
 };
 
 export type Align = 'left' | 'right' | 'center' | 'stretch';