While working on making my own implementation of a dialog/modal accessible, I came across something that I think would help others if it was documented.

In this example, https://react-bootstrap.github.io/components.html#modals, when a user tabs outside of the modal, the focus goes to the tab bar, bookmark bar, etc. When the user's focus returns to the window's content, the focus is sent back to the modal as expected.

While looking at the example here, https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html, it does not do this. Looking into the code more, I found that this is because two divs are injected, one before and one after the dialogs content both containing tabindex='0'. This helps trap the focus and return it to the dialog's content.

I'm wondering if this is the expected behavior and if it is, can the documentation on the page be updated to include this?

Sorry if this has already been discussed before, I wasn't able to find an answer to it.