Add focus styles

WordPress · May 1, 2024 · 2894d79 · 2894d79
1 parent 4849638
commit 2894d79
Showing 1 changed file with 9 additions and 0 deletions.
diff --git a/packages/block-library/src/social-link/editor.scss b/packages/block-library/src/social-link/editor.scss
@@ -20,6 +20,15 @@
 
 	// This rule is duplicated from the style.scss and needs to be the same as there.
 	padding: 0.25em;
+
+	// Focus styles replicate the `@wordpress/components` button component.
+	&:focus:not(:disabled) {
+		border-radius: 2px;
+		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+
+		// Windows High Contrast mode will show this outline, but not the box-shadow.
+		outline: 3px solid transparent;
+	}
 }
 
 .wp-block-social-links.is-style-pill-shape .wp-social-link button {