Focus Traps

This test case demonstrates the interaction of focus traps with the endereco modal, as seen, for example, in Shopware6 default Storefront theme or the Bootstrap framework. A focus trap keeps the focus within the modal, even when the endereco modal opens. This example uses Bootstrap 4 and all its dependencies to recreate the Shopware 6 scenario.

In this example, we use the targetSelector option to inject the modal into an existing focus trap (example modal 1). Disable the targetSelector option to inject the modal directly into the body. This leads to problems with the focus trap, for example, that the modal cannot be operated with the keyboard. (example modal 2).

API-Key

Before focus trap: You should not be able to focus this button if the modal is opened.

Launch example modal 1 (append to existing focus trap)

Launch example modal 2 (append to body)

Launch example modal 3 (Using targetSelectorResolve() )

After focus trap: You should not be able to focus this button if the modal is opened.