fix(material): Focus indicators are now positioned (angular#19345)

Position all focus indicator host elements & quick fix date picker focus indicator bug.

Author: zelliott

src/material-experimental/mdc-button/_button-base.scss

@@ -40,6 +40,11 @@
   .mdc-button__label {
     z-index: 1;
   }
+
+  // The focus indicator should match the bounds of the entire button.
+  .mat-mdc-focus-indicator {
+    @include mat-fill();
+  }
 }
 
 // MDC's disabled buttons define a default cursor with pointer-events none. However, they select

src/material-experimental/mdc-helpers/_focus-indicators.scss

@@ -2,7 +2,6 @@
 @import '../../material/core/style/layout-common';
 @import '../../material/core/focus-indicators/focus-indicators';
 
-
 /// Mixin that turns on strong focus indicators.
 ///
 /// @example

src/material/core/_core.scss

@@ -5,6 +5,7 @@
 // Core styles that can be used to apply material design treatments to any element.
 @import './style/elevation';
 @import './ripple/ripple';
+@import './focus-indicators/focus-indicators';
 @import './option/option-theme';
 @import './option/optgroup-theme';
 @import './selection/pseudo-checkbox/pseudo-checkbox-theme';
@@ -17,6 +18,9 @@
   @include cdk-a11y();
   @include cdk-overlay();
   @include cdk-text-field();
+
+  @include _mat-strong-focus-indicators-positioning();
+  @include _mat-mdc-core();
 }
 
 @mixin mat-core-color($config-or-theme) {
@@ -67,3 +71,17 @@
     }
   }
 }
+
+// Mixin that renders all of the core MDC styles. Private mixin included with `mat-core`.
+@mixin _mat-mdc-core() {
+  @include _mat-mdc-strong-focus-indicators-positioning();
+}
+
+// Mixin that ensures focus indicator host elements are positioned so that the focus indicator
+// pseudo element within is positioned relative to the host. Private mixin included within
+// `_mat-mdc-core`.
+@mixin _mat-mdc-strong-focus-indicators-positioning() {
+  .mat-mdc-focus-indicator {
+    position: relative;
+  }
+}

src/material/core/focus-indicators/_focus-indicators.scss

@@ -45,14 +45,11 @@
     margin: -($border-width + 2px);
   }
 
-  .mat-focus-indicator.mat-stroked-button::before {
+  .mat-focus-indicator.mat-stroked-button::before,
+  .mat-focus-indicator.mat-calendar-body-cell-content::before {
     margin: -($border-width + 3px);
   }
 
-  .mat-focus-indicator.mat-calendar-body-cell::before {
-    margin: -$border-width;
-  }
-
   .mat-focus-indicator.mat-tab-link::before,
   .mat-focus-indicator.mat-tab-label::before {
     margin: 5px;
@@ -71,8 +68,9 @@
   // is present.
   .mat-focus-indicator.mat-option.mat-active::before,
 
-  // The focus indicator in the calendar is placed on an element inside the cell.
-  .mat-calendar-body-active .mat-focus-indicator::before,
+  // For calendar cells, render the focus indicator when the parent cell is
+  // focused.
+  .mat-calendar-body-cell:focus .mat-focus-indicator::before,
 
   // For all other components, render the focus indicator on focus.
   .mat-focus-indicator:focus::before {
@@ -122,3 +120,12 @@
     }
   }
 }
+
+// Mixin that ensures focus indicator host elements are positioned so that the focus indicator
+// pseudo element within is positioned relative to the host. Private mixin included within
+// `mat-core`.
+@mixin _mat-strong-focus-indicators-positioning() {
+  .mat-focus-indicator {
+    position: relative;
+  }
+}

src/material/datepicker/calendar-body.scss

@@ -153,7 +153,6 @@ $mat-calendar-range-end-body-cell-size:
 }
 
 .mat-calendar-body-cell-content {
-  position: absolute;
   top: $mat-calendar-body-cell-content-margin;
   left: $mat-calendar-body-cell-content-margin;
   z-index: 1;
@@ -175,6 +174,12 @@ $mat-calendar-range-end-body-cell-size:
   // Choosing a value clearly larger than the height ensures we get the correct capsule shape.
   border-radius: $mat-calendar-body-cell-radius;
 
+  // Increase specificity because focus indicator styles are part of the `mat-core` mixin and can
+  // potentially overwrite the absolute position of the container.
+  &.mat-focus-indicator {
+    position: absolute;
+  }
+
   @include cdk-high-contrast(active, off) {
     border: none;
   }

src/material/expansion/expansion-panel-header.scss

@@ -6,7 +6,6 @@
   align-items: center;
   padding: 0 24px;
   border-radius: inherit;
-  position: relative; // Necessary for the strong focus indication.
   transition: height $mat-expansion-panel-header-transition;
 
   // If the `NoopAnimationsModule` is used, disable the height transition.

src/material/expansion/expansion-panel.scss

@@ -13,7 +13,8 @@
   transition: margin 225ms $mat-fast-out-slow-in-timing-function,
       mat-elevation-transition-property-value();
 
-  // Required so that the `box-shadow` works after we add `position: relative` to the header.
+  // Required so that the `box-shadow` works after the focus indicator relatively positions the
+  // header.
   position: relative;
 
   .mat-accordion & {

src/material/list/list.scss

@@ -48,9 +48,6 @@ $mat-list-item-inset-divider-offset: 72px;
   width: 100%;
   padding: 0;
 
-  // Required for focus indicator.
-  position: relative;
-
   .mat-list-item-content {
     display: flex;
     flex-direction: row;

src/material/sort/sort-header.scss

@@ -32,9 +32,6 @@ $mat-sort-header-arrow-hint-opacity: 0.38;
   font: inherit;
   color: currentColor;
 
-  // Required for focus indicator.
-  position: relative;
-
   // Usually we could rely on the arrow showing up to be focus indication, but if a header is
   // active, the arrow will always be shown so the user has no way of telling the difference.
   [mat-sort-header].cdk-keyboard-focused &,