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

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> = ({
@@ -89,7 +91,7 @@ const Button: FC<ButtonProps> = ({
   title = 'Button',
   onPress,
   params,
-  accessibilityLabel,
+  accessibilityLabelTitle,
   ...rest
 }) => {
   const {theme, config} = useContext(ApplicationContext);
@@ -225,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>
     );
@@ -311,7 +317,10 @@ const Button: FC<ButtonProps> = ({
       <TouchableOpacity
         {...rest}
         disabled={type === 'disabled'}
-        accessibilityLabel={accessibilityLabel}
+        accessibilityState={{
+          ...rest.accessibilityState,
+          disabled: type === 'disabled',
+        }}
         activeOpacity={0.5}
         onPress={onPress}
         style={buttonStyle}>

package/CheckBox/index.tsx

@@ -15,6 +15,8 @@ const CheckBox: FC<CheckBoxProps> = ({
   indeterminate,
   params,
   accessibilityLabel,
+  accessibilityState,
+  accessibilityLabelLabel,
 }) => {
   const {theme} = useContext(ApplicationContext);
   const haveValue = value || indeterminate;
@@ -47,6 +49,7 @@ const CheckBox: FC<CheckBoxProps> = ({
       }}>
       <TouchableOpacity
         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

@@ -37,4 +37,9 @@ export interface CheckBoxProps extends TouchableOpacityProps {
   style?: ViewStyle;
 
   params?: any;
+
+  /**
+   * Optional. Represents the label for the CheckBox component.
+   */
+  accessibilityLabelLabel?: string;
 }

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';
@@ -61,6 +65,11 @@ const Input = forwardRef(
       onPressFloatingIcon,
       onPressLeadingIcon,
       showClearIcon = true,
+      accessibilityLabelErrorMessage,
+      accessibilityLabelFloatingValue,
+      accessibilityLabelLeadingIcon,
+      accessibilityLabelTrailingIcon,
+      accessibilityLabelClearIcon,
       ...props
     }: InputProps,
     ref
@@ -117,7 +126,8 @@ const Input = forwardRef(
         return (
           <TouchableOpacity
             onPress={() => setSecureTextInput(!secureTextInput)}
-            style={styles.icon}>
+            style={styles.icon}
+            accessibilityLabel={accessibilityLabelTrailingIcon}>
             <Icon
               color={color}
               size={24}
@@ -190,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}
@@ -205,7 +218,11 @@ const Input = forwardRef(
             )}
             <TextInput
               {...props}
-              accessibilityLabel={accessibilityLabel}
+              {...setAutomationID(accessibilityLabel)}
+              accessibilityState={{
+                ...props.accessibilityState,
+                disabled: disabled,
+              }}
               editable={editable && !disabled}
               secureTextEntry={secure}
               textAlignVertical="center"
@@ -234,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}
@@ -272,6 +290,7 @@ const Input = forwardRef(
             errorMessage={errorMessage}
             errorSpacing={errorSpacing}
             hintText={hintText}
+            accessibilityLabel={accessibilityLabelErrorMessage}
           />
         </View>
       </ComponentContext.Provider>

package/Input/InputDropDown.tsx

@@ -28,6 +28,10 @@ const InputDropDown = ({
   accessibilityLabel,
   hintText,
   multiline,
+  accessibilityLabelText,
+  accessibilityLabelTouchable,
+  accessibilityLabelErrorMessage,
+  accessibilityLabelFloatingValue,
 }: InputDropDownProps) => {
   const {theme} = useContext(ApplicationContext);
 
@@ -59,6 +63,7 @@ const InputDropDown = ({
           required={required}
           floatingIcon={floatingIcon}
           onPress={onPressFloatingIcon}
+          accessibilityLabel={accessibilityLabelFloatingValue}
         />
         <View style={styles.inputDropDownView}>
           {!!leadingIcon && (
@@ -83,7 +88,8 @@ const InputDropDown = ({
             <Text
               numberOfLines={multiline ? undefined : 1}
               typography={'body_default_regular'}
-              color={value ? textColor : placeholderColor}>
+              color={value ? textColor : placeholderColor}
+              accessibilityLabel={accessibilityLabelText}>
               {value || placeholder}
             </Text>
           </View>
@@ -112,12 +118,16 @@ const InputDropDown = ({
       <TouchableOpacity
         activeOpacity={0.6}
         onPress={onPress}
-        style={[style, styles.wrapper]}>
+        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

@@ -57,6 +57,8 @@ const InputMoney = forwardRef(
       placeholder = '0đ',
       currency = 'đ',
       showClearIcon = true,
+      accessibilityLabelErrorMessage,
+      accessibilityLabelFloatingValue,
       ...props
     }: InputMoneyProps,
     ref
@@ -142,11 +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'}
@@ -217,6 +224,7 @@ const InputMoney = forwardRef(
             errorMessage={errorMessage}
             errorSpacing={errorSpacing}
             hintText={hintText}
+            accessibilityLabel={accessibilityLabelErrorMessage}
           />
         </View>
       </ComponentContext.Provider>

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

@@ -131,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'> {
@@ -295,6 +325,18 @@ export interface InputDropDownProps
    * Optional. Represents the data for the dropdown.
    */
   multiline?: boolean;
+
+  /**
+   * Optional. Represents the accessibility label for the InputDropDown component.
+   * This is read out by screen readers.
+   */
+  accessibilityLabelText?: string;
+
+  /**
+   * Optional. Represents the accessibility Touchable for the InputDropDown component.
+   * This is read out by screen readers.
+   */
+  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

@@ -16,6 +16,8 @@ const Radio: FC<RadioProps> = ({
   style,
   params,
   accessibilityLabel,
+  accessibilityLabelText,
+  accessibilityState,
 }) => {
   const {theme} = useContext(ApplicationContext);
   const selected = value === groupValue;
@@ -50,6 +52,7 @@ const Radio: FC<RadioProps> = ({
       }}>
       <TouchableOpacity
         accessibilityLabel={accessibilityLabel}
+        accessibilityState={accessibilityState}
         onPress={onChange}
         disabled={disabled}
         style={[
@@ -67,10 +70,18 @@ const Radio: FC<RadioProps> = ({
             {marginRight: label ? Spacing.S : 0},
           ]}
         />
-        {!!label && <Text typography={'body_default_regular'} style={styles.radioText}>{label}</Text>}
+        {!!label && (
+          <Text
+            typography={'body_default_regular'}
+            style={styles.radioText}
+            accessibilityLabel={accessibilityLabelText}>
+            {label}
+          </Text>
+        )}
       </TouchableOpacity>
     </ComponentContext.Provider>
   );
 };
 
 export {Radio};
+export type {RadioProps};

package/Radio/types.ts

@@ -37,4 +37,9 @@ export interface RadioProps extends TouchableOpacityProps {
   style?: ViewStyle;
 
   params?: any;
+
+  /**
+   * `accessibilityLabelText`: Optional. Represents the label for the Radio Label component.
+   */
+  accessibilityLabelText?: string;
 }

package/package.json

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