Regression: the navigate region focus style is broken

[afercia]

Describe the bug
When jumping through the main ARIA landmarks in the editor (also known as "navigate-region" component) via the dedicated keyboard shortcuts, the focus style of the regions is broken, in slightly different ways on different browsers.

To reproduce

• Test in different browsers, also on Windows.
• Use the keyboard shortcuts to navigate through the landmarks.
• on macOS:
  • Ctrl+backtick
  • Shift+Ctrl+backtick
• on Windows (if I'm not mistaken):
  • Shift+Alt+N
  • Shift+Alt+P
• see the focus style is broken on some of the regions

Expected behavior
The focus style to always be clearly visible.

Note
This style broke a few times during the project history. Maybe worth considering a different, more solid, testable, implementation.

Screenshots

With Gutenberg plugin activated.

Chrome Windows: content region focused: the style is visible only in the part of the UI close to the browser scrollbar:

Chrome Windows: sidebar region focused: the style is barely visible:

Chrome macOS content region: no style visible:

Chrome macOS sidebar region: style barely visible:

Chrome macOS publish region: no style visible:

Firefox macOS sidebar region: style breaks but in a different way:

Editor version (please complete the following information):

• can reproduce with slightly different results on both:
  • default editor shipped with WP 5.4
  • plugin version 7.9.1

[talldan]

I accidentally created a duplicate (#32758). When testing more recently it looks like the main editor area and publish panel link are the only two that don't have outlines.

For the main editor area, there are other elements overlapping the region. The CSS for the regions is here:
https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/higher-order/navigate-regions/style.scss

It might be possible to use a pseudo-element with a higher z-index to solve the overlapping issue.

[afercia]

WOrking on a PR right now. Just to note that we already tried a pseudo-element and we changed it in #8554. The problem with an absolutely positioned pseudo-element is that it scrolls when scrolling the post content.