fix(material/tabs): strong focus indicator not visible when tab heade…

…r has a background (#21402)

`mat-tab-group` has the ability to theme both the foreground and background. When
the background color is different from the default, the strong focus indicator blends
into it, making it invisible.

These changes invert the color of the indicator so it stands out.

(cherry picked from commit 16f2a60)

src/material-experimental/mdc-tabs/_tabs-theme.scss

@@ -80,7 +80,9 @@
       @include mdc-theme-prop(background-color, $foreground-color);
     }
 
-    .mdc-tab-indicator__content--underline, .mat-mdc-tab-header-pagination-chevron {
+    .mdc-tab-indicator__content--underline, .mat-mdc-tab-header-pagination-chevron,
+    .mat-mdc-focus-indicator::before,
+    .mat-mdc-focus-indicator::before {
       @include mdc-theme-prop(border-color, $foreground-color);
     }
   }

src/material/tabs/_tabs-theme.scss

@@ -116,7 +116,9 @@
   }
 
   // Set pagination chevrons to contrast background
-  > .mat-tab-header-pagination .mat-tab-header-pagination-chevron {
+  > .mat-tab-header-pagination .mat-tab-header-pagination-chevron,
+  > .mat-tab-links .mat-focus-indicator::before,
+  > .mat-tab-header .mat-focus-indicator::before {
     border-color: mat-color($background-color, default-contrast);
   }