Navigate regions style improvements

[afercia]

When jumping through the main editor sections with the keyboard shortcut Ctrl + backtick there are a few things that could be improved:

1
When the posts or sidebar content is very long, scrolling the content or sidebar makes the focus style shape scroll too:

This happens because the focus style is set on a CSS pseudo element that scrolls together with the content because, well it's content. Ideally, the focus style should be set as an outline on the landmark regions so it's always visible regardless of scrolling.

2
When focusing the "Open publish panel" region, part of the content at the bottom of the page becomes not visible:

this happens because the "Open publish panel" region is relatively positioned and thus still takes space. Also, it would be nice to place the button in the same exact position of the "Skip to the selected block" button:

3
With Firefox, the "Open publish panel" region stays out of view when it receives focus.

4
Worth noting the current implementation uses :focus-within, not supported by IE11 and Edge. This part should be refactored to use just :focus.

gutenberg/edit-post/components/layout/style.scss

Line 127 in 3450273

&:focus-within {