Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Accessibility] - Issue with Error Message for Payment Card #3112

Open
saidyson opened this issue Feb 5, 2025 · 4 comments
Open

[Accessibility] - Issue with Error Message for Payment Card #3112

saidyson opened this issue Feb 5, 2025 · 4 comments
Labels
Needs more info Further information is requested

Comments

@saidyson
Copy link

saidyson commented Feb 5, 2025

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:

  1. Go to the checkout page Payment Section
  2. Enter a invalid card number or expiry date
  3. You can see a message of enter a valid credit card number in red Color is displayed
  4. 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.
Image

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.
@longyulongyu
Copy link
Contributor

Hi @saidyson which sdk version are you testing? I believe this should be fixed from v5.37.0 - we added a live region, errors are added and removed from the DOM respectively in terms of invalid and valid situations.

@ribeiroguilherme ribeiroguilherme added the Needs more info Further information is requested label Feb 13, 2025
@sponglord
Copy link
Contributor

@saidyson - just to clarify... the aria-live element, present on the page load, exists, not on a "per input" basis, rather as a "SR (screenreader) panel" that sits in the <body> and "collects" errors as they appear.
This also allows for a list of errors to be read out, when, for example, the shopper presses the pay button and multiple errors are generated at once

@saidyson
Copy link
Author

Hi @longyulongyu we are using the adyen-magento2 module – here is the github link - https://github.com/Adyen/adyen-magento2/tree/v9.7.2
which internally uses the "5.65.0" version SDK.

@saidyson
Copy link
Author

Hi @sponglord
The live regions for the errors are being added to the DOM individually when triggered, not present on pages load. The live regions will not work correctly with many screen readers including VoiceOver.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Needs more info Further information is requested
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@ribeiroguilherme @sponglord @longyulongyu @saidyson