[a11y] Applies disabled to stepper items that cannot be selected so t…

…hey cannot be tabbed to. Items that are tabbable will leverage existing styling when focused. PiperOrigin-RevId: 221189533
angulardart · Nov 15, 2018 · 0b2ab83 · 0b2ab83
1 parent 7ce8b13
commit 0b2ab83
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 13 deletions.
diff --git a/angular_components/lib/material_stepper/material_stepper.html b/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 -->

diff --git a/angular_components/lib/material_stepper/material_stepper.scss b/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;
-        }
-      }
-    }
   }
 }