Simplify profile avatar setting logic

[NikkiWines]

Details

Update to the logic introduced in #7366 and #7785. Simplifies things a bit.

Note that inconsistent Save button coloring on web and desktop appears to be an existing regression

cc: @mananjadhav

Fixed Issues

N/A found while looking at this regression #7784

Tests

1. Log into a new account on New Expensify and navigate to the profile settings
2. Click on the profile picture and upload a photo
3. Confirm the photo preview updates immediately
4. Click the save button and confirm the photo saves as expected
5. Modify your user's first and last name and click save
6. Confirm the name is updated and that your profile photo is maintained
7. Click on the profile picture and remove the photo
8. Confirm the photo preview updates immediately to a default avatar
9. Click save and confirm your profile photo is successfully updated

QA Steps

Same as tests

Tested On

• Web
• Mobile Web
• Desktop
• iOS
• Android

Screenshots

Web

Screen.Recording.2022-02-16.at.16.43.59.mov

Mobile Web

Screen.Recording.2022-02-16.at.17.46.32.mov

Desktop

Screen.Recording.2022-02-16.at.17.43.14.mov

iOS

Screen.Recording.2022-02-16.at.17.23.36.mov

Android

Android device is super slow, will work on getting a video tomorrow

[mananjadhav]

Saw the changes @NikkiWines, yeah this simplified the logic a lot! Thanks for sharing this.

[mananjadhav]

Suggested change

	// If the user removed their profile photo, replace it accoridngly with the default avatar
	// If the user removed their profile photo, replace it accordingly with the default avatar

[NikkiWines]

oops 😄

[timszot]

LGTM once the spelling is corrected.

[NikkiWines]

Updated!

[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 @timszot 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 ✅

[SumitDiyora]

Issue 1 -

Title - [Medium]: Chrome+Jaws: Screen reader : Status message not announced for screen reader users.
Actual - Status message 'Your profile was successfully saved' is not announced by the screen reader.
Expected - Status message 'Your profile was successfully saved' should announce by the screen reader.
WCAG failure - 4.1.3
Reproducible in staging?: - Yes
Version Number: - v1.1.40-2
Platforms - Web, Desktop, Mobile-web, iOS, Android
Suggested Fix - Specify ARIA role "status" and set aria-live as "polite" for the status message. This will ensure that screen reader will identify the message for their users as soon as it is displayed on the page.

7789_Status.message.is.not.being.announced.by.screen.reader.after.activating.the.Save.control.mp4

Issue 2 -

Title - [Medium]: Chrome: Insufficient color contrast for form controls.
Actual - Background/foreground color combinations with an insufficient contrast ratio was found on the screen. For instance, the #ECECEC border of "First name", "Last name", "Preferred pronouns" and "Timezone" form fields has a contrast ratio of 1.2:1 with the #FFFFFF background.
Expected - The border of the input field should have a contrast ratio against the page background of 3:1 or greater.
WCAG failure - 1.4.11
Reproducible in staging? - Yes
Version Number: - v1.1.40-2
Platforms - Web, Desktop, Mobile-web, iOS, Android
Suggested Fix - Ensure that the color contrast for all user interface controls in their default as well as active, hover, and focus states is 3:1 with the adjacent content.

Issue 3 -

Title - [High]: Chrome+Jaws : Screen reader: Role not defined for "back" control.
Actual - Role is not defined for the "back (<)". interactive element. This made it difficult for screen reader users to access the functionality associated with it. Additionally, the label is not defined for the mentioned interactive element in the source code of the page.
Expected - When a role is defined appropriately for the interactive element, the screen reader user will interact with the element effectively.
WCAG failure - 4.1.2, 1.1.1
Reproducible in staging? - Yes
Version Number: - v1.1.40-2
Platforms - Web, Desktop, Mobile-web, iOS, Android
Suggested Fix - Ensure that all the page functionality is available for all users irrespective of the device being used.
Apply the following changes:

• Specify role="button" for the 'div' element containing the "back (<)" control.
• Provide aria-label value such as "back" for the 'div' element containing the "back (<)" control.

Issue 4 -

Title - [High]: Chrome+Jaws: Screen reader: Role is not defined for control.
Actual - Role is not defined for the "Save" control. This made it difficult for screen reader users to access the functionality associated with it.
Expected - Role should be defined as a 'button' for the "Save" control.
WCAG failure - 4.1.2
Reproducible in staging?: - Yes
Version Number: - v1.1.40-2
Platforms - Web, Desktop, Mobile-web, iOS, Android
Suggested Fix - Ensure that all the page functionality is available for all users irrespective of the device being used.
Apply the following changes:

• Specify role="button" for the 'div' element containing the "Save" control.

Issue 5 -

Title - [Medium] Chrome: Color Contrast: Insufficient color contrast for 'Save' control.
Actual - Background/foreground color combinations with an insufficient contrast ratio was found on control. For instance, the #03D47C "Save" control has an insufficient color contrast ratio of 2.0.1 with a #FFFFFF background.
Expected - The "Save" control should have a contrast ratio against the page background of 4.5:1 or greater..
WCAG failure - 1.4.3
Reproducible in staging?: - Yes
Version Number: - v1.1.40-2
Platforms - Web, Desktop, Mobile-web, iOS, Android
Suggested Fix - Ensure that each text/background color combination presents a contrast ratio of at least 4.5:1.

[NikkiWines]

@SumitDiyora if possible could you make this a new issue for these bugs following this template so that they can easily be picked up and worked on? Thank you!