refactor(button): render focus tint and ripples behind button content

Reworks the button focus indication and ripples so that they render behind the text of the button, instead of top of it. This helps with the contrast ratios while focused.

Also gets rid of the `mat-button-focus-overlay` element in favor of using `::before` which saves us the extra DOM node.

Incorporates some of the changes from #11961 so that we don't have to increase the size of the CSS selectors.

Author: crisbeto

src/material/button/_button-base.scss

@@ -63,7 +63,7 @@ $mat-mini-fab-padding: 8px !default;
   }
 
   &.cdk-keyboard-focused, &.cdk-program-focused {
-    .mat-button-focus-overlay {
+    &::before {
       opacity: 0.12;
     }
   }

src/material/button/_button-theme.scss

@@ -10,19 +10,19 @@ $_mat-button-ripple-opacity: 0.1;
   $accent: map-get($theme, accent);
   $warn: map-get($theme, warn);
 
-  &.mat-primary .mat-button-focus-overlay {
+  &.mat-primary::before {
     background-color: mat-color($primary);
   }
 
-  &.mat-accent .mat-button-focus-overlay {
+  &.mat-accent::before {
     background-color: mat-color($accent);
   }
 
-  &.mat-warn .mat-button-focus-overlay {
+  &.mat-warn::before {
     background-color: mat-color($warn);
   }
 
-  &[disabled] .mat-button-focus-overlay {
+  &[disabled]::before {
     background-color: transparent;
   }
 }
@@ -98,7 +98,7 @@ $_mat-button-ripple-opacity: 0.1;
     }
   }
 
-  .mat-button-focus-overlay {
+  .mat-button-base::before {
     background: map_get($foreground, base);
   }
 

src/material/button/button.html

@@ -1,7 +1,6 @@
-<span class="mat-button-wrapper"><ng-content></ng-content></span>
 <div matRipple class="mat-button-ripple"
      [class.mat-button-ripple-round]="isRoundButton || isIconButton"
      [matRippleDisabled]="_isRippleDisabled()"
      [matRippleCentered]="isIconButton"
      [matRippleTrigger]="_getHostElement()"></div>
-<div class="mat-button-focus-overlay"></div>
+<span class="mat-button-wrapper"><ng-content></ng-content></span>

src/material/button/button.scss

@@ -5,7 +5,7 @@
 @import '../../cdk/a11y/a11y';
 
 .mat-button, .mat-icon-button {
-  .mat-button-focus-overlay {
+  &::before {
     opacity: 0;
   }
 }
@@ -14,7 +14,7 @@
 // Use the same visual treatment for hover as for focus.
 .mat-button:hover,
 .mat-stroked-button:hover {
-  .mat-button-focus-overlay {
+  &::before {
     opacity: 0.04;
   }
 }
@@ -25,7 +25,7 @@
 @media (hover: none) {
   .mat-button:hover,
   .mat-stroked-button:hover {
-    .mat-button-focus-overlay {
+    &::before {
       opacity: 0;
     }
   }
@@ -41,26 +41,6 @@
   @include mat-raised-button;
 }
 
-.mat-stroked-button {
-  border: $mat-stroked-button-border-width solid currentColor;
-  padding: $mat-stroked-button-padding;
-  line-height: $mat-stroked-button-line-height;
-
-  // 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
-  // child element cannot expand to the same boundaries as the parent element with a border.
-  // In order to work around this issue by *not* hiding overflow, we adjust the child elements
-  // to fully cover the actual button element. This means that the border-radius would be correct
-  // then. See: https://github.com/angular/components/issues/13738
-  .mat-button-ripple.mat-ripple, .mat-button-focus-overlay {
-    top: -$mat-stroked-button-border-width;
-    left: -$mat-stroked-button-border-width;
-    right: -$mat-stroked-button-border-width;
-    bottom: -$mat-stroked-button-border-width;
-  }
-}
-
 .mat-fab {
   @include mat-fab($mat-fab-size, $mat-fab-padding);
 }
@@ -91,7 +71,7 @@
 // Increase specificity for the ripple container because ripple styles are part of
 // the `mat-core` mixin and can potentially overwrite the absolute position of the container.
 .mat-button-ripple.mat-ripple,
-.mat-button-focus-overlay {
+.mat-button-base::before {
   @include mat-fill;
 
   // Disable pointer events for the ripple container and focus overlay because the container
@@ -112,10 +92,17 @@
   transform: translateZ(0);
 }
 
+.mat-button-wrapper {
+  // Bump the `z-index` so the focus overlay and ripples go behind the content.
+  z-index: 1;
+  position: relative;
+}
+
 // Element that overlays the button to show focus and hover effects.
-.mat-button-focus-overlay {
+.mat-button-base::before {
   opacity: 0;
   transition: $mat-button-focus-transition;
+  content: '';
 
   ._mat-animation-noopable & {
     transition: none;
@@ -144,6 +131,29 @@
   z-index: 1;
 }
 
+// Note that this needs to be after initial declarations for `.mat-button-ripple` and
+// `.mat-button-base::before` so that we can override the top/left/right/bottom without
+// having to bump the specificity.
+.mat-stroked-button {
+  border: $mat-stroked-button-border-width solid currentColor;
+  padding: $mat-stroked-button-padding;
+  line-height: $mat-stroked-button-line-height;
+
+  // 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
+  // child element cannot expand to the same boundaries as the parent element with a border.
+  // In order to work around this issue by *not* hiding overflow, we adjust the child elements
+  // to fully cover the actual button element. This means that the border-radius would be correct
+  // then. See: https://github.com/angular/components/issues/13738
+  .mat-button-ripple.mat-ripple, &::before {
+    top: -$mat-stroked-button-border-width;
+    left: -$mat-stroked-button-border-width;
+    right: -$mat-stroked-button-border-width;
+    bottom: -$mat-stroked-button-border-width;
+  }
+}
+
 // Elements inside of all type of buttons should be vertical aligned in the middle.
 .mat-button, .mat-flat-button, .mat-stroked-button, .mat-raised-button, .mat-icon-button,
 .mat-fab, .mat-mini-fab {

src/material/button/button.ts

@@ -94,6 +94,11 @@ export class MatButton extends _MatButtonMixinBase
               @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode: string) {
     super(elementRef);
 
+    // Add a class that applies to all buttons. This makes it easier to target if somebody
+    // wants to target all Material buttons. We do it here rather than `host` to ensure that
+    // the class is applied to derived classes.
+    elementRef.nativeElement.classList.add('mat-button-base');
+
     // For each of the variant selectors that is prevent in the button's host
     // attributes, add the correct corresponding class.
     for (const attr of BUTTON_HOST_ATTRIBUTES) {