Click2Pay info modal: Incorrect focus management

[FilipSvozil]

Describe the bug
The click-2-pay info modal:

• focuses a non-interactive <p> element after opening,
• and doesn't have a proper focus trap, allowing interaction with background content.

To Reproduce

1. Open Click to Pay component
2. Tab to the (i) icon
3. Activate it using Space key
4. When the modal opens, there is a focus indicator around a paragraph of text (that is not interactive - it's just a normal text)
5. When you press Tab key multiple times, the focus escapes from the modal to the page below modal

Expected behavior

• After opening focus should be on the "Close" button
• User should not be able to focus elements behind the modal

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 first paragraph is explicitly focused using focusFirstElement
  • Someone probably tried to prevent that using tabindex="-1" - doesn't seem to work
  • focusFirstElement should probably go on the "Close" button instead
  • https://github.com/Adyen/adyen-web/blob/v6.5.0/packages/lib/src/components/internal/ClickToPay/components/CtPInfo/CtPInfoModal/CtPInfoModal.tsx#L50
• There seems to be a custom focus-trap implementation
  • I don't see why it doesn't work on first glance - I would guess the keydown event isn't triggered on rootElement, but further up the element tree (i.e. body, or shadowDOM root)
  • Maybe a native <dialog> element would have been an easier option
  • https://github.com/Adyen/adyen-web/blob/v6.5.0/packages/lib/src/components/internal/Modal/useTrapFocus.ts#L23