[Accessibility] - Issue with Error Message for Payment Card #3112
Description
Describe the bug
The container of the error message which is programmatically determined as a live region is being added and removed from the DOM when the inline error appears and disappears respectively. This practice prevents the error message from being immediately communicated to screen reader users especially those who use VoiceOver on iPhone, iPad, or Mac devices.
To Reproduce
Steps to reproduce the behavior:
- Go to the checkout page Payment Section
- Enter a invalid card number or expiry date
- You can see a message of enter a valid credit card number in red Color is displayed
- Inspect the error message span tag , role=alert is missing in the span tag.
Expected behavior
To fix this, make sure that an empty container with the live region role (such as, role="alert" or aria-live="assertive") must be present on the page load. The error message needs to be dynamically added to the container when the error is triggered
For example:
Invalid card number
Screenshots
Expected change in span tag where role=alert is required.
Desktop (please complete the following information):
- OS: IOS
- Browser chrome, safari
- Version - Any latest Version
Smartphone (please complete the following information):
- Device: iPhone14
- OS: [e.g. iOS17
- Browser Safari
- Version Any Latest
Additional context
Add any other context about the problem here.