Merge pull request #26 from OLIOEX/add-accessibility-labels

Add Accessibility Label to PhoneInput
rili-live · Nov 4, 2021 · ce1b2a5 · ce1b2a5
2 parents 946c7c4 + 5e88c98
commit ce1b2a5
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/src/PhoneInput.tsx b/src/PhoneInput.tsx
@@ -27,7 +27,7 @@ export default class PhoneInput<TextComponentType extends React.ComponentType =
         } = this.props;
 
         const {
-            countriesList, disabled,
+            countriesList, disabled
         } = this.props;
 
         if (countriesList) {
@@ -205,6 +205,10 @@ export default class PhoneInput<TextComponentType extends React.ComponentType =
             : number;
     }
 
+    getAccessibilityLabel() {
+        return this.props.accessibilityLabel || 'Telephone input';
+    }
+
     focus() {
         this.inputPhone.focus();
     }
@@ -236,6 +240,7 @@ export default class PhoneInput<TextComponentType extends React.ComponentType =
                         ref={(ref) => {
                             this.inputPhone = ref;
                         }}
+                        accessibilityLabel={this.getAccessibilityLabel()}
                         editable={!disabled}
                         autoCorrect={false}
                         style={[styles.text, this.props.textStyle]}

diff --git a/src/typings/index.d.ts b/src/typings/index.d.ts
@@ -54,6 +54,10 @@ export interface ReactNativeCountryPickerState {
 }
 
 export interface ReactNativePhoneInputProps<TextComponentType extends React.ComponentType = typeof TextInput> {
+    /**
+     * Override accessibility label for telephone input
+     */
+    accessibilityLabel?: string;
     /**
      * Format input while typing
      */