fix(multiple): remove touch tap highlights (#26073)

Removes the touchscreen device tap highlights from the various components where we have similar indication.

Fixes #26068.

Author: crisbeto

src/material/button/_button-base.scss

@@ -10,6 +10,8 @@
 // ripple and state container so that they fill the button, match the border radius, and avoid
 // pointer events.
 @mixin mat-private-button-interactive() {
+  -webkit-tap-highlight-color: transparent;
+
   // The ripple container should match the bounds of the entire button.
   .mat-mdc-button-ripple,
   .mat-mdc-button-persistent-ripple,

src/material/checkbox/checkbox.scss

@@ -30,6 +30,7 @@
 
   // Avoids issues in some CSS grid layouts (see #25153).
   position: relative;
+  -webkit-tap-highlight-color: transparent;
 
   .mdc-checkbox {
     // MDC theme styles also include structural styles so we have to include the theme at least

src/material/chips/chip.scss

@@ -59,6 +59,8 @@
 }
 
 .mat-mdc-standard-chip {
+  -webkit-tap-highlight-color: transparent;
+
   @include mdc-helpers.disable-mdc-fallback-declarations {
     @include mdc-chip-theme.theme-styles((
       // Static tokens

src/material/core/option/option.scss

@@ -14,6 +14,7 @@
     mdc-list-variables.$side-padding, $query: mdc-helpers.$mdc-base-styles-query);
   @include vendor-prefixes.user-select(none);
   cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
 
   // If the MDC list is loaded after the option, this gets overwritten which breaks the text
   // alignment. Ideally we'd wrap all the MDC mixins above with this selector, but the increased

src/material/list/list.scss

@@ -27,12 +27,13 @@ a.mdc-list-item--activated {
   }
 }
 
-// MDC expects that the list items are always `<li>`, since we actually use `<button>` in some
-// cases, we need to make sure it expands to fill the available width.
 .mat-mdc-list-item,
 .mat-mdc-list-option {
+  // MDC expects that the list items are always `<li>`, since we actually use `<button>` in some
+  // cases, we need to make sure it expands to fill the available width.
   width: 100%;
   box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
 
   // MDC always sets the cursor to `pointer`. We do not want to show this for non-interactive
   // lists. See: https://github.com/material-components/material-components-web/issues/6443
@@ -41,10 +42,8 @@ a.mdc-list-item--activated {
   }
 }
 
-// MDC doesn't have list dividers, so we use mat-divider and style appropriately.
-// TODO(devversion): check if we can use the MDC dividers.
-.mat-mdc-list-item,
-.mat-mdc-list-option {
+  // MDC doesn't have list dividers, so we use mat-divider and style appropriately.
+  // TODO(devversion): check if we can use the MDC dividers.
   .mat-divider-inset {
     position: absolute;
     left: 0;

src/material/radio/radio.scss

@@ -15,6 +15,8 @@
 }
 
 .mat-mdc-radio-button {
+  -webkit-tap-highlight-color: transparent;
+
   .mdc-radio {
     // MDC theme styles also include structural styles so we have to include the theme at least
     // once here. The values will be overwritten by our own theme file afterwards.

src/material/slide-toggle/slide-toggle.scss

@@ -15,6 +15,7 @@
 
 .mat-mdc-slide-toggle {
   display: inline-block;
+  -webkit-tap-highlight-color: transparent;
 
   // Remove the native outline since we use the ripple for focus indication.
   outline: 0;

src/material/tabs/_tabs-common.scss

@@ -26,6 +26,8 @@ $mat-tab-animation-duration: 500ms !default;
 }
 
 @mixin tab {
+  -webkit-tap-highlight-color: transparent;
+
   &.mdc-tab {
     // This is usually included by MDC's tab bar, however we don't
     // use it because we implement our own pagination.