Distraction free mode: notices hide current focused elements

[afercia]

Description

When Distraction free mode is enabled and admin notices are rendered at the top of the editor, keyboard users can't see where focus is when tabbing through the interface.

The notices appear on top of the top bar thus visually hiding all the top bar content:

I see this notices issue has been discussed a bit in the PR that introduced Distraction free mode here and here. However, seems to me the discussion didn't keep into consideration keyboard accessibility.

When using mouse / touch, this isn't a big deal. Users have to dismiss the notice anyway in order to use the controls in the top bar.

However, when using the keyboard, all the controls that are visually hidden behind the notice can still be navigated to (and activated). Sighted keyboard users need to actually see where focus is to be able to use the interface. They can't see the focus indication though. Actually these are sort of invisible tab-stops that prevent sighted keyboard users from using the UI.

Additionally, when tabbing through the controls hidden behind the notice, their tooltips appear on top of the admin. The visual effect is pretty confusing as the tooltips seem to appear from nowhere and just painted randomly in the UI.

Screenshots:

Step-by-step reproduction instructions

• Edit a post.
• Enable Distraction free mode.
• To make testing faster, manually trigger a warning notice: copy and paste this code into your browser dev tools console and then press Enter:

wp.data.dispatch( 'core/notices' ).createWarningNotice( 'My warning message.', { id: 'my-warning', actions: [ { label: 'My action' }, { label: 'Awesome action' } ] } )

• Navigate the UI by using the Tab key.
• Observer all the links/buttons within the top bar are still focusable and can be navigated to, although they're hidden behing the notice.
• Observe buttons that have tooltips do show their tooltips above the notice.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes