diff --git a/packages/e2e-tests/specs/editor/plugins/__snapshots__/plugins-api.test.js.snap b/packages/e2e-tests/specs/editor/plugins/__snapshots__/plugins-api.test.js.snap index f823deeb3965f8..8d2ca2c2bd9a78 100644 --- a/packages/e2e-tests/specs/editor/plugins/__snapshots__/plugins-api.test.js.snap +++ b/packages/e2e-tests/specs/editor/plugins/__snapshots__/plugins-api.test.js.snap @@ -2,6 +2,6 @@ exports[`Using Plugins API Document Setting Custom Panel Should render a custom panel inside Document Setting sidebar 1`] = `"My Custom Panel"`; -exports[`Using Plugins API Sidebar Medium screen Should open plugins sidebar using More Menu item and render content 1`] = `"
(no title)
Sidebar title plugin
"`; +exports[`Using Plugins API Sidebar Medium screen Should open plugins sidebar using More Menu item and render content 1`] = `"
(no title)
Sidebar title plugin
"`; -exports[`Using Plugins API Sidebar Should open plugins sidebar using More Menu item and render content 1`] = `"
(no title)
Sidebar title plugin
"`; +exports[`Using Plugins API Sidebar Should open plugins sidebar using More Menu item and render content 1`] = `"
(no title)
Sidebar title plugin
"`; diff --git a/packages/edit-post/src/components/sidebar/sidebar-header/index.js b/packages/edit-post/src/components/sidebar/sidebar-header/index.js index 84bd69b07e7048..748992e82b0426 100644 --- a/packages/edit-post/src/components/sidebar/sidebar-header/index.js +++ b/packages/edit-post/src/components/sidebar/sidebar-header/index.js @@ -23,6 +23,14 @@ const SidebarHeader = ( { children, className, closeLabel } ) => { ); const { closeGeneralSidebar } = useDispatch( 'core/edit-post' ); + // The `tabIndex` serves the purpose of normalizing browser behavior of + // button clicks and focus. Notably, without making the header focusable, a + // Button click would not trigger a focus event in macOS Firefox. Thus, when + // the sidebar is unmounted, the corresponding "focus return" behavior to + // shift focus back to the heading toolbar would not be run. + // + // See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus + return ( <>
@@ -40,6 +48,7 @@ const SidebarHeader = ( { children, className, closeLabel } ) => { 'components-panel__header edit-post-sidebar-header', className ) } + tabIndex={ -1 } > { children }