bug(focus indicators): Move style for focus indicators to

Author: zelliott

src/dev-app/theme.scss

@@ -15,6 +15,9 @@
 @include angular-material-mdc-typography();
 @include mat-edit-typography(mat-typography-config());
 
+// MDC does not yet have an equivalent to `mat-core` to include this in.
+@include mat-mdc-strong-focus-indicators-base();
+
 // Include base styles for strong focus indicators.
 .demo-strong-focus {
   @include mat-strong-focus-indicators();

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

@@ -43,7 +43,7 @@
 
   // The focus indicator should match the bounds of the entire button.
   .mat-mdc-focus-indicator {
-    @include mat-fill;
+    @include mat-fill();
   }
 }
 

src/material-experimental/mdc-helpers/_mdc-helpers.scss

@@ -234,16 +234,12 @@ $mat-typography-level-mappings: (
   $border-radius: map-get($config, border-radius);
 
   // Base styles for focus indicators.
-  .mat-mdc-focus-indicator {
-    position: relative;
-
-    &::before {
-      @include mat-fill();
-      box-sizing: border-box;
-      pointer-events: none;
-      border: $border-width $border-style transparent;
-      border-radius: $border-radius;
-    }
+  .mat-mdc-focus-indicator::before {
+    @include mat-fill();
+    box-sizing: border-box;
+    pointer-events: none;
+    border: $border-width $border-style transparent;
+    border-radius: $border-radius;
   }
 
   // By default, all focus indicators are flush with the bounding box of their
@@ -313,3 +309,13 @@ $mat-typography-level-mappings: (
       $theme-or-color);
   }
 }
+
+/// Mixin that applies base styles required for focus indicators to render appropriately.
+/// Should be included once in your app.
+@mixin mat-mdc-strong-focus-indicators-base() {
+  // Ensure that focus indicator host elements are positioned so that the focus indicator
+  // pseudo element within is positioned relatively to the host.
+  .mat-mdc-focus-indicator {
+    position: relative;
+  }
+}

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';
@@ -14,6 +15,7 @@
 @mixin mat-core($typography-config: null) {
   @include angular-material-typography($typography-config);
   @include mat-ripple();
+  @include mat-strong-focus-indicators-base();
   @include cdk-a11y();
   @include cdk-overlay();
   @include cdk-text-field();

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

@@ -22,16 +22,12 @@
   $border-radius: map-get($config, border-radius);
 
   // Base styles for focus indicators.
-  .mat-focus-indicator {
-    position: relative;
-
-    &::before {
-      @include mat-fill();
-      box-sizing: border-box;
-      pointer-events: none;
-      border: $border-width $border-style transparent;
-      border-radius: $border-radius;
-    }
+  .mat-focus-indicator::before {
+    @include mat-fill();
+    box-sizing: border-box;
+    pointer-events: none;
+    border: $border-width $border-style transparent;
+    border-radius: $border-radius;
   }
 
   // By default, all focus indicators are flush with the bounding box of their
@@ -103,3 +99,13 @@
       $theme-or-color);
   }
 }
+
+/// Mixin that applies base styles required for focus indicators to render appropriately.
+/// Automatically included within `mat-core`, should not be directly included in your app.
+@mixin mat-strong-focus-indicators-base() {
+  // Ensure that focus indicator host elements are positioned so that the focus indicator
+  // pseudo element within is positioned relatively to the host.
+  .mat-focus-indicator {
+    position: relative;
+  }
+}

src/material/datepicker/calendar-body.scss

@@ -152,12 +152,6 @@ $mat-calendar-range-end-body-cell-size:
   cursor: default;
 }
 
-// Apply this style with additional specificity to override the focus indicator's relative
-// positioning.
-.mat-calendar-body-cell .mat-calendar-body-cell-content {
-  position: absolute;
-}
-
 .mat-calendar-body-cell-content {
   top: $mat-calendar-body-cell-content-margin;
   left: $mat-calendar-body-cell-content-margin;
@@ -180,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;
 
+  // Apply this style with additional specificity to override the focus indicator's relative
+  // positioning.
+  .mat-calendar-body-cell & {
+    position: absolute;
+  }
+
   @include cdk-high-contrast(active, off) {
     border: none;
   }

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

@@ -4,7 +4,6 @@
   align-items: center;
   padding: 0 24px;
   border-radius: inherit;
-  position: relative; // Necessary for the strong focus indication.
 
   &:focus,
   &:hover {

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 &,