[Bug]: Focus lost after Accept / Reject

[5ulo]

Expected Behavior

When CC window is closed on Accept / Reject etc. and you hit TAB key one more time, you should be focused on the first focusable element inside the website.

Current Behavior

After closing the CC window and hitting TAB key again, focusing starts after the website content - the focus is shifted to browsers UI elements like tabs, status bar etc.. see attached video. Can't access website content. This is a huge accessibility failure. This bug is in Chromium based browsers (Chrome, Vivaldi, Opera..), also in Safari.
Firefox works as expected - hitting TAB focuses the first focusable element.

DEMO:
https://codepen.io/5ulo/pen/JjaYZNv

Chrome - navigating with tab key
https://user-images.githubusercontent.com/4980919/219949890-4efc40c2-1834-4d0f-ae5b-9b4a3be55b3a.mp4

Firefox - navigating with tab key - working
https://user-images.githubusercontent.com/4980919/219949894-393da0d8-b9d7-4230-84a5-16fa8729ae23.mp4

Steps to reproduce

As seen in codepen example

Proposed fix or additional info.

No response

Version

2.8.9, 3 alpha

On which browser do you see the issue?

Chrome

[orestbida]

Thank you for the sweet issue!

[5ulo]

More info to this: After closing CC window the focus jumps at the very end of html, so next TAB move jumps out of the website to the closest UI.
Proof of this feature is closing the CC window and hitting SHIFT + TAB which moves focus on the very last focusable item in HTML DOM.

[waako]

The fix introduced in #486 seems to have been lost in v2.9.0 and beyond.

The main_container is still being appended at end of body, therefore causing other issues.
For example, when using NVDA screenreader (on Windows with Chrome) the initial focus is not on cookie consent modal, it takes several tabs to get there.

Ensuring main container is appended before first child of root/body resolves these sort of issues.

[5ulo]

This should not be closed as the bug is still there.
(root || document.body).appendChild(main_container);
It should have insertBefore at the beginning of the body or root so user does not loose focus inside page after consent.
Would be great to have this behaviour optional:

position: 'before|after'