fix: Secondary login page

[parasharrajat]

Details

This PR also update the behaviour of phone input for Add Login page.

1. It will allow the user to enter any text into the input previously it was only accepting the + and digits.

I noticed that there are no frontend errors for phone input on this page. error is thrown after it is received from the backend.

Fixed Issues

$ #6414

Tests | QA Steps

1. Navigate to NewDot and login
2. Go to settings > profile
3. Tap add phone number
4. Input a phone number using any of symbols -, (, ) or spaces (e.g. +1 (222) 222 2222)

Tested On

• Web
• Mobile Web
• Desktop
• iOS
• Android

Screenshots

Web | Mobile Web | Desktop

iOS

Android

[chiragsalian]

LGTM

[chiragsalian]

I briefly tested this. So i'm unable to perform this,

Input a phone number using any of symbols -, (, ) or spaces (e.g. +1 (222) 222 2222)

On web. Is that expected?

[parasharrajat]

It should work on Web specially.

[chiragsalian]

Yup, sorry my bad. I realized shortly after i was on an incorrect branch. Retested properly and it works great. Thanks rajat.

[OSBotify]

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

[chiragsalian]

Oh we should have placed the CP-staging label. Let me see if I can CP it to staging.

[chiragsalian]

Manually CP'd to staging to fix blocker.

[OSBotify]

🚀 Cherry-picked to staging by @chiragsalian in version: 1.1.16-4 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

@Expensify/applauseleads please QA this PR and check it off on the deploy checklist if it passes.

[OSBotify]

🚀 Deployed to production by @roryabraham in version: 1.1.16-10 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

[OSBotify]

🚀 Deployed to staging by @chiragsalian in version: 1.1.16-11 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

[ogumen]

The accessibility issues related to this PR:

1. The initial focus upon opening Add phone number overlay is set to the Phone number text field instead of X (Close) button at the top of the overlay - failure of WCAG SC 2.4.3
   
2. The grey placeholders and labels on white background fail minimum contrast requirements of 4.50:1 for small text. The font size is 11pt, wont weight 400. The grey (#7D8B8F) on white (#FFFFFF) has a color contrast ratio of 3.52:1 - failure of WCAG SC 1.4.3
   
   
3. The grey buttons on white background fail minimum color contrast requirements of 3.00:1 against white background. The grey (#C6C9CA) on white (#FFFFFF) has a color contrast ratio of 1.66:1 - failure of WCAG SC 1.4.11
   
4. The Add phone number visual heading is not implemented semantically as a heading - failure of WCAG SC 1.3.1
   
5. The Back button is announced without label and role - failure of WCAG SC 4.1.2

Add.phone.number_Back.button.announced.unclearly.mp4

6. The Send Validation button is announced without role - failure of WCAG SC 4.1.2

Add.phone.number_Send.validation.button.announced.with.no.role.mp4

7. The blue visible focus outline for Send Validation button against green background fails minimum color contrast requirements of 3.00:1. The blue (#0185FF) against green (#03D47C) has a color contrast ratio of 1.84:1 - failure of WCAG SC 1.4.11
   

[OSBotify]

🚀 Deployed to production by @roryabraham in version: 1.1.17-7 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅