fix: wp icon focus issue (WordPress#62675)

* fix: wp icon focus issue

* update: shadow and added focus visible

* Fix: editor focus style issue

* Fix: svg dimentions & padding issue

* Fix: border radius issue on editor focus

----

Co-authored-by: up1512001 <[email protected]>
Co-authored-by: youknowriad <[email protected]>
Co-authored-by: bgardner <[email protected]>
Co-authored-by: talldan <[email protected]>
Co-authored-by: afercia <[email protected]>
Co-authored-by: jasmussen <[email protected]>

Author: 6 people

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

@@ -175,8 +175,11 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 		color: $white;
 	}
 
+	&:focus-visible,
 	&:focus {
-		box-shadow: none;
+		box-shadow: 0 0 0 3px #1e1e1e, 0 0 0 6px var(--wp-admin-theme-color);
+		outline: 4px solid #0000;
+		outline-offset: 4px;
 	}
 
 	&::before {
@@ -193,13 +196,6 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 		box-shadow: none;
 	}
 
-	// Lightened spot color focus.
-	&:focus::before {
-		box-shadow:
-			inset 0 0 0 var(--wp-admin-border-width-focus) rgba($white, 0.1),
-			inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-	}
-
 	.edit-site-layout__view-mode-toggle-icon {
 		display: flex;
 		height: $grid-unit-80;
@@ -255,3 +251,25 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 	padding-left: 16px;
 	padding-right: 16px;
 }
+
+.edit-site-layout.is-full-canvas {
+	.edit-site-layout__view-mode-toggle.components-button {
+		&:focus-visible,
+		&:focus {
+
+			box-shadow: none;
+			outline: none;
+			outline-offset: 0;
+
+			.edit-site-site-icon svg {
+				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color, #3858e9);
+				outline: 3px solid #0000;
+				height: 40px;
+				width: 40px;
+				padding: 2px;
+				border-radius: 2px;
+			}
+
+		}
+	}
+}