Refactor TextInputWithFocusStyles with TextInput

[parasharrajat]

Details

• TextInputWithFocusStyles

  Purpose of component

  1. This is just used to change some styles when input is in a focused state and vice-versa.

  Remove the extra component and use TextInput instead.

Fixed Issues

$ #6584
$ #7309

Tests | QA Steps

1. Open Request Money page.
2. Click Currency.
3. Check that you are able to search the currency from the search bar.

• Verify that no errors appear in the JS console

Tested On

• Web
• Mobile Web
• Desktop
• iOS
• Android

Screenshots

Web | Desktop

Mobile Web

iOS

Android

[rushatgabhane]

@puneetlath LGTM! Tests well on all platforms

[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.

[OSBotify]

🚀 Deployed to staging by @puneetlath in version: 1.1.40-0 🚀

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

[OSBotify]

🚀 Deployed to production by @yuwenmemon in version: 1.1.40-2 🚀

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

[Stutikuls]

Issue 1 -

Title- [Medium]: Chrome+ Jaws : Screen reader : Role is not defined for 'Indian Rupee sign icon' control.
Actual - Focus lands on the 'Indian Rupee sign icon' control then screen reader is reading "Indian Rupee sign".
Expected - Role = 'Button' should be defined for Indian Rupee sign icon control.
WCAG failure - 4.1.2
Reproducible in staging?: - Yes
Version Number: - v1.1.40-2
Platforms - Web (Chrome + Jaws), iOS, Mobile- web(iOS)

7721_Not.reading.the.role.for.the.icon.mp4

Issue 2 -

Title- [Medium]: Chrome+ Jaws : Screen reader : Screen reader is not provide information about the search result .
Actual - Screen reader is silent after finding the search results.
Expected -After finding the search results screen reader should provide the search results information like "1 result found".
WCAG failure - 4.1.3
Reproducible in staging?: - Yes
Version Number: - v1.1.40-2
Platforms - Web (Chrome + Jaws), iOS, Mobile- web(iOS), Desktop (MAC - Safari + Voiceover). Android (Talkback)

7721_Not.provide.the.search.result.information.mp4

Issue 3 -

Title- [High]: Safari + Voiceover : Keyboard : 'Indian rupees icon' control is not accessible using Swipe gesture.
Actual - 'Indian rupees icon' control is not accessible using Swipe gesture, focus does not land on the 'Indian rupees icon' control.
Expected -'Indian rupees icon' control should accessible using Swipe gesture.
WCAG failure - 2.1.1
Reproducible in staging?: - Yes
Version Number: - v1.1.40-2
Platforms - Mobile- web(iOS)

7721_Rupees.icon.is.not.accessible.using.swipe.gesture.mp4