Visible focus and active styles for Windows high contrast mode (#16554)

* Visible focus/active styles in high contrast mode. * Updated mixin call.
WordPress · Jul 30, 2019 · 9446f27 · 9446f27
1 parent d45c8ea
commit 9446f27
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 13 deletions.
diff --git a/assets/stylesheets/_mixins.scss b/assets/stylesheets/_mixins.scss
@@ -143,7 +143,6 @@
 
 	// Windows High Contrast mode will show this outline, but not the box-shadow.
 	outline: 2px solid transparent;
-	outline-offset: -2px;
 }
 
 // Switch.
@@ -173,7 +172,6 @@
 
 	// Windows High Contrast mode will show this outline, but not the box-shadow.
 	outline: 2px solid transparent;
-	outline-offset: -2px;
 }
 
 // Tabs, Inputs, Square buttons.
@@ -192,7 +190,6 @@
 
 	// Windows High Contrast mode will show this outline, but not the box-shadow.
 	outline: 2px solid transparent;
-	outline-offset: -2px;
 }
 
 // Square buttons.
@@ -244,7 +241,6 @@
 
 	// Windows High Contrast mode will show this outline, but not the box-shadow.
 	outline: 2px solid transparent;
-	outline-offset: -2px;
 }
 
 @mixin block-style__is-active() {

diff --git a/packages/block-editor/src/components/inserter-list-item/style.scss b/packages/block-editor/src/components/inserter-list-item/style.scss
@@ -53,9 +53,6 @@
 		&:active,
 		&:focus {
 			position: relative;
-
-			// Show the focus style in the icon inside instead.
-			outline: none;
 			@include block-style__focus();
 
 			.block-editor-block-types-list__item-icon,

diff --git a/packages/components/src/color-palette/style.scss b/packages/components/src/color-palette/style.scss
@@ -61,12 +61,14 @@ $color-palette-circle-spacing: 14px;
 	&::after {
 		content: "";
 		position: absolute;
-		top: 0;
-		left: 0;
-		bottom: 0;
-		right: 0;
+		top: -1px;
+		left: -1px;
+		bottom: -1px;
+		right: -1px;
 		border-radius: $radius-round;
 		box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+		// Show a thin circular outline in Windows high contrast mode, otherwise the button is invisible.
+		border: 1px solid transparent;
 	}
 
 	&:focus {

diff --git a/packages/components/src/date-time/style.scss b/packages/components/src/date-time/style.scss
@@ -67,8 +67,7 @@
 		top: 20px;
 
 		&:focus {
-			border-color: $blue-medium-focus;
-			box-shadow: 0 0 0 1px $blue-medium-focus;
+			@include input-style__focus();
 		}
 	}
 

diff --git a/packages/components/src/toolbar-button/style.scss b/packages/components/src/toolbar-button/style.scss
@@ -69,6 +69,18 @@
 	// Focus style
 	&:not(:disabled):focus > svg {
 		@include formatting-button-style__focus;
+		// Remove outline from SVG to apply on focused element - see below.
+		outline: 0;
+	}
+
+	// Microsoft Edge in high contrast mode only displays outlines on focused elements, not their children.
+	&:not(:disabled).is-active {
+		outline: 1px dotted transparent;
+		outline-offset: -2px;
+	}
+	// Microsoft Edge in high contrast mode only displays outlines on focused elements, not their children.
+	&:not(:disabled):focus {
+		outline: 2px solid transparent;
 	}
 }