Navigate regions landmarks style and position improvements (#8554)

* Improve publish panel landmark and button position.

* Use outline for navigate regions focus style.

* Avoid conflict with publish panel animation.

* Make the outline animation expand inwards.

* CSS lint after rebase.

* Rebuild outline animation.

* Try negative z-indexes.

* Change animation timing to 0.1s.

assets/stylesheets/_z-index.scss

@@ -10,7 +10,8 @@ $z-layers: (
 	".editor-block-list__layout .reusable-block-indicator": 1,
 	".editor-block-list__breadcrumb": 2,
 	".components-form-toggle__input": 1,
-	".components-panel__header.edit-post-sidebar__panel-tabs": 1,
+	".components-panel__header.edit-post-sidebar__panel-tabs": -1,
+	".edit-post-sidebar .components-panel": -2,
 	".editor-inserter__tabs": 1,
 	".editor-inserter__tab.is-active": 1,
 	".components-panel__header": 1,

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

@@ -1,4 +1,5 @@
 .components-navigate-regions.is-focusing-regions [role="region"] {
+	// For browsers that don't support outline-offset (IE11).
 	&:focus::after {
 		content: "";
 		position: absolute;
@@ -8,16 +9,30 @@
 		right: 0;
 		pointer-events: none;
 		outline: 4px solid transparent; // Shown in Windows High Contrast mode.
-		animation: editor-animation__region-focus 0.2s ease-out;
-		animation-fill-mode: forwards;
+		box-shadow: inset 0 0 0 4px $blue-medium-400;
+	}
+
+	@supports ( outline-offset: 1px ) {
+		&:focus::after {
+			content: none;
+		}
+
+		&:focus {
+			outline-style: solid;
+			outline-color: $blue-medium-400;
+			animation: editor-animation__region-focus 0.1s ease-out;
+			animation-fill-mode: forwards;
+		}
 	}
 }
 
 @keyframes editor-animation__region-focus {
 	from {
-		box-shadow: inset 0 0 0 0 $blue-medium-400;
+		outline-width: 0;
+		outline-offset: 0;
 	}
 	to {
-		box-shadow: inset 0 0 0 4px $blue-medium-400;
+		outline-width: 4px;
+		outline-offset: -4px;
 	}
 }

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

@@ -182,6 +182,11 @@
 		body.is-fullscreen-mode & {
 			top: 0;
 		}
+
+		// Keep it open on focus to avoid conflict with navigate-regions animation.
+		.is-focusing-regions & {
+			transform: translateX(0%);
+		}
 	}
 }
 
@@ -206,28 +211,41 @@
 }
 
 .edit-post-toggle-publish-panel {
-	position: absolute;
-	bottom: 0;
+	position: fixed;
+	top: -9999em;
+	bottom: auto;
+	left: auto;
 	right: 0;
 	z-index: z-index(".edit-post-toggle-publish-panel");
+	padding: 10px 10px 10px 0;
 	width: $sidebar-width;
-	height: 0;
-	overflow: hidden;
-	&:focus-within {
-		height: auto;
-		padding: 20px 0 0 0;
+	background-color: $white;
+
+	&:focus {
+		top: auto;
+		bottom: 0;
 	}
 
 	.edit-post-toggle-publish-panel__button {
-		float: right;
 		width: auto;
 		height: auto;
+		display: block;
 		font-size: 14px;
 		font-weight: 600;
+		margin: 0 0 0 auto;
 		padding: 15px 23px 14px;
 		line-height: normal;
 		text-decoration: none;
 		outline: none;
 		background: #f1f1f1;
+		color: theme(secondary);
+
+		&:focus {
+			position: fixed;
+			top: auto;
+			right: 10px;
+			bottom: 10px;
+			left: auto;
+		}
 	}
 }

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

@@ -36,6 +36,8 @@
 		max-height: calc(100vh - #{ $admin-bar-height-big + $panel-header-height });
 		margin-top: -1px;
 		margin-bottom: -1px;
+		position: relative;
+		z-index: z-index(".edit-post-sidebar .components-panel");
 
 		@include break-small() {
 			overflow: inherit;