Enhance input focus styles in WooCommerce masterbar (#98308)

* Add focus-visible state for text inputs * Update active state styles to include box-shadow and remove border * Improve accessibility by removing outline on active state
Automattic · Jan 17, 2025 · 65ba090 · 65ba090
1 parent c0a58f4
commit 65ba090
Showing 1 changed file with 6 additions and 2 deletions.
diff --git a/client/layout/masterbar/woo.scss b/client/layout/masterbar/woo.scss
@@ -2271,10 +2271,14 @@ $breakpoint-mobile: 660px;
 	input[type="tel"].form-text-input,
 	textarea.form-text-input {
 		border: 1px solid var(--studio-gray-30);
+
 		&:focus,
+		&:focus-visible,
 		&:hover,
-		&:focus:hover {
-			border: 1px solid var(--woo-purple-40);
+		&:active {
+			border: 1px solid transparent;
+			box-shadow: inset 0 0 0 2px var(--woo-purple-40);
+			outline: none;
 		}
 	}