Click2Pay: Missing keyboard activation for buttons

[FilipSvozil]

Describe the bug
The "Not you?" and "Resend code" buttons cannot be activated using keyboard.

To Reproduce

1. Open Click2Pay component
2. Enter valid email
3. Tab to the "Not you?" or "Resend code" button (→ focus indicator shows correctly)
4. Press Space or Enter key to activate the button → doesn't work, and the screen scrolls down instead

Expected behavior
The button's onClick action should execute, and the screen should not scroll down.

Screenshots

Desktop (please complete the following information):

• MacOS 15
• Chrome 131 and Safari 18

Additional context
We are using npm package: @adyen/[email protected]

• The "Not you?" button is implemented as <span>, and doesn't handle keyboard activation
  • Should probably be <button> - then role and tabIndex would no longer be needed
  • https://github.com/Adyen/adyen-web/blob/v6.5.0/packages/lib/src/components/internal/ClickToPay/components/CtPSection/CtPLogoutLink.tsx#L32
• The "Resend code" button is implemented as <div>, and doesn't handle keyboard activation
  • Should probably be <button> - then role and tabIndex would no longer be needed
    • The current role="link" also seems incorrect - it doesn't lead anywhere, it performs an action
  • https://github.com/Adyen/adyen-web/blob/v6.5.0/packages/lib/src/components/internal/ClickToPay/components/CtPOneTimePassword/CtPOneTimePasswordInput/CtPResendOtpLink.tsx#L91

---

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role#best_practices

Where possible, it is recommended to use native HTML buttons rather than the button role

[m1aw]

Hello @FilipSvozil thank you for raising the issue.

This has indeed escaped our review process, we will fix in the coming releases.

[camil-adyen]

Hi @FilipSvozil, we released a fix for this issue in v6.7.0. I'll close the issue for now, but feel free to reopen if you have any other comments.