Prerequisites
Describe the issue
Hi everyone,
we are using Bootstrap in our default Storefront in Shopware. Thank you for your great work. 🎉
During work on accessibility improvements, we have noticed a strange behaviour with the focus-trap in modals and off-canvas. I've searched for an existing issue but I could not find anything.
The focus-trap of a modal is not working when there is no other focusable element in the DOM after the modal markup. As soon as there is any other focusable element after the HTML of the modal, it works as expected again.
For us this is an issue because we do not always have the modal HTML somewhere right in the in middle of the document next to an "open" button. We use a central modal-template near the closing </body> element that will get it's content via AJAX. (Avoiding too much modal markup in the DOM)
The obvious "easy" workaround would be to move the template somewhere else in the DOM, but this seems kind of hacky. I don't see an obvious reason why it shouldn't work, regardless if there are still focusable elements after the modal. Is this a known issue of some sort? Is there maybe a recommended workaround? We could e.g. disable the Bootstrap focus-trap for those modals and apply a custom one. But we would prefer to use the standard.
Reduced test cases
Codepen to reproduce: https://codepen.io/tobiasberge/pen/JoEKjJo
When you un-comment paragraph with the link <a> at the end of the document, you can see that it resolves the issue, because the link is a focusable element.
The issue can be reproduced in Chrome, Firefox and Safari for me.
What operating system(s) are you seeing the problem on?
macOS
What browser(s) are you seeing the problem on?
Chrome
What version of Bootstrap are you using?
v5.3.8
Prerequisites
Describe the issue
Hi everyone,
we are using Bootstrap in our default Storefront in Shopware. Thank you for your great work. 🎉
During work on accessibility improvements, we have noticed a strange behaviour with the focus-trap in modals and off-canvas. I've searched for an existing issue but I could not find anything.
The focus-trap of a modal is not working when there is no other focusable element in the DOM after the modal markup. As soon as there is any other focusable element after the HTML of the modal, it works as expected again.
For us this is an issue because we do not always have the modal HTML somewhere right in the in middle of the document next to an "open" button. We use a central modal-template near the closing
</body>element that will get it's content via AJAX. (Avoiding too much modal markup in the DOM)The obvious "easy" workaround would be to move the template somewhere else in the DOM, but this seems kind of hacky. I don't see an obvious reason why it shouldn't work, regardless if there are still focusable elements after the modal. Is this a known issue of some sort? Is there maybe a recommended workaround? We could e.g. disable the Bootstrap focus-trap for those modals and apply a custom one. But we would prefer to use the standard.
Reduced test cases
Codepen to reproduce: https://codepen.io/tobiasberge/pen/JoEKjJo
When you un-comment paragraph with the link
<a>at the end of the document, you can see that it resolves the issue, because the link is a focusable element.The issue can be reproduced in Chrome, Firefox and Safari for me.
What operating system(s) are you seeing the problem on?
macOS
What browser(s) are you seeing the problem on?
Chrome
What version of Bootstrap are you using?
v5.3.8