Improvement Payment options Padding

[Santhosh-Sellavel]

Details

Fixed Issues

$ #5906

Tests & QA Steps

1. Go to Settings -> Payments
2. Click on Add Payment method
3. In Web / Desktop, the payment options width will be increased now.

Tested On

• Web
• Desktop

To Ensure Any UI Breaks - Tests well!

• Mobile Web
• iOS
• Android

Screenshots

Web

Desktop

iOS

Mobile Web

Android

[deetergp]

Looks good, thanks!

[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 @deetergp in version: 1.1.13-3 🚀

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

[parasharrajat]

This PR is failing for #6232.

[OSBotify]

🚀 Deployed to production by @Jag96 in version: 1.1.14-4 🚀

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

[ogumen]

Accessibility issues found in this PR:
Web / mWeb

1. The visual headings Payments and Payment methods are not programmatically implemented as headings - failure of WCAG SC 1.3.1, similar to [low] JAWS+Chrome: Many Pages: Visual headings are not announced as such #5458
   
2. The grey buttons on white background do not meet the minimum color contrast requirements of 3.00:1. The buttons use grey #C6C9CA which gives a color contrast ratio of 1.66:1 against white #FFFFFF - failure of WCAG SC 1.4.11, similar to [med] Color Contrast: Many Pages: Grey icons against white background fail contrast requirements #5506
3. The grey text "Account ending in..." does not meet the minimum contrast requirements of 4.50:1 for small text. The grey is #7D8B90 which gives a color contrast ratio of 3.51:1 against white #FFFFFF - failure of WCAG SC 1.4.3, similar to [low] Color Contrast: Many Pages: Grey text against white background fails contrast requirements #5503
   
4. The expandable "Add payment method" button does not announce its button role or collapsed/expanded state - failure of WCAG SC 4.1.2, similar to issue [high] JAWS+Chrome: Licenses: The expandable sections are announced with no role or state #5502
   
5. The payment options are announced with no button role - failure of WCAG SC 4.1.2, similar to [med] JAWS+Chrome: Many Pages: Multiple elements announced without button role #5446
   
   Web
6. The focus outline is not clear for payment options - failure of WCAG SC 2.4.7, similar to [low] Keyboard Navigation: Payments: Visual focus indicator is not fully visible on several controls #5606
   https://user-images.githubusercontent.com/88733897/142780160-39571953-d852-44f9-84a4-147b0d190869.mp4
   Android
7. The focus is not set to the first payment option in the bottom overlay once the "Add payment method" button is activated - failure of WCAG SC 2.4.3
   https://user-images.githubusercontent.com/88733897/142780266-5bb89a2c-7eb2-4313-b818-d44d491a7039.mp4
8. The grey buttons on white background do not meet the minimum color contrast requirements of 3.00:1. The buttons use grey #C6C9CA which gives a color contrast ratio of 1.66:1 against white #FFFFFF - failure of WCAG SC 1.4.11
9. The grey text "Account ending in..." does not meet the minimum contrast requirements of 4.50:1 for small text. The grey is #7D8B90 which gives a color contrast ratio of 3.51:1 against white #FFFFFF - failure of WCAG SC 1.4.3