diff --git a/src/material-experimental/mdc-button/button.scss b/src/material-experimental/mdc-button/button.scss index f0435d338b91..f76f99920f76 100644 --- a/src/material-experimental/mdc-button/button.scss +++ b/src/material-experimental/mdc-button/button.scss @@ -24,6 +24,12 @@ } } +@include cdk-high-contrast(active, off) { + .mat-mdc-button-base:focus { + outline: solid 3px; + } +} + // Since the stroked button has has an actual border that reduces the available space for // child elements such as the ripple container or focus overlay, an inherited border radius // for the absolute-positioned child elements does not work properly. This is because the diff --git a/src/material/button/button.scss b/src/material/button/button.scss index 375b18d73fb0..5c91a054ec9a 100644 --- a/src/material/button/button.scss +++ b/src/material/button/button.scss @@ -120,20 +120,6 @@ ._mat-animation-noopable & { transition: none; } - - @include cdk-high-contrast(active, off) { - // Note that IE will render this in the same way, no - // matter whether the theme is light or dark. This helps - // with the readability of focused buttons. - background-color: #fff; - } - - @include cdk-high-contrast(black-on-white, off) { - // For the black-on-white high contrast mode, the browser will set this element - // to white, making it blend in with the background, hence why we need to set - // it explicitly to black. - background-color: #000; - } } // For round buttons, the ripple container should clip child ripples to a circle. @@ -171,4 +157,10 @@ .mat-button, .mat-flat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab { outline: solid 1px; } + + .mat-button-base { + &.cdk-keyboard-focused, &.cdk-program-focused { + outline: solid 3px; + } + } }