Add invalidHint to phoneNumberInput (#1837)

Co-authored-by: Steve Hobbs <[email protected]>
auth0 · Apr 2, 2020 · 1faf464 · 1faf464
1 parent 3fbb95c
commit 1faf464
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 4 deletions.
diff --git a/src/__tests__/field/__snapshots__/phone_number_pane.test.jsx.snap b/src/__tests__/field/__snapshots__/phone_number_pane.test.jsx.snap
@@ -33,6 +33,7 @@ exports[`PhoneNumberPane disables input when submitting 1`] = `
   <div
     data-__type="phone_number_input"
     data-disabled={true}
+    data-invalidHint={undefined}
     data-isValid={false}
     data-onChange={[Function]}
     data-placeholder="placeholder"
@@ -55,6 +56,7 @@ exports[`PhoneNumberPane renders correctly 1`] = `
   <div
     data-__type="phone_number_input"
     data-disabled={false}
+    data-invalidHint={undefined}
     data-isValid={false}
     data-onChange={[Function]}
     data-placeholder="placeholder"
@@ -77,6 +79,7 @@ exports[`PhoneNumberPane sets isValid as true when \`isFieldVisiblyInvalid\` is
   <div
     data-__type="phone_number_input"
     data-disabled={false}
+    data-invalidHint={undefined}
     data-isValid={true}
     data-onChange={[Function]}
     data-placeholder="placeholder"
@@ -104,6 +107,7 @@ exports[`PhoneNumberPane shows header when instructions are available 1`] = `
   <div
     data-__type="phone_number_input"
     data-disabled={false}
+    data-invalidHint={undefined}
     data-isValid={false}
     data-onChange={[Function]}
     data-placeholder="placeholder"

diff --git a/src/engine/passwordless/social_or_phone_number_login_screen.jsx b/src/engine/passwordless/social_or_phone_number_login_screen.jsx
@@ -31,6 +31,7 @@ const Component = ({ i18n, model }) => {
       instructions={i18n.html(phoneNumberInstructionsI18nKey)}
       lock={model}
       placeholder={i18n.str('phoneNumberInputPlaceholder')}
+      invalidHint={i18n.str('phoneNumberInputInvalidHint')}
     />
   ) : null;
 

diff --git a/src/field/phone-number/phone_number_pane.jsx b/src/field/phone-number/phone_number_pane.jsx
@@ -20,7 +20,7 @@ export default class PhoneNumberPane extends React.Component {
   }
 
   render() {
-    const { instructions, lock, placeholder } = this.props;
+    const { instructions, lock, placeholder, invalidHint } = this.props;
     const headerText = instructions || null;
     const header = headerText && <p>{headerText}</p>;
 
@@ -38,6 +38,7 @@ export default class PhoneNumberPane extends React.Component {
         <PhoneNumberInput
           value={c.phoneNumber(lock)}
           isValid={!c.isFieldVisiblyInvalid(lock, 'phoneNumber')}
+          invalidHint={invalidHint}
           onChange={::this.handlePhoneNumberChange}
           placeholder={placeholder}
           disabled={l.submitting(lock)}
@@ -50,5 +51,6 @@ export default class PhoneNumberPane extends React.Component {
 PhoneNumberPane.propTypes = {
   instructions: PropTypes.element,
   lock: PropTypes.object.isRequired,
-  placeholder: PropTypes.string.isRequired
+  placeholder: PropTypes.string.isRequired,
+  invalidHint: PropTypes.string
 };
diff --git a/src/ui/input/phone_number_input.jsx b/src/ui/input/phone_number_input.jsx
@@ -11,11 +11,17 @@ export default class PhoneNumberInput extends React.Component {
   }
 
   render() {
-    const { isValid, ...props } = this.props;
+    const { isValid, invalidHint, ...props } = this.props;
     const { focused } = this.state;
 
     return (
-      <InputWrap focused={focused} isValid={isValid} name="phone-number" icon={svg}>
+      <InputWrap
+        focused={focused}
+        isValid={isValid}
+        invalidHint={invalidHint}
+        name="phone-number"
+        icon={svg}
+      >
         <input
           ref="input"
           type="tel"
@@ -26,6 +32,9 @@ export default class PhoneNumberInput extends React.Component {
           onBlur={::this.handleBlur}
           aria-label="Telephone number"
           aria-invalid={!isValid}
+          aria-describedby={
+            !isValid && invalidHint ? `auth0-lock-error-msg-phone-number` : undefined
+          }
           {...props}
         />
       </InputWrap>