Accessibility issue in iOS mobile devices using keyboard arrow keys

[kdimitrovosf]

Describe the bug We spotted some strange behavior when trying to use the keyboard arrow keys in iOS devices to navigate through the credit card input fields. It jumps from the card number field to a hidden input and then to the card holder name field and it’s not possible to focus the other fields (Expiry date and CVV) via the iOS arrows. It jumps through these 3 fields where the middle one is hidden.

To Reproduce Steps to reproduce the behavior:

1. Go to payment and choose Credit Card
2. Click on the Credit Card number field which should be the first input
3. Use the arrow keys in iOS devices, more specifically on iPhone, try to focus the next input
4. Type something, you will see nothing happens. It's typing in a hidden input field.
5. Click again the arrow key to focus the next input
6. You are now focusing the name field, which is the fourth field in the form.

Notes:

• On iPad the arrow keys are disabled and cannot navigate through the Credit Card input fields
• When you focus on Expiry Date or CVV fields, the arrows are disabled on both devices

Expected behavior The user should be able to go through all of these fields with the iOS arrows one by one. Without focusing a hidden inputs or skipping Expiry date and CVV fields.

Screenshots iPad:

iPhone: Video: https://user-images.githubusercontent.com/76946766/114847072-f6e1d900-9de5-11eb-905d-2ce225080d5a.MP4 Screenshot:

Tablet:

• Device: iPad 8th
• OS: iOS
• Browser: Safari
• Version: 14

Smartphone:

• Device: iPhone 12
• OS: iOS
• Browser: Safari
• Version: 14

Additional context I believe this can be caused by the fact that these inputs sits into an iframes. Could not be possible to find a workaround but it's worth investigating.

[marcperez]

Hi @kdimitrovosf,

Thanks for reporting this issue and our apologies for the delay on coming back to you. We will take a look at this and update this issue once we have a fix ready.

[sponglord]

This issue arises from changes Apple made in Safari 13:

“Changed the behavior for third party iframes to prevent them automatically navigating the page.”

In other words they prevent 3rd party (i.e. cross-origin) iframes from programmatically focusing before the user makes a direct interaction with the frame. This restriction unfortunately also applies to the arrow keys on the "soft" iOS keyboard (a test shows that if the iframes are the same origin as the hosting site then the arrow keys behave as expected).

Since this issue is caused by changes made by Apple, after much investigation & experimentation, the only solution we could come up with & implement was that if we can't achieve keyboard navigation in iOS browsers then we shouldn't even appear to offer it i.e. we turnoff these arrow keys This at least doesn't "mislead" the user into thinking they will work as expected

This change was added in release 5.15.0.