how can google.com put a tab focus on an element that is not focusable

When you press Enter on that message, JavaScript code adds tabindex="-1" to the element and focuses it. Before Enter:

After:

When focus leaves the element (presumably a blur event handler), JavaScript code removes the tabindex from the element.

You can see this if you right-click the element and reveal it in the Elements panel, then watch the element as you tab until you see that element again. For instance, if you click anywhere near the top of the body of the page after opening the Elements panel and Shift+Tab, eventually you get that same "Show main content" box again, and when you press Enter you can see the tabindex get added (and then see it get removed when you move away).