@momo-kits/foundation 0.114.0-beta.2 → 0.114.0-beta.4

package/Application/Components/NavigationButton.tsx

@@ -12,10 +12,8 @@ import {BadgeDot} from '../../Badge';
 const NavigationButton: React.FC<NavigationButtonProps> = ({
   icon,
   tintColor,
-  onPress,
   showBadge = false,
-  accessibilityLabel = '',
-  disabled = false,
+  ...props
 }) => {
   const {theme} = useContext(ApplicationContext);
   let buttonStyle: ViewStyle = {};
@@ -29,10 +27,8 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
   return (
     <View style={{width: 28}}>
       <TouchableOpacity
-        disabled={disabled}
-        accessibilityLabel={accessibilityLabel}
+        {...props}
         style={[styles.navigationButton, buttonStyle]}
-        onPress={onPress}
         hitSlop={{top: 7, bottom: 7, left: 7, right: 7}}>
         <Icon
           source={icon}

package/Application/StackScreen.tsx

@@ -138,11 +138,11 @@ const StackScreen: React.FC<ScreenParams> = props => {
       });
       if (
         context.debugLastElement &&
-        lastElement.current?.children?.current?.length > 0
+        lastElement.current?.children?.length > 0
       ) {
         Alert.alert(
           `${screenName}- load ${timeLoad}ms`,
-          JSON.stringify(lastElement.current?.children?.current)
+          JSON.stringify(lastElement.current?.children)
         );
       }
     }

package/Application/types.ts

@@ -1,7 +1,12 @@
 import {EventArg} from '@react-navigation/core';
 import {StackNavigationOptions} from '@react-navigation/stack';
 import React, {ReactNode} from 'react';
-import {Animated, ViewProps, ViewStyle} from 'react-native';
+import {
+  Animated,
+  TouchableOpacityProps,
+  ViewProps,
+  ViewStyle,
+} from 'react-native';
 import {PopupNotifyProps} from '../Popup/types';
 import Localize from './Localize';
 import Navigation from './Navigation';
@@ -147,14 +152,11 @@ export type BottomSheetParams = {
   keyboardVerticalOffset?: number;
 };
 
-export type NavigationButtonProps = {
+export interface NavigationButtonProps extends TouchableOpacityProps {
   icon: string;
   tintColor?: string;
-  onPress: () => void;
   showBadge?: boolean;
-  accessibilityLabel?: string;
-  disabled?: boolean;
-};
+}
 
 export type HeaderTitleProps = {
   type: 'default' | 'user' | 'location' | 'journey';

package/Application/utils.tsx

@@ -169,6 +169,14 @@ const setAutomationID = (accessibilityLabel = '') => {
   }
 };
 
+export const getImageName = (source: any): string => {
+  const parts = source?.uri?.split?.('/');
+  if (parts?.length > 0) {
+    return parts?.[parts.length - 1];
+  }
+  return '';
+};
+
 export {
   getStackOptions,
   getDialogOptions,

package/Badge/Badge.tsx

@@ -7,12 +7,7 @@ import styles from './styles';
 import {Colors} from '../Consts';
 import {Text} from '../Text';
 
-const Badge: FC<BadgeProps> = ({
-  label = 'Label',
-  style,
-  backgroundColor,
-  accessibilityLabel,
-}) => {
+const Badge: FC<BadgeProps> = ({label = 'Label', style, backgroundColor}) => {
   const {theme} = useContext(ApplicationContext);
 
   const isValidatedColor = () => {
@@ -51,10 +46,7 @@ const Badge: FC<BadgeProps> = ({
 
   return (
     <View style={[style, styles.badge, {backgroundColor: badgeColor}]}>
-      <Text
-        color={Colors.black_01}
-        typography={'action_xxs_bold'}
-        accessibilityLabel={accessibilityLabel}>
+      <Text color={Colors.black_01} typography={'action_xxs_bold'}>
         {formatTitle()}
       </Text>
     </View>

package/Badge/types.ts

@@ -18,8 +18,6 @@ export type BadgeProps = {
    * Optional. Custom background badge.
    */
   backgroundColor?: string;
-
-  accessibilityLabel?: string;
 };
 
 /**

package/Button/index.tsx

@@ -76,8 +76,6 @@ export interface ButtonProps extends TouchableOpacityProps {
   onPress: () => void;
 
   params?: any;
-
-  accessibilityLabelTitle?: string;
 }
 
 const Button: FC<ButtonProps> = ({
@@ -89,19 +87,14 @@ const Button: FC<ButtonProps> = ({
   iconLeft,
   loading = false,
   title = 'Button',
-  onPress,
   params,
-  accessibilityLabelTitle,
   ...rest
 }) => {
   const {theme, config} = useContext(ApplicationContext);
   const skeleton = useContext(SkeletonContext);
   const {gradient, color} = config?.navigationBar?.buttonColors ?? {};
   let gradientPros;
-  let state = 'enabled';
-  if (loading) {
-    state = 'loading';
-  }
+
   if (gradient?.length > 0 && type === 'primary') {
     gradientPros = {
       colors: gradient,
@@ -227,11 +220,7 @@ const Button: FC<ButtonProps> = ({
     const typography = getTypography();
     const textColor = getTextColor();
     return (
-      <Text
-        typography={typography}
-        color={textColor}
-        numberOfLines={1}
-        accessibilityLabel={accessibilityLabelTitle}>
+      <Text typography={typography} color={textColor} numberOfLines={1}>
         {title}
       </Text>
     );
@@ -310,19 +299,14 @@ const Button: FC<ButtonProps> = ({
       value={{
         componentName: 'Button',
         params,
-        state: state,
-        componentValue: title,
         action: 'click',
       }}>
       <TouchableOpacity
         {...rest}
+        accessibilityRole="button"
+        accessibilityState={{disabled: type === 'disabled', busy: loading}}
         disabled={type === 'disabled'}
-        accessibilityState={{
-          ...rest.accessibilityState,
-          disabled: type === 'disabled',
-        }}
         activeOpacity={0.5}
-        onPress={onPress}
         style={buttonStyle}>
         {renderLeading()}
         {renderTitle()}

package/CheckBox/index.tsx

@@ -14,9 +14,7 @@ const CheckBox: FC<CheckBoxProps> = ({
   label,
   indeterminate,
   params,
-  accessibilityLabel,
-  accessibilityState,
-  accessibilityLabelLabel,
+  ...props
 }) => {
   const {theme} = useContext(ApplicationContext);
   const haveValue = value || indeterminate;
@@ -45,11 +43,9 @@ const CheckBox: FC<CheckBoxProps> = ({
         params,
         state: disabled ? 'disabled' : 'filled',
         action: 'click',
-        componentValue: indeterminate ? 'undetermined' : value,
       }}>
       <TouchableOpacity
-        accessibilityLabel={accessibilityLabel}
-        accessibilityState={accessibilityState}
+        {...props}
         activeOpacity={0.8}
         onPress={() => onChange?.(!value)}
         disabled={disabled}
@@ -67,13 +63,7 @@ const CheckBox: FC<CheckBoxProps> = ({
             />
           )}
         </View>
-        {!!label && (
-          <Text
-            typography={'body_default_regular'}
-            accessibilityLabel={accessibilityLabelLabel}>
-            {label}
-          </Text>
-        )}
+        {!!label && <Text typography={'body_default_regular'}>{label}</Text>}
       </TouchableOpacity>
     </ComponentContext.Provider>
   );

package/CheckBox/types.ts

@@ -1,4 +1,4 @@
-import {TouchableOpacityProps, ViewStyle} from 'react-native';
+import {TouchableOpacityProps} from 'react-native';
 
 export interface CheckBoxProps extends TouchableOpacityProps {
   /**
@@ -31,15 +31,7 @@ export interface CheckBoxProps extends TouchableOpacityProps {
   indeterminate?: boolean;
 
   /**
-   * Optional. Used to apply custom styling to the CheckBox component.
-   * Accepts an object of style properties.
+   * Optional. Represents the accessibility label for the CheckBox.
    */
-  style?: ViewStyle;
-
   params?: any;
-
-  /**
-   * Optional. Represents the label for the CheckBox component.
-   */
-  accessibilityLabelLabel?: string;
 }

package/Icon/index.tsx

@@ -10,7 +10,7 @@ const Icon: React.FC<IconProps> = ({
   size = 24,
   color,
   style = {},
-  accessibilityLabel,
+  ...props
 }) => {
   const {theme} = useContext(ApplicationContext);
 
@@ -31,11 +31,11 @@ const Icon: React.FC<IconProps> = ({
 
   return (
     <Image
+      {...props}
       loading={false}
       source={getIconSource()}
       style={[style, {width: size, height: size}]}
       resizeMode="contain"
-      accessibilityLabel={accessibilityLabel}
       {...tintColorProps}
     />
   );

package/Icon/types.ts

@@ -24,9 +24,4 @@ export type IconProps = {
    * Accepts an object of style properties.
    */
   style?: StyleProp<ImageStyle>;
-
-  /**
-   *  Optional. Represents the accessibility label for the icon.
-   */
-  accessibilityLabel?: string;
 };

package/IconButton/index.tsx

@@ -26,6 +26,9 @@ export interface IconButtonProps extends TouchableOpacityProps {
    */
   size?: 'large' | 'small';
 
+  /**
+   * Optional. Params for tracking
+   */
   params?: any;
 }
 
@@ -33,9 +36,7 @@ const IconButton: React.FC<IconButtonProps> = ({
   type = 'primary',
   icon,
   size,
-  onPress,
   params,
-  accessibilityLabel,
   ...rest
 }) => {
   const {theme} = useContext(ApplicationContext);
@@ -118,15 +119,12 @@ const IconButton: React.FC<IconButtonProps> = ({
         componentName: 'IconButton',
         params,
         state: type === 'disabled' ? 'disabled' : 'enabled',
-        componentValue: icon,
         action: 'click',
       }}>
       <TouchableOpacity
         {...rest}
         disabled={type === 'disabled'}
-        accessibilityLabel={accessibilityLabel}
         activeOpacity={activeOpacity}
-        onPress={onPress}
         style={buttonStyle}>
         <Icon size={iconSize} source={icon} color={getIconColor()} />
       </TouchableOpacity>

package/Image/index.tsx

@@ -1,12 +1,13 @@
 import React, {useContext, useRef, useState} from 'react';
 import {StyleSheet, View} from 'react-native';
-import FastImage, {Source} from 'react-native-fast-image';
+import FastImage from 'react-native-fast-image';
 import styles from './styles';
 import {ApplicationContext, SkeletonContext} from '../Application';
 import {Skeleton} from '../Skeleton';
 import {Icon} from '../Icon';
 import {Styles} from '../Consts';
 import {ImageProps} from './types';
+import {getImageName} from '../Application/utils';
 
 type Status = 'success' | 'loading' | 'error';
 
@@ -24,7 +25,7 @@ const Image: React.FC<ImageProps> = ({
   const [status, setStatus] = useState<Status>('success');
 
   const test: any = {
-    accessibilityLabel: accessibilityLabel || `img|${(source as Source).uri}`,
+    accessibilityLabel: accessibilityLabel || `img|${getImageName(source)}`,
   };
 
   /**

package/Input/Input.tsx

@@ -16,7 +16,7 @@ import {
 import {
   ApplicationContext,
   ComponentContext,
-  setAutomationID,
+  MiniAppContext,
 } from '../Application';
 import {Icon} from '../Icon';
 import {Loader} from '../Loader';
@@ -41,9 +41,6 @@ const Input = forwardRef(
       onBlur,
       onFocus,
       errorMessage,
-      icon,
-      iconColor,
-      onPressIcon,
       trailing,
       trailingColor,
       onPressTrailing,
@@ -60,25 +57,23 @@ const Input = forwardRef(
       style,
       params,
       hintText,
-      accessibilityLabel,
       editable = true,
       onPressFloatingIcon,
       onPressLeadingIcon,
       showClearIcon = true,
-      accessibilityLabelErrorMessage,
-      accessibilityLabelFloatingValue,
-      accessibilityLabelLeadingIcon,
-      accessibilityLabelTrailingIcon,
-      accessibilityLabelClearIcon,
       ...props
     }: InputProps,
     ref
   ) => {
     const {theme} = useContext(ApplicationContext);
+    const app = useContext<any>(MiniAppContext);
+    const screen = useContext<any>(MiniAppContext);
     const [focused, setFocused] = useState(false);
     const [haveValue, setHaveValue] = useState(!!value || !!props.defaultValue);
     const [secureTextInput, setSecureTextInput] = useState(secureTextEntry);
     const inputRef = useRef<TextInput | null>(null);
+    const componentName = 'Input';
+    const componentId = `${app.appId}/${app.code}/${screen.screenName}/${componentName}|${placeholder}`;
 
     const onClearText = () => {
       inputRef?.current?.clear();
@@ -126,8 +121,7 @@ const Input = forwardRef(
         return (
           <TouchableOpacity
             onPress={() => setSecureTextInput(!secureTextInput)}
-            style={styles.icon}
-            accessibilityLabel={accessibilityLabelTrailingIcon}>
+            style={styles.icon}>
             <Icon
               color={color}
               size={24}
@@ -138,24 +132,20 @@ const Input = forwardRef(
           </TouchableOpacity>
         );
       }
-      if (icon || trailing) {
+      if (trailing) {
         const renderIconTouchable = (icon: ReactNode) => {
           return (
             <TouchableOpacity
-              onPress={onPressTrailing ?? onPressIcon}
-              style={styles.icon}>
+              onPress={onPressTrailing}
+              style={styles.icon}
+              accessibilityLabel={`${accessibilityLabel}/trailing`}>
               {icon}
             </TouchableOpacity>
           );
         };
-        const trailingValue = icon || trailing;
-        if (trailingValue?.includes('_') || trailingValue?.includes('http')) {
+        if (trailing?.includes('_') || trailing?.includes('http')) {
           return renderIconTouchable(
-            <Icon
-              color={color}
-              source={(icon || trailing) as string}
-              size={24}
-            />
+            <Icon color={color} source={trailing} size={24} />
           );
         }
         return renderIconTouchable(
@@ -163,7 +153,7 @@ const Input = forwardRef(
             typography="action_xs_bold"
             color={color ?? theme.colors.primary}
             numberOfLines={1}>
-            {trailingValue!.substring(0, 15)}
+            {trailing!.substring(0, 15)}
           </Text>
         );
       }
@@ -177,7 +167,7 @@ const Input = forwardRef(
       const secure = secureTextInput && secureTextEntry;
       let textColor = theme.colors.text.default;
       let placeholderColor = theme.colors.text.hint;
-      let iconTintColor = trailingColor ?? iconColor;
+      let iconTintColor = trailingColor;
 
       if (disabled) {
         textColor = disabledColor;
@@ -200,14 +190,14 @@ const Input = forwardRef(
             required={required}
             floatingIcon={floatingIcon}
             onPress={onPressFloatingIcon}
-            accessibilityLabel={accessibilityLabelFloatingValue}
+            accessibilityLabel={accessibilityLabel}
           />
           <View style={styles.inputView}>
             {!!leadingIcon && (
               <View style={styles.leadingIconContainer}>
                 <TouchableOpacity
                   onPress={onPressLeadingIcon}
-                  accessibilityLabel={accessibilityLabelLeadingIcon}>
+                  accessibilityLabel={`${accessibilityLabel}/floating_icon-${leadingIcon}`}>
                   <Icon
                     color={leadingIconColor}
                     source={leadingIcon}
@@ -218,11 +208,7 @@ const Input = forwardRef(
             )}
             <TextInput
               {...props}
-              {...setAutomationID(accessibilityLabel)}
-              accessibilityState={{
-                ...props.accessibilityState,
-                disabled: disabled,
-              }}
+              accessibilityLabel={`${componentId}/input`}
               editable={editable && !disabled}
               secureTextEntry={secure}
               textAlignVertical="center"
@@ -250,9 +236,9 @@ const Input = forwardRef(
           <View style={styles.iconView}>
             {showClearIcon && focused && haveValue && (
               <TouchableOpacity
+                accessibilityLabel={`${accessibilityLabel}/clear_icon`}
                 style={styles.iconWrapper}
-                onPress={onClearText}
-                accessibilityLabel={accessibilityLabelClearIcon}>
+                onPress={onClearText}>
                 <Icon
                   source="24_navigation_close_circle_full"
                   size={16}
@@ -277,20 +263,23 @@ const Input = forwardRef(
       inputState = 'disabled';
     }
 
+    const accessibilityLabel = props.accessibilityLabel ?? componentId;
     return (
       <ComponentContext.Provider
         value={{
-          componentName: 'Input',
+          componentName,
           params,
           state: inputState,
         }}>
-        <View style={[style, styles.wrapper]}>
+        <View
+          style={[style, styles.wrapper]}
+          accessibilityLabel={accessibilityLabel}>
           {renderInputView()}
           <ErrorView
             errorMessage={errorMessage}
             errorSpacing={errorSpacing}
             hintText={hintText}
-            accessibilityLabel={accessibilityLabelErrorMessage}
+            accessibilityLabel={accessibilityLabel}
           />
         </View>
       </ComponentContext.Provider>

package/Input/InputDropDown.tsx

@@ -14,7 +14,6 @@ const InputDropDown = ({
   floatingIcon,
   onPressFloatingIcon,
   size = 'small',
-  onPress,
   placeholder,
   errorMessage,
   disabled = false,
@@ -25,13 +24,9 @@ const InputDropDown = ({
   leadingIconColor,
   style,
   params,
-  accessibilityLabel,
   hintText,
   multiline,
-  accessibilityLabelText,
-  accessibilityLabelTouchable,
-  accessibilityLabelErrorMessage,
-  accessibilityLabelFloatingValue,
+  ...props
 }: InputDropDownProps) => {
   const {theme} = useContext(ApplicationContext);
 
@@ -54,16 +49,15 @@ const InputDropDown = ({
           styles.inputDropDownWrapper,
           {backgroundColor: theme.colors.background.surface},
           getSizeStyle(size, multiline),
-          getBorderColor(theme, false, errorMessage, disabled),
+          getBorderColor(theme, false, errorMessage, disabled as boolean),
         ]}>
         <FloatingView
           floatingValue={floatingValue}
           floatingIconColor={floatingIconColor}
-          disabled={disabled}
+          disabled={disabled as boolean}
           required={required}
           floatingIcon={floatingIcon}
           onPress={onPressFloatingIcon}
-          accessibilityLabel={accessibilityLabelFloatingValue}
         />
         <View style={styles.inputDropDownView}>
           {!!leadingIcon && (
@@ -82,14 +76,11 @@ const InputDropDown = ({
               />
             </View>
           )}
-          <View
-            accessibilityLabel={accessibilityLabel}
-            style={styles.textViewDropDown}>
+          <View style={styles.textViewDropDown}>
             <Text
               numberOfLines={multiline ? undefined : 1}
               typography={'body_default_regular'}
-              color={value ? textColor : placeholderColor}
-              accessibilityLabel={accessibilityLabelText}>
+              color={value ? textColor : placeholderColor}>
               {value || placeholder}
             </Text>
           </View>
@@ -116,18 +107,14 @@ const InputDropDown = ({
         state: 'enabled',
       }}>
       <TouchableOpacity
+        {...props}
         activeOpacity={0.6}
-        onPress={onPress}
-        style={[style, styles.wrapper]}
-        accessibilityLabel={accessibilityLabelTouchable}
-        accessibilityState={{disabled}}
-        disabled={disabled}>
+        style={[style, styles.wrapper]}>
         {renderInputView()}
         <ErrorView
           errorMessage={errorMessage}
           errorSpacing={errorSpacing}
           hintText={hintText}
-          accessibilityLabel={accessibilityLabelErrorMessage}
         />
       </TouchableOpacity>
     </ComponentContext.Provider>

package/Input/InputMoney.tsx

@@ -37,9 +37,6 @@ const InputMoney = forwardRef(
       onBlur,
       onFocus,
       errorMessage,
-      icon,
-      iconColor,
-      onPressIcon,
       trailing,
       trailingColor,
       onPressTrailing,
@@ -50,15 +47,12 @@ const InputMoney = forwardRef(
       style,
       params,
       defaultValue = '',
-      accessibilityLabel,
       hintText,
       value: _value,
       onPressFloatingIcon,
       placeholder = '0đ',
       currency = 'đ',
       showClearIcon = true,
-      accessibilityLabelErrorMessage,
-      accessibilityLabelFloatingValue,
       ...props
     }: InputMoneyProps,
     ref
@@ -121,7 +115,7 @@ const InputMoney = forwardRef(
       const disabledColor = theme.colors.text.disable;
       let textColor = theme.colors.text.default;
       let placeholderColor = theme.colors.text.hint;
-      let iconTintColor = trailingColor ?? iconColor;
+      let iconTintColor = trailingColor;
 
       if (disabled) {
         textColor = disabledColor;
@@ -144,16 +138,10 @@ const InputMoney = forwardRef(
             required={required}
             floatingIcon={floatingIcon}
             onPress={onPressFloatingIcon}
-            accessibilityLabel={accessibilityLabelFloatingValue}
           />
           <View style={styles.inputView}>
             <TextInput
               {...props}
-              accessibilityLabel={accessibilityLabel}
-              accessibilityState={{
-                ...props.accessibilityState,
-                disabled: disabled,
-              }}
               editable={!disabled}
               ref={inputRef}
               keyboardType={'number-pad'}
@@ -187,10 +175,10 @@ const InputMoney = forwardRef(
             )}
             <RenderTrailing
               color={iconTintColor}
-              icon={icon}
+              icon={trailing}
               trailing={trailing}
               onPressTrailing={onPressTrailing}
-              onPressIcon={onPressIcon}
+              onPressIcon={onPressTrailing}
               loading={loading}
             />
           </View>
@@ -224,7 +212,6 @@ const InputMoney = forwardRef(
             errorMessage={errorMessage}
             errorSpacing={errorSpacing}
             hintText={hintText}
-            accessibilityLabel={accessibilityLabelErrorMessage}
           />
         </View>
       </ComponentContext.Provider>

package/Input/InputOTP.tsx

@@ -77,7 +77,6 @@ const InputOTP = forwardRef(
       dataType = 'number',
       params,
       style,
-      accessibilityLabel,
       hintText,
       ...props
     }: InputOTPProps,
@@ -210,7 +209,6 @@ const InputOTP = forwardRef(
           <View style={styles.otpRealInputWrapper}>
             <TextInput
               {...props}
-              accessibilityLabel={accessibilityLabel}
               ref={inputRef}
               value={value}
               onChangeText={_onChangeText}

package/Input/InputSearch.tsx

@@ -118,9 +118,6 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
     onFocus,
     onBlur,
     value,
-    icon,
-    iconColor,
-    onPressIcon,
     trailing,
     trailingColor,
     onPressTrailing,
@@ -132,7 +129,6 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
     onPressButtonText,
     params,
     backgroundColor,
-    accessibilityLabel,
     onPress,
     typingData,
     ...props
@@ -202,7 +198,6 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
     return (
       <TextInput
         {...props}
-        accessibilityLabel={accessibilityLabel}
         textAlignVertical="center"
         allowFontScaling={false}
         ref={inputRef}
@@ -239,10 +234,8 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
             />
           </TouchableOpacity>
         )}
-        {!!(icon || trailing) && (
-          <TouchableOpacity
-            style={Styles.row}
-            onPress={onPressTrailing ?? onPressIcon}>
+        {!!trailing && (
+          <TouchableOpacity style={Styles.row} onPress={onPressTrailing}>
             <View
               style={[
                 styles.divider,
@@ -252,8 +245,8 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
               ]}
             />
             <Icon
-              color={iconColor || trailingColor}
-              source={(icon || trailing) as string}
+              color={trailingColor}
+              source={trailing as string}
               style={styles.iconSearchInput}
             />
           </TouchableOpacity>

package/Input/common.tsx

@@ -17,12 +17,12 @@ import IconSources from '../Assets/icon.json';
 type FloatingViewProps = {
   floatingValue?: string;
   floatingIconColor?: string;
+  accessibilityLabel?: string;
   disabled?: boolean;
   floatingIcon?: string;
   required?: boolean;
   style?: ViewStyle;
   onPress?: (e: GestureResponderEvent) => void;
-  accessibilityLabel?: string;
 };
 
 type TrailingProps = {
@@ -98,9 +98,11 @@ export const ErrorView: FC<{
           />
         </View>
         <Text
+          accessibilityLabel={`${accessibilityLabel}/${
+            errorMessage ? 'error' : 'hint'
+          }-${errorMessage ?? hintTextDefault}`}
           style={Styles.flex}
           color={errorMessage ? errorColor : hintColor}
-          accessibilityLabel={accessibilityLabel}
           typography={'description_default_regular'}>
           {errorMessage ?? hintTextDefault}
         </Text>
@@ -146,7 +148,7 @@ export const FloatingView: FC<FloatingViewProps> = ({
         <Text
           color={floatingTextColor}
           typography={'label_s_medium'}
-          accessibilityLabel={accessibilityLabel}>
+          accessibilityLabel={`${accessibilityLabel}/floating-${floatingValue}`}>
           {floatingValue}
           {required && (
             <Text

package/Input/index.tsx

@@ -1,4 +1,8 @@
-import {GestureResponderEvent, TextInputProps, ViewStyle} from 'react-native';
+import {
+  GestureResponderEvent,
+  TextInputProps,
+  TouchableOpacityProps,
+} from 'react-native';
 import Input from './Input';
 import InputDropDown from './InputDropDown';
 import InputMoney from './InputMoney';
@@ -29,24 +33,6 @@ export interface InputProps extends TextInputProps {
    */
   errorMessage?: string;
 
-  /**
-   * @deprecated Use `trailing` instead.
-   * Optional. Represents the name or key of the icon to be displayed in the Input component.
-   */
-  icon?: string;
-
-  /**
-   * @deprecated Use `trailingColor` instead.
-   * Optional. Represents the color of the icon in the Input component.
-   */
-  iconColor?: string;
-
-  /**
-   * @deprecated Use `onPressTrailing` instead.
-   * Optional. callback function to be called when the icon is pressed.
-   */
-  onPressIcon?: () => void;
-
   /**
    * Optional. Represents the name or key of the icon to be displayed in the Input component.
    */
@@ -131,36 +117,6 @@ export interface InputProps extends TextInputProps {
    * Optional. Represents the style of the Input component.
    */
   showClearIcon?: boolean;
-
-  /**
-   * Optional. Represents the accessibility label for the error message.
-   * This is read out by screen readers.
-   */
-  accessibilityLabelErrorMessage?: string;
-
-  /**
-   * Optional. Represents the accessibility label for the Floating Value.
-   * This is read out by screen readers.
-   */
-  accessibilityLabelFloatingValue?: string;
-
-  /**
-   * Optional. Represents the accessibility label for the leading Icon.
-   * This is read out by screen readers.
-   */
-  accessibilityLabelLeadingIcon?: string;
-
-  /**
-   * Optional. Represents the accessibility label for the trailing Icon.
-   * This is read out by screen readers.
-   */
-  accessibilityLabelTrailingIcon?: string;
-
-  /**
-   * Optional. Represents the accessibility label for the clear Icon.
-   * This is read out by screen readers.
-   */
-  accessibilityLabelClearIcon?: string;
 }
 
 export interface InputTextAreaProps extends Omit<InputProps, 'size'> {
@@ -282,8 +238,7 @@ export type CaretProps = {
   length?: number;
 };
 
-export interface InputDropDownProps
-  extends Omit<InputProps, 'trailing' | 'trailingColor' | 'onPressTrailing'> {
+export interface InputDropDownProps extends TouchableOpacityProps {
   /**
    * Optional. Defines the size of the InputDropDown component.
    * 'small' - A smaller, less prominent input.
@@ -292,51 +247,100 @@ export interface InputDropDownProps
   size?: 'small' | 'large';
 
   /**
-   * Optional. Function to be called when the InputDropDown is pressed.
+   * Optional. Represents the text to be displayed in the InputDropDown component.
    */
-  onPress?: () => void;
+  value?: string;
 
   /**
-   * Optional. If `true`, the user won't be able to interact with the InputDropDown component.
-   * Defaults to `false` if not provided.
+   * Optional. Represents the placeholder text to be displayed in the InputDropDown component.
    */
-  disabled?: boolean;
+  placeholder?: string;
+
+  /**
+   * Optional. Represents the data for the dropdown.
+   */
+  multiline?: boolean;
 
   /**
-   * Optional. If `true`, the InputDropDown component is marked as required,
+   * Optional. Represents the value for the floating title in the Input component.
+   */
+  floatingValue?: string;
+
+  /**
+   * Optional. Represents the name or key of the floating icon to be displayed in the Input component.
+   */
+  floatingIcon?: string;
+
+  /**
+   * Optional. Represents the error message to be displayed below the Input component when there is an error.
+   */
+  errorMessage?: string;
+
+  /**
+   * @deprecated Use `trailing` instead.
+   * Optional. Represents the name or key of the icon to be displayed in the Input component.
+   */
+  icon?: string;
+
+  /**
+   * @deprecated Use `onPressTrailing` instead.
+   * Optional. callback function to be called when the icon is pressed.
+   */
+  onPressIcon?: () => void;
+
+  /**
+   * Optional. Represents the color of the floating icon in the Input component.
+   */
+  floatingIconColor?: string;
+
+  /**
+   * Optional. If `true`, the Input component is marked as required,
    * indicating that the user must provide a value before submitting a form.
    * Defaults to `false` if not provided.
    */
   required?: boolean;
 
   /**
-   * Optional. params for element tracking.
+   * Optional. If `true`,
+   * include spacing when Input not have error message.
+   * Defaults to `false` if not provided.
    */
-  params?: {
-    [key: string]: any;
-  };
+  errorSpacing?: boolean;
 
   /**
-   * Optional. Represents the style of the InputDropDown component.
+   *  If true, the icon of input will use be show indicator loading.
    */
-  style?: ViewStyle | ViewStyle[];
+  loading?: boolean;
 
   /**
-   * Optional. Represents the data for the dropdown.
+   *  Optional. Represents the leading icon in the Input component.
    */
-  multiline?: boolean;
+  leadingIcon?: string;
 
   /**
-   * Optional. Represents the accessibility label for the InputDropDown component.
-   * This is read out by screen readers.
+   * Optional. callback function to be called when the leading icon is pressed.
    */
-  accessibilityLabelText?: string;
+  onPressLeadingIcon?: () => void;
 
   /**
-   * Optional. Represents the accessibility Touchable for the InputDropDown component.
-   * This is read out by screen readers.
+   * Optional. Represents the color of the leading icon in the Input component.
    */
-  accessibilityLabelTouchable?: string;
+  leadingIconColor?: string;
+
+  /**
+   * Optional. params for element tracking.
+   */
+  params?: any;
+
+  /**
+   * Optional. Represents text below the Input component.
+   */
+  hintText?: string;
+
+  /**
+   * Optional. Represents the style of the Input component.
+   */
+  onPressFloatingIcon?: () => void;
 }
 
 export type InputRef = {

package/Layout/Card.tsx

@@ -27,7 +27,6 @@ const Card: React.FC<CardProps> = ({
   style,
   backgroundImage,
   useShadow = false,
-  accessibilityLabel,
   ...props
 }) => {
   const {showGrid, theme} = useContext(ApplicationContext);
@@ -157,9 +156,7 @@ const Card: React.FC<CardProps> = ({
           },
           !!backgroundImage && {backgroundColor: undefined},
           useShadow && Shadow.Light,
-        ]}
-        accessibilityLabel={accessibilityLabel}
-        >
+        ]}>
         {!!backgroundImage && (
           <Image
             source={{uri: backgroundImage}}

package/Layout/Section.tsx

@@ -33,7 +33,6 @@ const Section: React.FC<SectionProps> = ({
   useMargin = true,
   backgroundImage,
   style,
-  accessibilityLabel,
   ...props
 }) => {
   const {showGrid} = useContext(ApplicationContext);
@@ -162,9 +161,7 @@ const Section: React.FC<SectionProps> = ({
             flexDirection: 'row',
             flexWrap: 'wrap',
           },
-        ]}
-        accessibilityLabel={accessibilityLabel}
-        >
+        ]}>
         {!!backgroundImage && (
           <Image
             source={{uri: backgroundImage}}

package/Radio/index.tsx

@@ -15,9 +15,7 @@ const Radio: FC<RadioProps> = ({
   label,
   style,
   params,
-  accessibilityLabel,
-  accessibilityLabelText,
-  accessibilityState,
+  ...props
 }) => {
   const {theme} = useContext(ApplicationContext);
   const selected = value === groupValue;
@@ -47,14 +45,12 @@ const Radio: FC<RadioProps> = ({
         componentName: 'Radio',
         params,
         state: disabled ? 'disabled' : 'enabled',
-        componentValue: selected,
         action: 'click',
       }}>
       <TouchableOpacity
-        accessibilityLabel={accessibilityLabel}
-        accessibilityState={accessibilityState}
-        onPress={onChange}
+        {...props}
         disabled={disabled}
+        onPress={onChange}
         style={[
           style,
           {
@@ -71,10 +67,7 @@ const Radio: FC<RadioProps> = ({
           ]}
         />
         {!!label && (
-          <Text
-            typography={'body_default_regular'}
-            style={styles.radioText}
-            accessibilityLabel={accessibilityLabelText}>
+          <Text typography={'body_default_regular'} style={styles.radioText}>
             {label}
           </Text>
         )}
@@ -84,4 +77,3 @@ const Radio: FC<RadioProps> = ({
 };
 
 export {Radio};
-export type {RadioProps};

package/Radio/types.ts

@@ -1,4 +1,4 @@
-import {TouchableOpacityProps, ViewStyle} from 'react-native';
+import {TouchableOpacityProps} from 'react-native';
 
 export interface RadioProps extends TouchableOpacityProps {
   /**
@@ -7,12 +7,6 @@ export interface RadioProps extends TouchableOpacityProps {
    */
   value: any;
 
-  /**
-   * `disabled`: Optional. If `true`, the user won't be able to interact with the Radio component.
-   * Defaults to `false` if not provided.
-   */
-  disabled?: boolean;
-
   /**
    * `label`: Optional. Represents the text label displayed next to the Radio component.
    */
@@ -31,15 +25,7 @@ export interface RadioProps extends TouchableOpacityProps {
   groupValue: any;
 
   /**
-   * `style`: Optional. Used to apply custom styling to the Radio component.
-   * Accepts an object of style properties.
+   * Optional. params for tracking
    */
-  style?: ViewStyle;
-
   params?: any;
-
-  /**
-   * `accessibilityLabelText`: Optional. Represents the label for the Radio Label component.
-   */
-  accessibilityLabelText?: string;
 }

package/Switch/index.tsx

@@ -11,7 +11,7 @@ const Switch: FC<SwitchProps> = ({
   disabled = false,
   style,
   params,
-  accessibilityLabel,
+  ...props
 }) => {
   const circleBackgroundColor = value ? Colors.black_01 : Colors.black_03;
   const circleAlign = value ? 'flex-end' : 'flex-start';
@@ -27,12 +27,11 @@ const Switch: FC<SwitchProps> = ({
         componentName: 'Switch',
         params,
         state: disabled ? 'disabled' : 'enabled',
-        componentValue: value,
         action: 'click',
       }}>
       <TouchableOpacity
+        {...props}
         disabled={disabled}
-        accessibilityLabel={accessibilityLabel}
         onPress={() => onChange?.(!value)}
         style={[
           style,

package/Switch/types.ts

@@ -1,4 +1,4 @@
-import {TouchableOpacityProps, ViewStyle} from 'react-native';
+import {TouchableOpacityProps} from 'react-native';
 
 export interface SwitchProps extends TouchableOpacityProps {
   /**
@@ -13,16 +13,7 @@ export interface SwitchProps extends TouchableOpacityProps {
   onChange: (value: boolean) => void;
 
   /**
-   * `disabled`: Optional. If `true`, the user won't be able to interact with the Switch component.
-   * Defaults to `false` if not provided.
+   * Optional. params for tracking
    */
-  disabled?: boolean;
-
-  /**
-   * `style`: Optional. Used to apply custom styling to the Switch component.
-   * Accepts an object of style properties.
-   */
-  style?: ViewStyle;
-
   params?: any;
 }

package/Tag/index.tsx

@@ -31,8 +31,6 @@ const Tag: FC<TagProps> = ({
   size = 'large',
   style,
   customColor,
-  accessibilityLabelContainer,
-  accessibilityLabelText,
 }) => {
   let labelColor = textColor[color];
   let tagColor = backgroundColor[color];
@@ -62,9 +60,7 @@ const Tag: FC<TagProps> = ({
   }
 
   return (
-    <View
-      style={[style, sizeStyle, {backgroundColor: tagColor}]}
-      accessibilityLabel={accessibilityLabelContainer}>
+    <View style={[style, sizeStyle, {backgroundColor: tagColor}]}>
       {!!icon && (
         <Icon
           style={styles.icon}
@@ -73,10 +69,7 @@ const Tag: FC<TagProps> = ({
           color={labelColor}
         />
       )}
-      <Text
-        color={labelColor}
-        typography={'label_s_medium'}
-        accessibilityLabel={accessibilityLabelText}>
+      <Text color={labelColor} typography={'label_s_medium'}>
         {label}
       </Text>
     </View>

package/Tag/types.ts

@@ -33,16 +33,4 @@ export type TagProps = {
    * that can be applied to the Tag component.
    */
   customColor?: string;
-
-  /**
-   * Overrides the text that's read by the screen reader when the user interacts with the element. By default, the
-   * label is constructed by traversing all the children and accumulating all the Text nodes separated by space.
-   */
-  accessibilityLabelContainer?: string;
-
-  /**
-   * Overrides the text that's read by the screen reader when the user interacts with the element. By default, the
-   * label is constructed by traversing all the children and accumulating all the Text nodes separated by space.
-   */
-  accessibilityLabelText?: string;
 };

package/Text/index.tsx

@@ -2,11 +2,7 @@ import React, {useContext} from 'react';
 import {Text as RNText, TextProps as RNTextProps, View} from 'react-native';
 import styles from './styles';
 import {Typography, TypographyWeight} from './types';
-import {
-  ApplicationContext,
-  setAutomationID,
-  SkeletonContext,
-} from '../Application';
+import {ApplicationContext, SkeletonContext} from '../Application';
 import {scaleSize} from './utils';
 import {Skeleton} from '../Skeleton';
 
@@ -161,7 +157,6 @@ const Text: React.FC<TextProps> = ({
   return (
     <RNText
       {...rest}
-      {...setAutomationID(rest.accessibilityLabel)}
       allowFontScaling={false}
       style={[
         style,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/foundation",
-  "version": "0.114.0-beta.2",
+  "version": "0.114.0-beta.4",
   "description": "React Native Component Kits",
   "main": "index.ts",
   "scripts": {},