Adyen card component has broken navigation with enabled VoiceOver

[Danil-glow]

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):

• OS: MacOs Sonoma 14.5 (23F79)
• Browser chrome
• Version 126.0.6478.63 (Official Build) (arm64)

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]

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]

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

[m1aw]

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?

Screen.Recording.2024-07-04.at.13.58.17.mov

[m1aw]

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

[m1aw]

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