fix(material/button): add more prominent focus indication in high con…

…trast mode (#20821)

We currently have some focus indication in high contrast mode, but it's very
difficult to see. These changes replace the old one with a 3x thicker outline.

Fixes #20820.

(cherry picked from commit 345ad70)

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

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