Skip to content
Permalink
Browse files

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

* Visible focus/active styles in high contrast mode.

* Updated mixin call.
  • Loading branch information...
tellthemachines committed Jul 30, 2019
1 parent d45c8ea commit 9446f27292e7865ec146acc35a3fe51b84c7e6e3
@@ -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() {
@@ -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,
@@ -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 {
@@ -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();
}
}

@@ -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;
}
}

0 comments on commit 9446f27

Please sign in to comment.
You can’t perform that action at this time.