search

Adyen / adyen-web

Adyen Web Drop-in and Components
https://docs.adyen.com/online-payments
MIT License
182 stars 130 forks source link

Adyen card component has broken navigation with enabled VoiceOver #2728

Closed Danil-glow closed 2 months ago

Danil-glow commented 3 months ago

Describe the bug Tab order breaks on adyen card component with enabled voiceOver. If you start navigate through card component with tab (with enabled VoiceOver), then right after "Expire date" field focus jumps to the end of the page (but should go to "CVC/CVV" field). This issue (focus jumps to the end of the page) sometimes appears after navigation from "Card number" field.

If user used "Shift + Tab" and goes from the bottom of the card component to the beginning it's working fine. It's working fine with disabled VoiceOver.

To Reproduce Steps to reproduce the behavior:

  1. Implement Adyen-web card component on the page.
  2. Enable accessibility tool VoiceOver
  3. Start navigation in the card form with 'Tab' from the up of the form
  4. Tab thought the form till you lost focus after "Expire date" or "CVC/CVV" field

Expected behavior Navigation should works same with and without VoiceOver according to TabIndexes configuration

Screenshots Screen recording of the problem The component is integrated in iframe window. Under the window the core page of the site. When the navigation break - 'focus' jumps to the end of the page right to the core components under the payment page.

Desktop (please complete the following information):

Additional context We also have doubts about new configuration autoFocus (paymentMethodsConfiguration -> card -> autoFocus ) , but seems like it reproducible with both enabled and disabled autoFocus feature.

This bug appeared after upgrade @adyen/adyen-web" package from "^4.7.2" to "^5.65.0" version.

m1aw commented 3 months ago

Hello @Danil-glow,

Can you send me a video of how you reproduce or step by step on how to reproduce? I was just testing now, both with Tab while VoiceOver was on, and also having VoiceOver read the page with Ctrl+Option+4 and it it was successful with both.

Danil-glow commented 3 months ago

Sorry, forget to put https://drive.google.com/file/d/1ueojj0mvYt8HpsKV_XFXkW-EJnm-xzpe/view?usp=sharing

m1aw commented 3 months ago

Hey @Danil-glow

As you can see it is working in version 5.65.0. I wonder what configuration are you passing to the Checkout instance and to Credit card component?

https://github.com/Adyen/adyen-web/assets/6471825/aedf6069-f90d-4557-bfe6-c95d1f24b83f

m1aw commented 2 months ago

Hello @Danil-glow any updates on this? Is it still a problem for you?

m1aw commented 2 months ago

Closing as there was no response. Feel free to open this issue again if the problem remains.