Drop-in component is not keyboard accessible

[Mesoptier]

Describe the bug
There is an accessibility issue with the Adyen Drop-in component: when navigating with the keyboard (using the Tab key) it is not possible to navigate out of the Drop-in without also selecting a different payment method.

To Reproduce
This can easily be reproduced in the example provided with the Drop-in documentation (https://docs.adyen.com/checkout/prebuilt-ui#drop-in):

1. Make sure the "Credit Card" payment method is selected.
2. Place focus on one of the visible input fields.
3. Use the Tab key to navigate through the input fields, until reaching the final field (the "Pay" button).
4. Press the Tab key again. Now the next payment method is activated.

Expected behavior
What should happen after step 3 (from an accessibility perspective), is for the next focusable element after all payment methods to be focused.

The current behavior makes it practically impossible to use the form with a keyboard, especially if a custom submit button outside of the Drop-in is used (which is officially supported behavior, with the showPayButton option).

Suggested fix: remove the tabindex attribute from the payment method <li> elements. This would make the Tab behavior work properly. Then, to allow keyboard users to switch between payment methods, standard radio button behavior should be applied to the (currently faked) radio buttons.

Screenshots Screencasts
I recorded a short screencast showing the reproduction steps:
https://www.youtube.com/watch?v=u6Yi-xL4vMU

Desktop (please complete the following information):

• OS: Ubuntu & Windows
• Browser: Google Chrome
• Version: 88

Smartphone (please complete the following information):
N/A

Additional context
Add any other context about the problem here.

[pabloai]

Hi @Mesoptier,

In my opinion the current situation when using the Pay button of the Drop-in works fine. The user can navigate through the payment methods and their fields by pressing Tab , and once they reach to the one they want to use, they can fill the details and press the Pay button. There's no need to jump to the first next element after the Drop-in, since the whole purpose of the Drop-in is to make a payment, and after that the Drop-in should not be there anymore.

That being said, I do agree there should be a way to navigate correctly when using a custom Pay button. I'll create an internal ticket to research this and get back to you once we have a solution.

Thanks for reaching out and for the detailed report!

[bitbytebit1]

Would like to chime in here that press enter on mobile does not focus the next relevant element.

[jdaily]

@pabloai Any update on this? We have the exact issue as described above. A fix meeting OP's suggested behavior will allow us to meet the Section 2.1 of Web Content Accessibility Guidelines.

[ribeiroguilherme]

@Mesoptier @jdaily we did improvements on the accessibility of our UI components, and the changes are available in the release 4.9.0. Therefore we are closing this issue for now.

Please try it out and feel free to reopen this issue in case you find any other problem related to this topic. And again, thanks for reaching out to us 🙌