diff --git a/assets/stylesheets/_mixins.scss b/assets/stylesheets/_mixins.scss index b9b198631e895c..ef15e92e46b81f 100644 --- 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 index 5725edf2f67b72..cf6bc1ba697a17 100644 --- 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 index 97f7502a53e5d9..3c86f023634bc8 100644 --- 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 index 71c44cbcfd3709..1b79df56cd1317 100644 --- 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 index b35d826ebdfc7b..cd434448784a20 100644 --- 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; } }