Prevent focus styles to appear unnecessarily when opening the Mini Ca…

…rt drawer
woocommerce · May 11, 2023 · bf1f53c · bf1f53c
1 parent 5559d21
commit bf1f53c
Showing 1 changed file with 9 additions and 0 deletions.
diff --git a/assets/js/base/components/drawer/style.scss b/assets/js/base/components/drawer/style.scss
@@ -131,6 +131,15 @@ $drawer-animation-duration: 0.3s;
 		opacity: 1;
 	}
 
+	// Don't show focus styles if the close button hasn't been focused by the
+	// user directly. This is done to prevent focus styles to appear when
+	// opening the drawer with the mouse, as the focus is moved inside
+	// programmatically.
+	&:focus:not(:focus-visible) {
+		box-shadow: none;
+		outline: none;
+	}
+
 	> span {
 		@include visually-hidden();
 	}