fix(material/stepper): remove ripple and hover styling for disabled step (#23386)

Author: amysorto

src/material/stepper/_stepper-theme.scss

@@ -17,10 +17,15 @@
   .mat-step-header {
     &.cdk-keyboard-focused,
     &.cdk-program-focused,
-    &:hover {
+    &:hover:not([aria-disabled]),
+    &:hover[aria-disabled='false'] {
       background-color: theming.get-color-from-palette($background, hover);
     }
 
+    &:hover[aria-disabled='true'] {
+      cursor: default;
+    }
+
     // On touch devices the :hover state will linger on the element after a tap.
     // Reset it via `@media` after the declaration, because the media query isn't
     // supported by all browsers yet.

src/material/stepper/stepper.html

@@ -70,6 +70,6 @@
     [optional]="step.optional"
     [errorMessage]="step.errorMessage"
     [iconOverrides]="_iconOverrides"
-    [disableRipple]="disableRipple"
+    [disableRipple]="disableRipple || !_stepIsNavigable(i, step)"
     [color]="step.color || color"></mat-step-header>
 </ng-template>