@momo-kits/foundation 0.113.0-optimize.6 → 0.113.0-optimize.8

package/Application/Components/NavigationButton.tsx

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

package/Application/types.ts

@@ -1,12 +1,7 @@
 import {EventArg} from '@react-navigation/core';
 import {StackNavigationOptions} from '@react-navigation/stack';
 import React, {ReactNode} from 'react';
-import {
-  Animated,
-  TouchableOpacityProps,
-  ViewProps,
-  ViewStyle,
-} from 'react-native';
+import {Animated, ViewProps, ViewStyle} from 'react-native';
 import {PopupNotifyProps} from '../Popup/types';
 import Localize from './Localize';
 import Navigation from './Navigation';
@@ -152,11 +147,14 @@ export type BottomSheetParams = {
   keyboardVerticalOffset?: number;
 };
 
-export interface NavigationButtonProps extends TouchableOpacityProps {
+export type NavigationButtonProps = {
   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,14 +169,6 @@ 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,7 +7,12 @@ import styles from './styles';
 import {Colors} from '../Consts';
 import {Text} from '../Text';
 
-const Badge: FC<BadgeProps> = ({label = 'Label', style, backgroundColor}) => {
+const Badge: FC<BadgeProps> = ({
+  label = 'Label',
+  style,
+  backgroundColor,
+  accessibilityLabel,
+}) => {
   const {theme} = useContext(ApplicationContext);
 
   const isValidatedColor = () => {
@@ -46,7 +51,10 @@ const Badge: FC<BadgeProps> = ({label = 'Label', style, backgroundColor}) => {
 
   return (
     <View style={[style, styles.badge, {backgroundColor: badgeColor}]}>
-      <Text color={Colors.black_01} typography={'action_xxs_bold'}>
+      <Text
+        color={Colors.black_01}
+        typography={'action_xxs_bold'}
+        accessibilityLabel={accessibilityLabel}>
         {formatTitle()}
       </Text>
     </View>

package/Badge/types.ts

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

package/Button/index.tsx

@@ -76,6 +76,8 @@ export interface ButtonProps extends TouchableOpacityProps {
   onPress: () => void;
 
   params?: any;
+
+  accessibilityLabelTitle?: string;
 }
 
 const Button: FC<ButtonProps> = ({
@@ -87,7 +89,9 @@ const Button: FC<ButtonProps> = ({
   iconLeft,
   loading = false,
   title = 'Button',
+  onPress,
   params,
+  accessibilityLabelTitle,
   ...rest
 }) => {
   const {theme, config} = useContext(ApplicationContext);
@@ -223,7 +227,11 @@ const Button: FC<ButtonProps> = ({
     const typography = getTypography();
     const textColor = getTextColor();
     return (
-      <Text typography={typography} color={textColor} numberOfLines={1}>
+      <Text
+        typography={typography}
+        color={textColor}
+        numberOfLines={1}
+        accessibilityLabel={accessibilityLabelTitle}>
         {title}
       </Text>
     );
@@ -309,7 +317,12 @@ const Button: FC<ButtonProps> = ({
       <TouchableOpacity
         {...rest}
         disabled={type === 'disabled'}
+        accessibilityState={{
+          ...rest.accessibilityState,
+          disabled: type === 'disabled',
+        }}
         activeOpacity={0.5}
+        onPress={onPress}
         style={buttonStyle}>
         {renderLeading()}
         {renderTitle()}

package/CheckBox/index.tsx

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

package/CheckBox/types.ts

@@ -1,4 +1,4 @@
-import {TouchableOpacityProps} from 'react-native';
+import {TouchableOpacityProps, ViewStyle} from 'react-native';
 
 export interface CheckBoxProps extends TouchableOpacityProps {
   /**
@@ -31,7 +31,15 @@ export interface CheckBoxProps extends TouchableOpacityProps {
   indeterminate?: boolean;
 
   /**
-   * Optional. Represents the accessibility label for the CheckBox.
+   * Optional. Used to apply custom styling to the CheckBox component.
+   * Accepts an object of style properties.
    */
+  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 = {},
-  ...props
+  accessibilityLabel,
 }) => {
   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,4 +24,9 @@ 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,9 +26,6 @@ export interface IconButtonProps extends TouchableOpacityProps {
    */
   size?: 'large' | 'small';
 
-  /**
-   * Optional. Params for tracking
-   */
   params?: any;
 }
 
@@ -36,7 +33,9 @@ const IconButton: React.FC<IconButtonProps> = ({
   type = 'primary',
   icon,
   size,
+  onPress,
   params,
+  accessibilityLabel,
   ...rest
 }) => {
   const {theme} = useContext(ApplicationContext);
@@ -125,7 +124,9 @@ const IconButton: React.FC<IconButtonProps> = ({
       <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,13 +1,12 @@
 import React, {useContext, useRef, useState} from 'react';
 import {StyleSheet, View} from 'react-native';
-import FastImage from 'react-native-fast-image';
+import FastImage, {Source} 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';
 
@@ -25,7 +24,7 @@ const Image: React.FC<ImageProps> = ({
   const [status, setStatus] = useState<Status>('success');
 
   const test: any = {
-    accessibilityLabel: accessibilityLabel || `img|${getImageName(source)}`,
+    accessibilityLabel: accessibilityLabel || `img|${(source as Source).uri}`,
   };
 
   /**

package/Input/Input.tsx

@@ -13,7 +13,11 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {ApplicationContext, ComponentContext} from '../Application';
+import {
+  ApplicationContext,
+  ComponentContext,
+  setAutomationID,
+} from '../Application';
 import {Icon} from '../Icon';
 import {Loader} from '../Loader';
 import {exportFontFamily, Text} from '../Text';
@@ -37,6 +41,9 @@ const Input = forwardRef(
       onBlur,
       onFocus,
       errorMessage,
+      icon,
+      iconColor,
+      onPressIcon,
       trailing,
       trailingColor,
       onPressTrailing,
@@ -53,10 +60,16 @@ const Input = forwardRef(
       style,
       params,
       hintText,
+      accessibilityLabel,
       editable = true,
       onPressFloatingIcon,
       onPressLeadingIcon,
       showClearIcon = true,
+      accessibilityLabelErrorMessage,
+      accessibilityLabelFloatingValue,
+      accessibilityLabelLeadingIcon,
+      accessibilityLabelTrailingIcon,
+      accessibilityLabelClearIcon,
       ...props
     }: InputProps,
     ref
@@ -113,7 +126,8 @@ const Input = forwardRef(
         return (
           <TouchableOpacity
             onPress={() => setSecureTextInput(!secureTextInput)}
-            style={styles.icon}>
+            style={styles.icon}
+            accessibilityLabel={accessibilityLabelTrailingIcon}>
             <Icon
               color={color}
               size={24}
@@ -124,17 +138,24 @@ const Input = forwardRef(
           </TouchableOpacity>
         );
       }
-      if (trailing) {
+      if (icon || trailing) {
         const renderIconTouchable = (icon: ReactNode) => {
           return (
-            <TouchableOpacity onPress={onPressTrailing} style={styles.icon}>
+            <TouchableOpacity
+              onPress={onPressTrailing ?? onPressIcon}
+              style={styles.icon}>
               {icon}
             </TouchableOpacity>
           );
         };
-        if (trailing?.includes('_') || trailing?.includes('http')) {
+        const trailingValue = icon || trailing;
+        if (trailingValue?.includes('_') || trailingValue?.includes('http')) {
           return renderIconTouchable(
-            <Icon color={color} source={trailing} size={24} />
+            <Icon
+              color={color}
+              source={(icon || trailing) as string}
+              size={24}
+            />
           );
         }
         return renderIconTouchable(
@@ -142,7 +163,7 @@ const Input = forwardRef(
             typography="action_xs_bold"
             color={color ?? theme.colors.primary}
             numberOfLines={1}>
-            {trailing!.substring(0, 15)}
+            {trailingValue!.substring(0, 15)}
           </Text>
         );
       }
@@ -156,7 +177,7 @@ const Input = forwardRef(
       const secure = secureTextInput && secureTextEntry;
       let textColor = theme.colors.text.default;
       let placeholderColor = theme.colors.text.hint;
-      let iconTintColor = trailingColor;
+      let iconTintColor = trailingColor ?? iconColor;
 
       if (disabled) {
         textColor = disabledColor;
@@ -179,11 +200,14 @@ const Input = forwardRef(
             required={required}
             floatingIcon={floatingIcon}
             onPress={onPressFloatingIcon}
+            accessibilityLabel={accessibilityLabelFloatingValue}
           />
           <View style={styles.inputView}>
             {!!leadingIcon && (
               <View style={styles.leadingIconContainer}>
-                <TouchableOpacity onPress={onPressLeadingIcon}>
+                <TouchableOpacity
+                  onPress={onPressLeadingIcon}
+                  accessibilityLabel={accessibilityLabelLeadingIcon}>
                   <Icon
                     color={leadingIconColor}
                     source={leadingIcon}
@@ -194,6 +218,11 @@ const Input = forwardRef(
             )}
             <TextInput
               {...props}
+              {...setAutomationID(accessibilityLabel)}
+              accessibilityState={{
+                ...props.accessibilityState,
+                disabled: disabled,
+              }}
               editable={editable && !disabled}
               secureTextEntry={secure}
               textAlignVertical="center"
@@ -222,7 +251,8 @@ const Input = forwardRef(
             {showClearIcon && focused && haveValue && (
               <TouchableOpacity
                 style={styles.iconWrapper}
-                onPress={onClearText}>
+                onPress={onClearText}
+                accessibilityLabel={accessibilityLabelClearIcon}>
                 <Icon
                   source="24_navigation_close_circle_full"
                   size={16}
@@ -260,6 +290,7 @@ const Input = forwardRef(
             errorMessage={errorMessage}
             errorSpacing={errorSpacing}
             hintText={hintText}
+            accessibilityLabel={accessibilityLabelErrorMessage}
           />
         </View>
       </ComponentContext.Provider>

package/Input/InputDropDown.tsx

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

package/Input/InputMoney.tsx

@@ -37,6 +37,9 @@ const InputMoney = forwardRef(
       onBlur,
       onFocus,
       errorMessage,
+      icon,
+      iconColor,
+      onPressIcon,
       trailing,
       trailingColor,
       onPressTrailing,
@@ -47,12 +50,15 @@ const InputMoney = forwardRef(
       style,
       params,
       defaultValue = '',
+      accessibilityLabel,
       hintText,
       value: _value,
       onPressFloatingIcon,
       placeholder = '0đ',
       currency = 'đ',
       showClearIcon = true,
+      accessibilityLabelErrorMessage,
+      accessibilityLabelFloatingValue,
       ...props
     }: InputMoneyProps,
     ref
@@ -115,7 +121,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;
+      let iconTintColor = trailingColor ?? iconColor;
 
       if (disabled) {
         textColor = disabledColor;
@@ -138,10 +144,16 @@ 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'}
@@ -175,10 +187,10 @@ const InputMoney = forwardRef(
             )}
             <RenderTrailing
               color={iconTintColor}
-              icon={trailing}
+              icon={icon}
               trailing={trailing}
               onPressTrailing={onPressTrailing}
-              onPressIcon={onPressTrailing}
+              onPressIcon={onPressIcon}
               loading={loading}
             />
           </View>
@@ -212,6 +224,7 @@ const InputMoney = forwardRef(
             errorMessage={errorMessage}
             errorSpacing={errorSpacing}
             hintText={hintText}
+            accessibilityLabel={accessibilityLabelErrorMessage}
           />
         </View>
       </ComponentContext.Provider>

package/Input/InputOTP.tsx

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

package/Input/InputSearch.tsx

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

package/Input/common.tsx

@@ -22,6 +22,7 @@ type FloatingViewProps = {
   required?: boolean;
   style?: ViewStyle;
   onPress?: (e: GestureResponderEvent) => void;
+  accessibilityLabel?: string;
 };
 
 type TrailingProps = {
@@ -80,7 +81,8 @@ export const ErrorView: FC<{
   errorMessage?: string;
   errorSpacing?: boolean;
   hintText?: string;
-}> = ({errorMessage, errorSpacing, hintText}) => {
+  accessibilityLabel?: string;
+}> = ({errorMessage, errorSpacing, hintText, accessibilityLabel}) => {
   const {theme} = useContext(ApplicationContext);
   const errorColor = theme.colors.error.primary;
   const hintColor = theme.colors.text.hint;
@@ -98,6 +100,7 @@ export const ErrorView: FC<{
         <Text
           style={Styles.flex}
           color={errorMessage ? errorColor : hintColor}
+          accessibilityLabel={accessibilityLabel}
           typography={'description_default_regular'}>
           {errorMessage ?? hintTextDefault}
         </Text>
@@ -118,6 +121,7 @@ export const FloatingView: FC<FloatingViewProps> = ({
   required,
   style,
   onPress,
+  accessibilityLabel,
 }) => {
   const {theme} = useContext(ApplicationContext);
 
@@ -139,7 +143,10 @@ export const FloatingView: FC<FloatingViewProps> = ({
           },
           style,
         ]}>
-        <Text color={floatingTextColor} typography={'label_s_medium'}>
+        <Text
+          color={floatingTextColor}
+          typography={'label_s_medium'}
+          accessibilityLabel={accessibilityLabel}>
           {floatingValue}
           {required && (
             <Text

package/Input/index.tsx

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

package/Layout/Card.tsx

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

package/Layout/Section.tsx

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

package/Radio/index.tsx

@@ -15,7 +15,9 @@ const Radio: FC<RadioProps> = ({
   label,
   style,
   params,
-  ...props
+  accessibilityLabel,
+  accessibilityLabelText,
+  accessibilityState,
 }) => {
   const {theme} = useContext(ApplicationContext);
   const selected = value === groupValue;
@@ -49,9 +51,10 @@ const Radio: FC<RadioProps> = ({
         action: 'click',
       }}>
       <TouchableOpacity
-        {...props}
-        disabled={disabled}
+        accessibilityLabel={accessibilityLabel}
+        accessibilityState={accessibilityState}
         onPress={onChange}
+        disabled={disabled}
         style={[
           style,
           {
@@ -68,7 +71,10 @@ const Radio: FC<RadioProps> = ({
           ]}
         />
         {!!label && (
-          <Text typography={'body_default_regular'} style={styles.radioText}>
+          <Text
+            typography={'body_default_regular'}
+            style={styles.radioText}
+            accessibilityLabel={accessibilityLabelText}>
             {label}
           </Text>
         )}
@@ -78,3 +84,4 @@ const Radio: FC<RadioProps> = ({
 };
 
 export {Radio};
+export type {RadioProps};

package/Radio/types.ts

@@ -1,4 +1,4 @@
-import {TouchableOpacityProps} from 'react-native';
+import {TouchableOpacityProps, ViewStyle} from 'react-native';
 
 export interface RadioProps extends TouchableOpacityProps {
   /**
@@ -7,6 +7,12 @@ 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.
    */
@@ -25,7 +31,15 @@ export interface RadioProps extends TouchableOpacityProps {
   groupValue: any;
 
   /**
-   * Optional. params for tracking
+   * `style`: Optional. Used to apply custom styling to the Radio component.
+   * Accepts an object of style properties.
    */
+  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,
-  ...props
+  accessibilityLabel,
 }) => {
   const circleBackgroundColor = value ? Colors.black_01 : Colors.black_03;
   const circleAlign = value ? 'flex-end' : 'flex-start';
@@ -31,8 +31,8 @@ const Switch: FC<SwitchProps> = ({
         action: 'click',
       }}>
       <TouchableOpacity
-        {...props}
         disabled={disabled}
+        accessibilityLabel={accessibilityLabel}
         onPress={() => onChange?.(!value)}
         style={[
           style,

package/Switch/types.ts

@@ -1,4 +1,4 @@
-import {TouchableOpacityProps} from 'react-native';
+import {TouchableOpacityProps, ViewStyle} from 'react-native';
 
 export interface SwitchProps extends TouchableOpacityProps {
   /**
@@ -13,7 +13,16 @@ export interface SwitchProps extends TouchableOpacityProps {
   onChange: (value: boolean) => void;
 
   /**
-   * Optional. params for tracking
+   * `disabled`: Optional. If `true`, the user won't be able to interact with the Switch component.
+   * Defaults to `false` if not provided.
    */
+  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,6 +31,8 @@ const Tag: FC<TagProps> = ({
   size = 'large',
   style,
   customColor,
+  accessibilityLabelContainer,
+  accessibilityLabelText,
 }) => {
   let labelColor = textColor[color];
   let tagColor = backgroundColor[color];
@@ -60,7 +62,9 @@ const Tag: FC<TagProps> = ({
   }
 
   return (
-    <View style={[style, sizeStyle, {backgroundColor: tagColor}]}>
+    <View
+      style={[style, sizeStyle, {backgroundColor: tagColor}]}
+      accessibilityLabel={accessibilityLabelContainer}>
       {!!icon && (
         <Icon
           style={styles.icon}
@@ -69,7 +73,10 @@ const Tag: FC<TagProps> = ({
           color={labelColor}
         />
       )}
-      <Text color={labelColor} typography={'label_s_medium'}>
+      <Text
+        color={labelColor}
+        typography={'label_s_medium'}
+        accessibilityLabel={accessibilityLabelText}>
         {label}
       </Text>
     </View>

package/Tag/types.ts

@@ -33,4 +33,16 @@ 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/foundation",
-  "version": "0.113.0-optimize.6",
+  "version": "0.113.0-optimize.8",
   "description": "React Native Component Kits",
   "main": "index.ts",
   "scripts": {},