Clean up CSS and fix edge cases.

packages/components/src/higher-order/navigate-regions/style.scss

@@ -23,11 +23,62 @@
 	// fix some edge cases but these CSS rules should be later removed in favor of
 	// a more abstracted approach to make the navigabel regions focus style work
 	// regardles of the CSS used on other components.
+
+	// Header top bar when Distraction free mode is on.
 	&.is-distraction-free .interface-interface-skeleton__header {
 		.interface-navigable-region__stacker,
 		.edit-post-header {
 			outline: inherit;
 			outline-offset: inherit;
 		}
 	}
+
+	// Sidebar toggle button shown when navigating regions.
+	.interface-interface-skeleton__sidebar {
+		.interface-navigable-region__stacker,
+		.edit-post-layout__toggle-sidebar-panel {
+			outline: inherit;
+			outline-offset: inherit;
+		}
+	}
+
+	// Publish sidebar toggle button shown when navigating regions.
+	.interface-interface-skeleton__actions {
+		.interface-navigable-region__stacker,
+		.edit-post-layout__toggle-publish-panel {
+			outline: inherit;
+			outline-offset: inherit;
+		}
+	}
+
+	// Publish sidebar.
+	[role="region"].interface-interface-skeleton__actions:focus  .editor-post-publish-panel {
+		outline: 4px solid var(--wp-admin-theme-color);
+		outline-offset: -4px;
+	}
+
+	// Edit site Navigation Drawer.
+	.interface-interface-skeleton__drawer {
+		z-index: z-index(".edit-site-navigation-toggle");
+
+		.interface-navigable-region__stacker,
+		.edit-site-navigation-toggle {
+			outline: inherit;
+			outline-offset: inherit;
+		}
+
+		.edit-site-navigation-toggle.is-open {
+			outline: none;
+		}
+
+		.edit-site-navigation-toggle__button {
+			z-index: -1;
+		}
+	}
+}
+
+// Fixes for edge cases.
+// Edit site Drawer.
+.interface-interface-skeleton__drawer .interface-navigable-region__stacker {
+	height: 100%;
 }

packages/edit-post/src/components/layout/style.scss

@@ -60,7 +60,9 @@
 	justify-content: center;
 }
 
-.edit-post-layout__toggle-sidebar-panel {
+.edit-post-layout__toggle-publish-panel,
+.edit-post-layout__toggle-sidebar-panel,
+.edit-post-layout__toggle-entities-saved-states-panel {
 	z-index: z-index(".edit-post-layout__toggle-sidebar-panel");
 	position: fixed !important; // Need to override the default relative positionning
 	top: -9999em;
@@ -75,24 +77,18 @@
 	padding: $grid-unit-30;
 	display: flex;
 	justify-content: center;
+}
 
-	.interface-interface-skeleton__actions:focus &,
-	.interface-interface-skeleton__actions:focus-within & {
+.edit-post-layout__toggle-sidebar-panel {
+	.interface-interface-skeleton__sidebar:focus &,
+	.interface-interface-skeleton__sidebar:focus-within & {
 		top: auto;
 		bottom: 0;
 	}
 }
 
 .edit-post-layout__toggle-entities-saved-states-panel,
 .edit-post-layout__toggle-publish-panel {
-	box-sizing: border-box;
-	width: $sidebar-width;
-	background-color: $white;
-	border: 1px dotted $gray-300;
-	padding: $grid-unit-30;
-	display: flex;
-	justify-content: center;
-
 	.interface-interface-skeleton__actions:focus &,
 	.interface-interface-skeleton__actions:focus-within & {
 		top: auto;

packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss

@@ -6,18 +6,10 @@
 	background: $gray-900;
 	border-radius: 0;
 	display: flex;
-	// !important to override position relative set by navigateRegions when focusing the region.
-	position: absolute !important;
-	// !important to override the z-index set by navigateRegions when focusing the region.
-	z-index: z-index(".edit-site-navigation-toggle") !important;
+	position: absolute;
+	z-index: z-index(".edit-site-navigation-toggle");
 	height: $header-height;
 	width: $header-height;
-
-	&.is-open,
-	&.is-open .edit-site-navigation-toggle__button.components-button {
-		// Allow navigateRegions focus style to be drawn correctly.
-		background: transparent;
-	}
 }
 
 .edit-site-navigation-toggle__button.components-button {

packages/interface/src/components/interface-skeleton/style.scss

@@ -110,8 +110,14 @@ html.interface-interface-skeleton__html-container {
 	// On Mobile the header is fixed to keep HTML as scrollable.
 	@include break-medium() {
 		position: relative !important;
-		z-index: z-index(".interface-interface-skeleton__sidebar {greater than small}");
 		width: auto; // Keep the sidebar width flexible.
+
+		// Set this z-index only when the sidebar is opened. When it's closed, the
+		// button to open the sidebar that is shown when navigating regions needs to
+		// be above the footer. See `edit-post-layout__toggle-sidebar-panel`.
+		.is-sidebar-opened & {
+			z-index: z-index(".interface-interface-skeleton__sidebar {greater than small}");
+		}
 	}
 }