[BUG]: Tabbing navigation issue Chrome + VoiceOver ON

[AgustinPerlego]

What happened?

Both <PaymentElement> and <AddressElement> have a broken behaviour while using Google Chrome + VoiceOver ON when they're both rendered.

• This is issue is not happening in neither Firefox + VoiceOver ON nor Safari + VoiceOver ON.
• The issue doesn't happen when rendering just one element

It looks like it is a tabbing navigation issue, the user gets stuck within the <PaymentElement> iframe. I've recorded some videos so you can easily see what it is happening. Unfortunately QuickTime does not include system sound when doing screen recordings, but I've included the VoiceOver window so hopefully it will be somewhat clear to show what is happening.

checkout-chrome-voiceover-on.mov

• I start with focus in the Card Number field, I press tab, focus moves to the Card Expiration field, I press tab again, focus moves to the CVC field. So far everything is working as expected. Note that the screen reader has correctly read out all field labels.
• ⚠️ I press tab again. I expect focus to move from the CVC field to the Full name input which is within the <AddressElement> It does for a second but quickly goes back to Card Number to Card Expiration to CVC. ⚠️

Dependencies

I've tested this in different laptops with different specs:

• Chrome: Version 132.0.6834.159 (Official Build) (x86_64) | MacOs: Sonoma 14.5
• Chrome: Version 131.0.6778.267 | MacOs: Ventura 13.6.9
• Arc: 1.78.1 Chromium Engine Version 132.0.6834.84 | MacOs: Sequoia 13.6.9 - 15.1.1 (24B91)

Here you have some videos using Safari/Firefox with VoiceOver ON:

Firefox

checkout-firefox-voiceover-on.mov

Safari

checkout-safari-voiceover-on.mov

I also created a codesandbox where you can test this in an isolated way. You can test the AddressElement, PaymenetElement or Both if you change the option in the selector

• Preview -> https://qq6jv9.csb.app/both-element
• Code -> https://codesandbox.io/p/sandbox/qq6jv9

Hope this was clear, I'd be happy to collaborate with anything you need

Environment

Chrome v132.0.6834.159 (Official Build) (x86_64) on MacOs: Sonoma 14.5

Reproduction

https://qq6jv9.csb.app/both-element

[alexlande-stripe]

Hi @AgustinPerlego, thanks for reporting this. We're tracking this internally and will provide updates here when we have them.