[a11y] Applies disabled to stepper items that cannot be selected so they cannot be tabbed to. Items that are tabbable will leverage existing styling when focused.

PiperOrigin-RevId: 221189533

Author: Googler

angular_components/lib/material_stepper/material_stepper.html

@@ -16,6 +16,7 @@
        [class.can-select]="step.isSelectable"
        attr.active="{{step.active}}"
        attr.selectable="{{step.isSelectable}}"
+       [disabled]="step.isNotSelectable"
        buttonDecorator
        (trigger)="jumpStep(step.index)">
     <!-- Step number in circle -->

angular_components/lib/material_stepper/material_stepper.scss

@@ -110,6 +110,14 @@ $edit-icon-size: $mat-grid * 2;
   outline-width: 0;
   position: relative;
 
+  &[selectable = true]:focus {
+    background-color: $mat-grey-200;
+
+    .edit-icon {
+      color: $mat-grey-700;
+    }
+  }
+
   &[orientation = horizontal] {
     display: flex;
     flex-direction: row;
@@ -118,19 +126,6 @@ $edit-icon-size: $mat-grid * 2;
   &[orientation = vertical] {
     padding-bottom: $mini-spacing;
     width: auto;
-
-    &[active = false] {
-
-      &[selectable = true] {
-        &:hover {
-          background-color: $mat-grey-200;
-        }
-
-        &:hover .edit-icon {
-          color: $mat-grey-700;
-        }
-      }
-    }
   }
 }