react-native-international-phone-number 0.9.2 → 0.9.3

package/README.md

@@ -46,7 +46,8 @@
 - 🎨 Lib with UI customizable;
 - 🌎 Phone Input Mask according with the selected country;
 - 👨‍💻 Functional and class component support;
-- 🈶 22 languages supported.
+- 🈶 22 languages supported;
+- ♿ Accessibility.
 
 <br>
 
@@ -96,6 +97,7 @@
 - [Lib Functions](#functions)
 - [Supported languages](#🎌-supported-languages-🎌)
 - [Testing](#testing)
+- [Accessibility](#accessibility)
 - [Contributing](#contributing)
 - [License](#license)
 
@@ -854,8 +856,34 @@ export default function App() {
 When utilizing this package, you may need to target the PhoneInput component in your automated tests. To facilitate this, we provide a testID props for the PhoneInput component. The testID can be integrated with popular testing libraries such as @testing-library/react-native or Maestro. This enables you to efficiently locate and interact with PhoneInput elements within your tests, ensuring a robust and reliable testing experience.
 
 ```jsx
-// Assuming PhoneInput has testID="phone-number"
-const phoneInput = getByTestId('phone-number-flag');
+// Assuming PhoneInput has testID="countryPicker"
+const phoneInput = getByTestId('countryPickerPhoneInput');
+const flagContainerButton = getByTestId(
+  'countryPickerFlagContainerButton'
+);
+```
+
+Others testID provided inside countries modal:
+
+- The wrapping `FlatList` component: 'countryCodesPickerFlatList'
+- The country search `TextInput` component: 'countryCodesPickerSearchInput'
+- The country button (`TouchableOpacity`) component: 'countryCodesPickerCountryButton'
+
+<br>
+
+## Accessibility
+
+Ensure your app is inclusive and usable by everyone by leveraging built-in React Native accessibility features. The accessibility props are covered by this package. Use the default accessibility props or costumize your own:
+
+```jsx
+<PhoneInput
+  accessibilityRoleFlagContainerButton="button"
+  accessibilityLabelFlagContainerButton="Countries button"
+  accessibilityHintFlagContainerButton="Click to open the countries modal"
+  accessibilityRolePhoneInput="input"
+  accessibilityLabelPhoneInput="Phone Number input"
+  accessibilityHintPhoneInput="Write the phone number"
+/>
 ```
 
 <br>

package/lib/constants/countries.js

@@ -333,7 +333,7 @@ export const countries = [
       zh: '阿根廷',
       tr: 'Arjantin',
     },
-    phoneMasks: ['### ### ####'],
+    phoneMasks: ['### ### ####', '# ## #### ####', '# ### #### ####'],
   },
   {
     callingCode: '+1',
@@ -3378,7 +3378,7 @@ export const countries = [
       en: 'Jordan',
       ar: 'الأردن',
       es: 'Jordania',
-      fr: 'Jordan',
+      fr: 'Jordanie',
       he: 'ירדן',
       it: 'Giordania',
       jp: 'ヨルダン',
@@ -5531,7 +5531,7 @@ export const countries = [
       en: 'Portugal',
       ar: 'البرتغال',
       es: 'Portugal',
-      fr: 'Le Portugal',
+      fr: 'Portugal',
       he: 'פורטוגל',
       it: 'Portogallo',
       jp: 'ポルトガ ル',
@@ -6460,7 +6460,7 @@ export const countries = [
       en: 'Togo',
       ar: 'توغو',
       es: 'Togo',
-      fr: 'Aller',
+      fr: 'Togo',
       he: 'טוגו',
       it: 'Andare',
       jp: 'トーゴ',

package/lib/index.js

@@ -74,6 +74,12 @@ const PhoneInput = forwardRef(
       rtl,
       allowZeroAfterCallingCode,
       testID,
+      accessibilityRoleFlagContainerButton,
+      accessibilityLabelFlagContainerButton,
+      accessibilityHintFlagContainerButton,
+      accessibilityRolePhoneInput,
+      accessibilityLabelPhoneInput,
+      accessibilityHintPhoneInput,
       ...rest
     },
     ref
@@ -130,6 +136,12 @@ const PhoneInput = forwardRef(
         rtl,
         allowZeroAfterCallingCode,
         testID,
+        accessibilityRoleFlagContainerButton,
+        accessibilityLabelFlagContainerButton,
+        accessibilityHintFlagContainerButton,
+        accessibilityRolePhoneInput,
+        accessibilityLabelPhoneInput,
+        accessibilityHintPhoneInput,
         ...rest,
       },
     };
@@ -343,10 +355,7 @@ const PhoneInput = forwardRef(
       // Create a separate constant for each part of the component
       const touchableStart = (
         <>
-          <Text
-            testID={`${testID}-flag`}
-            style={getFlagStyle(phoneInputStyles?.flag)}
-          >
+          <Text style={getFlagStyle(phoneInputStyles?.flag)}>
             {countryValue?.flag}
           </Text>
           {customCaret || (
@@ -389,6 +398,22 @@ const PhoneInput = forwardRef(
 
       const touchablePart = (
         <TouchableOpacity
+          testID={
+            testID
+              ? `${testID}FlagContainerButton`
+              : `countryPickerFlagContainerButton`
+          }
+          accessibillityRole={
+            accessibilityRoleFlagContainerButton || 'button'
+          }
+          accessibilityLabel={
+            accessibilityLabelFlagContainerButton ||
+            'Countries button'
+          }
+          accessibilityHint={
+            accessibilityHintFlagContainerButton ||
+            'Click to open the countries modal'
+          }
           activeOpacity={disabled || modalDisabled ? 1 : 0.6}
           onPress={() =>
             disabled || modalDisabled ? null : setShow(true)
@@ -431,8 +456,18 @@ const PhoneInput = forwardRef(
           editable={!disabled}
           value={inputValue}
           onChangeText={onChangeText}
-          keyboardType="numeric"
+          keyboardType="number-pad"
           ref={textInputRef}
+          testID={
+            testID ? `${testID}PhoneInput` : `countryPickerPhoneInput`
+          }
+          accessibillityRole={accessibilityRolePhoneInput || 'input'}
+          accessibilityLabel={
+            accessibilityLabelPhoneInput || 'Phone Number input'
+          }
+          accessibilityHint={
+            accessibilityHintPhoneInput || 'Write the phone number'
+          }
           {...rest}
         />
       );
@@ -488,7 +523,6 @@ const PhoneInput = forwardRef(
               showOnly={showOnly}
               excludedCountries={excludedCountries}
               popularCountries={popularCountries}
-              testID={testID}
               ListHeaderComponent={({ countries, lang, onPress }) => {
                 return (
                   <View>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-international-phone-number",
   "author": "AstrOOnauta (https://github.com/AstrOOnauta)",
-  "version": "0.9.2",
+  "version": "0.9.3",
   "description": "International mobile phone input component with mask for React Native",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",