[Accessibility] Phone number required field validation

[elizaan36]

Describe the bug
In WooPayments Settings, the phone number field was recently changed to required, however the validation behavior and notification style needs an update to follow accessibility best practices. When the new user completes KYC and thinks WooPayments setup is complete, they will be confused that an additional field is required in WooPayments settings.

This is also not the error notice we’ve been using in Woo, as you can see it’s quite different in style from the other notice on the page. There are problems with accessibility in the color contrast.

Steps to Reproduce

• Go to WooPayments Settings
• See required field for phone number

Expected behavior
As a quick fix, we should anchor the page to the error so the user knows what the problem is and how to fix it.

Also, if the phone number field is a requirement it should be added to the Stripe embedded component in onboarding, or should we create a new field in NOX?

Screenshots or video

Is design time needed?
Yes

Which areas does it impact?
WooPayments Settings

Additional context
Additional context. cc @orcungogus @rogermattic @timcrepeau @lucyneb For thoughts on proposed next steps.