Add focus state and style to tabbable elements

src/app/core/header/header.component.scss

@@ -30,6 +30,7 @@ myuw-help {
     background: transparent;
   }
 }
+
 button#myuw-three-dot {
   width: 34px;
   height: 34px;
@@ -41,3 +42,14 @@ button#myuw-three-dot {
   line-height: 28px;
   background: rgb(142, 26, 17);
 }
+
+myuw-help,
+myuw-drawer,
+myuw-profile,
+#myuw-three-dot,
+#myuw-help__close-button {
+  &:focus {
+    outline: auto;
+    outline: -webkit-focus-ring-color auto 5px;
+  }
+}

src/app/core/navigation/navigation.component.scss

@@ -15,6 +15,10 @@
   .mat-tab-link {
     opacity: 1;
     min-width: auto;
+    &:focus {
+      outline: auto;
+      outline: -webkit-focus-ring-color auto 5px;
+    }
   }
   .mat-tab-link.active {
     border-bottom: 2px solid map-get($uw-primary, 500);

src/app/degree-planner/degree-planner.component.scss

@@ -41,6 +41,10 @@ mat-sidenav {
   .primary-star {
     margin-right: 12px;
   }
+  &:focus {
+    outline: auto;
+    outline: -webkit-focus-ring-color auto 5px;
+  }
 }
 
 @media screen and (max-width: 600px) {

src/app/degree-planner/shared/course-item/course-item.component.html

@@ -25,6 +25,7 @@
               *ngSwitchCase="'InProgress'"
               class="material-icons in-progress-icon"
               alt="Course in progress"
+              aria-label="Course in progress"
               matTooltip="Course in progress"
               matTooltipPosition="above">
               check_circle
@@ -33,6 +34,7 @@
               *ngSwitchCase="'Waitlisted'"
               class="material-icons problem-icon"
               alt="Course is waitlisted"
+              aria-label="Course is waitlisted"
               matTooltip="Course is waitlisted"
               matTooltipPosition="above">
               report_problem
@@ -41,6 +43,7 @@
               *ngSwitchCase="'Incomplete'"
               class="material-icons cancel-icon"
               alt="Course is incomplete"
+              aria-label="Course is incomplete"
               matTooltip="Course is incomplete"
               matTooltipPosition="above">
               cancel
@@ -49,6 +52,7 @@
               *ngSwitchCase="'NotOfferedInTerm'"
               class="material-icons error-icon"
               alt="Course not offered in term"
+              aria-label="Course is not offered in term"
               matTooltip="Course is not offered in term"
               matTooltipPosition="above">
               error
@@ -57,6 +61,7 @@
               *ngSwitchCase="'NoLongerOffered'"
               class="material-icons not-offered-icon"
               alt="Course no longer offered"
+              aria-label="Course no longer offered"
               matTooltip="Course no longer offered"
               matTooltipPosition="above">
               remove

src/app/degree-planner/shared/course-item/course-item.component.scss

@@ -53,10 +53,13 @@
     text-align: center;
     font-size: 24px;
     line-height: 1;
-    &:hover,
-    &:focus {
+    &:hover {
       opacity: 0.8;
     }
+    &:focus {
+      outline: auto;
+      outline: -webkit-focus-ring-color auto 5px;
+    }
   }
 }
 
@@ -69,12 +72,20 @@
   width: 24px;
   height: 24px;
   line-height: 20px;
+  &:focus {
+    outline: auto;
+    outline: -webkit-focus-ring-color auto 5px;
+  }
 }
 
 .material-icons {
   padding-top: 0;
   position: relative;
   top: 1px;
+  &:focus {
+    outline: auto;
+    outline: -webkit-focus-ring-color auto 5px;
+  }
 }
 
 .course-number {

src/app/degree-planner/sidenav-menu-item/sidenav-menu-item.component.scss

@@ -30,6 +30,10 @@
   .material-icons {
     padding-right: 8px;
   }
+  &:focus {
+    outline: auto;
+    outline: -webkit-focus-ring-color auto 5px;
+  }
 }
 
 #course-key-list {

src/app/degree-planner/term-container/term-container.component.scss

@@ -17,7 +17,11 @@
 /deep/.mat-tab-label-active {
   min-width: 0 !important;
   padding: 0px 10px !important;
-  margin: 0px !important;
+  margin: 3px !important;
+  &:focus {
+    outline: auto;
+    outline: -webkit-focus-ring-color auto 5px !important;
+  }
 }
 
 /deep/.mat-tab-header {
@@ -80,10 +84,13 @@
     line-height: 20px;
     margin-left: 5px;
     color: #2879a8;
-    &:hover,
-    &:focus {
+    &:hover {
       opacity: 0.8;
     }
+    &:focus {
+      outline: auto;
+      outline: -webkit-focus-ring-color auto 5px;
+    }
   }
 }
 

src/app/degree-planner/year-container/year-container.component.scss

+.year-container {
+  padding: 4px;
+}

src/assets/sass/general.scss

@@ -43,6 +43,10 @@ body {
   font-weight: 400 !important;
   letter-spacing: 1px;
   font-size: 14px;
+  &:focus {
+    outline: auto;
+    outline: -webkit-focus-ring-color auto 5px;
+  }
 }
 
 .btn-primary {
@@ -54,10 +58,18 @@ body {
   color: map-get($uw-primary, 500) !important;
   border: 1px solid #b7b7b7 !important;
   border-radius: 4px !important;
+  &:focus {
+    outline: auto;
+    outline: -webkit-focus-ring-color auto 5px;
+  }
 }
 
 .btn-link {
   color: map-get($uw-primary, 500) !important;
+  &:focus {
+    outline: auto;
+    outline: -webkit-focus-ring-color auto 5px;
+  }
 }
 
 .btn-delete {
@@ -93,19 +105,41 @@ body {
 .not-offered-icon {
   font-size: 24px !important;
   margin-left: 5px;
-  &:hover,
-  &:focus {
+  &:hover {
     cursor: default;
     opacity: 0.9;
   }
+  &:focus {
+    outline: -webkit-focus-ring-color auto 5px;
+  }
+}
+
+.mat-expansion-panel-header.mat-expanded {
+  margin: 4px;
+}
+
+.mat-select-panel .mat-option:focus,
+.mat-option.mat-active {
+  outline: auto;
+  outline: -webkit-focus-ring-color auto 5px;
 }
 
 .mat-icon,
-.material-icons {
-  &:hover,
-  &:focus {
+.mat-icon-button,
+.material-icons,
+.add-course-button,
+.mat-button,
+.mat-menu-item,
+.mat-primary,
+.mat-form-field,
+#menu-toggle-btn {
+  &:hover {
     opacity: 0.8;
   }
+  &:focus {
+    outline: auto;
+    outline: -webkit-focus-ring-color auto 5px;
+  }
 }
 
 .cdk-drop-list-dragging {
@@ -158,6 +192,10 @@ body {
 
 .mat-expansion-panel-header {
   font-size: 18px;
+  &:focus {
+    outline: auto;
+    outline: -webkit-focus-ring-color auto 5px !important;
+  }
 }
 
 .mat-expanded,
@@ -173,6 +211,9 @@ body {
 .mat-menu-content {
   width: 200px !important;
 }
+.mat-menu-content {
+  margin: 0px 3px;
+}
 
 .saved-for-later-list {
   border-bottom: 1px solid #f1f1f1 !important;
@@ -198,6 +239,10 @@ body {
   }
   .close-btn {
     min-height: 55px;
+    &:focus {
+      outline: auto;
+      outline: -webkit-focus-ring-color auto 5px;
+    }
   }
 }