Distraction Free: raise top bar above notices when revealed by hover or keyboard focus

[dhruvikpatel18]

What?

Closes #49485

Fixes an accessibility bug in Distraction free mode where admin/editor notices visually cover the top bar, while its buttons remain focusable and operable underneath, leaving keyboard users unable to see where focus currently is.

Why?

In Distraction free mode, the top bar (Header) is faded out (opacity: 0) via a motion animation until it's hovered or contains focus. Admin notices are rendered in a sibling region that's deliberately kept visible (via position: absolute; z-index: 35) so they aren't hidden along with the top bar.

The top bar's own :focus-within rule already restores its opacity when a keyboard user tabs into one of its controls, but the top bar's z-index was never raised to match, so it stayed underneath the notice's z-index: 35. The practical effect: a sighted keyboard user tabbing through the interface lands on top bar controls that are fully operable but invisible, with no way to see where focus is. Tooltips for those controls then appeared to pop up out of nowhere, disconnected from any visible trigger.

This was raised and discussed in the original Distraction free mode PR (#41740), but keyboard accessibility wasn't addressed at the time.

Testing Instructions

1. Edit a post.
2. Enable Distraction free mode (via the three-dot Options menu, or View > Distraction free).
3. Open your browser's dev tools console and run:

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

4. Confirm the notice appears on top of the (now hidden) top bar, as before, this part is unchanged.
5. Hover over the area where the top bar would be. Confirm the top bar now appears on top of the notice instead of behind it.
6. Move the mouse away and confirm the top bar fades back out as before.

Testing Instructions for Keyboard

1. Follow steps 1–3 above.
2. Click into the post title or content to place focus there, then press Tab repeatedly to move focus toward the top bar controls (or Shift+Tab back from the content into the top bar).
3. As focus reaches each top bar button, confirm:
   • The button becomes visible (top bar rises above the notice) instead of remaining hidden behind it.
   • A visible focus ring is shown on the focused button.
   • Any tooltip appears attached to its visible trigger button, not floating disconnected over the page.
4. Continue tabbing through all top bar controls and confirm none of them are ever invisible while focused.

Screenshots or screencast

Screen.Recording.2026-07-16.at.2.52.27.PM.mov

[github-actions]

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

• Required label: Any label starting with [Type].
• Labels found: [Package] Editor.

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: dhruvikpatel18 <dhruvik18@git.wordpress.org>
Co-authored-by: afercia <afercia@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.