@W-12627191: add error icon to error message

[unandyala]

Add error/red icon to the error message so that People who are blind, colorblind, or using a monochrome screen will be able detect error messages. This impacts multiple fields

1. promo code
2. Address fields
3. credit card fields
4. login fields
5. password change fields
6. registration fields

https://github.com/SalesforceCommerceCloud/pwa-kit/assets/59447810/f39238b1-91ee-4236-b962-a5549b37634b

Types of Changes

• [x] Bug fix (non-breaking change that fixes an issue)

How to Test-Drive This PR

1. Checkout code
2. Run Retail App template
3. Add a few items in cart
4. Go to Cart Page
5. Open VoiceOver (Cmd + f5)
6. Follow the steps in the demo video

[vcua-mobify]

Thanks @unandyala . I tested the changes on my local and have verified that voiceover works on the modified error messages.

One small nit however. Do we want the icon on this error message as well (appears when not all the options are selected on the PDP)

[alexvuong]

When I apply invalid code for promocode, the error shows up, the focus should focus back to the input so the screen reader can read it out loud. Currently, the focus does not move back to the input, the screen reader will stop after you hit Apply. The users won't be able to know if the code they entered is valid or not via screen reader.

Note: We can create ticket to fix this behavior if you think it takes more time than like 1hr

STR

• Go to cart page
• Open Voiceover
• Navigate to promoco input
• Input invalid code and hit apply
• Observe screen reader

[unandyala]

Thanks @unandyala . I tested the changes on my local and have verified that voiceover works on the modified error messages.

One small nit however. Do we want the icon on this error message as well (appears when not all the options are selected on the PDP)

@vcua-mobify Yes, we need error icon on PDP as well. However this is a different issue and I will create separate ticket for this.

[unandyala]

When I apply invalid code for promocode, the error shows up, the focus should focus back to the input so the screen reader can read it out loud. Currently, the focus does not move back to the input, the screen reader will stop after you hit Apply. The users won't be able to know if the code they entered is valid or not via screen reader.

Note: We can create ticket to fix this behavior if you think it takes more time than like 1hr

STR

• Go to cart page
• Open Voiceover
• Navigate to promoco input
• Input invalid code and hit apply
• Observe screen reader

@alexvuong This is fixed now