Cross browser accessibility fix continue

src/app/app.component.html

-<header ngClass.sm="hide-navigation-bar" ngClass.xs="hide-navigation-bar">
+<header ngClass.sm="hide-navigation-bar" ngClass.xs="hide-navigation-bar" role="banner">
   <cse-header></cse-header>
   <cse-navigation></cse-navigation>
 </header>
-<main>
+<main role="main">
   <router-outlet></router-outlet>
 </main>

src/app/core/header/header.component.html

 <myuw-app-bar
+role="main"
   theme-name=""
   app-name="Course Search & Enroll"
   app-url="https://my.wisc.edu">
-  <myuw-drawer slot="myuw-navigation" fxShow fxHide.gt-sm>
+  <myuw-drawer slot="myuw-navigation" fxShow fxHide.gt-sm role="navigation" aria-label="Main Menu">
     <myuw-drawer-link
       slot="myuw-drawer-links"
       name="Course Search"
       icon=""
+      aria-label="course search"
       href="/search">
     </myuw-drawer-link>
     <myuw-drawer-link
       slot="myuw-drawer-links"
       name="My Courses"
       icon=""
+      aria-label="my courses"
       href="/my-courses">
     </myuw-drawer-link>
     <myuw-drawer-link
       slot="myuw-drawer-links"
       name="Scheduler"
       icon=""
+      aria-label="scheduler"
       href="/scheduler">
     </myuw-drawer-link>
     <myuw-drawer-link
       slot="myuw-drawer-links"
       name="Degree Planner"
       icon=""
+      aria-label="degree planner"
       href="/degree-planner">
     </myuw-drawer-link>
     <myuw-drawer-link
       slot="myuw-drawer-links"
       name="Degree Audit (DARS)"
       icon=""
+      aria-label="degree audit"
       href="/dars">
     </myuw-drawer-link>
   </myuw-drawer>

src/app/core/navigation/navigation.component.html

 <div fxLayout="row" fxLayoutAlign="space-between center" class="nav-wrapper" >
-  <nav mat-tab-nav-bar fxHide fxShow.gt-sm>
+  <nav mat-tab-nav-bar fxHide fxShow.gt-sm role="navigation" aria-label="Main Menu">
     <a mat-tab-link href="/search">Search</a>
     <a mat-tab-link href="/my-courses">My courses</a>
     <a mat-tab-link href="/scheduler">Scheduler</a>
     <a mat-tab-link class="active" href="/degree-planner">Degree Planner</a>
     <a mat-tab-link href="/dars">Degree Audit (DARS)</a>
   </nav>
-  <button class="btn-feedback" (click)="onFeedbackClick()">Feedback</button>
+  <button class="btn-feedback" aria-describedby="feedback-dialog" (click)="onFeedbackClick()">Feedback</button>
 </div>

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

@@ -34,6 +34,10 @@
   font-family: Roboto, 'Helvetica Neue', Arial, Helvetica, sans-serif;
   font-size: 14px;
   font-weight: 500;
+  &:focus {
+    outline: 2px solid #5e9ed6;
+    outline: -webkit-focus-ring-color auto 5px;
+  }
 }
 
 @media screen and (max-width: 960px) {

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

@@ -10,7 +10,6 @@
       fxLayout="column"
       fxLayoutAlign="space-between start"
       fxFlex="80"
-      aria-labelledby="courseMenu"
       aria-haspopup="true">
       <div fxLayout="row" fxLayoutAlign="start center">
         <div class="icon-number-wrapper">
@@ -91,7 +90,7 @@
         </button>
         <mat-menu #courseMenu="matMenu" class="course-item-menu" isFocusable="true" isTabbable="true">
           <ng-template matMenuContent>
-            <button mat-menu-item (click)="openCourseDetailsDialog()" aria-label="Open dialog to see course details">
+            <button mat-menu-item (click)="openCourseDetailsDialog()" aria-describedby="course-details-content" aria-label="Open dialog to see course details">
               Course Details
             </button>
             <button mat-menu-item [matMenuTriggerFor]="academicYearsGroup" aria-label="Select to move this course to a different term">

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

@@ -25,6 +25,10 @@
     border-color: map-get($uw-primary, 500);
     box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.25);
   }
+  &:focus {
+    outline: 2px solid #5e9ed6;
+    outline: -webkit-focus-ring-color auto 5px;
+  }
 
   &.disabled {
     background-color: #dee1e2;

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

@@ -92,7 +92,7 @@
       class="term-header"
       fxLayoutAlign="space-between center"
     >
-      <h2 tabindex="0">{{ termCode | getTermDescription }}</h2>
+      <h2 tabindex="0" class="term-description">{{ termCode | getTermDescription }}</h2>
       <div fxLayout="row" fxLayoutAlign="space-between center">
         <p class="text-right semi-bold credits">
           <span *ngIf="visibleCredits === 'planned'">

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

@@ -13,6 +13,12 @@
   }
 }
 
+.term-description {
+  &:focus {
+    outline: 2px solid #5e9ed6;
+    outline: -webkit-focus-ring-color auto 5px;
+  }
+}
 /deep/.mat-tab-label,
 /deep/.mat-tab-label-active {
   min-width: 0 !important;

src/assets/sass/general.scss

@@ -175,7 +175,7 @@ body {
 .mat-expansion-panel-header {
   font-size: 18px;
   &:focus {
-    outline: 2px solid #5e9ed6;
+    outline: 2px solid #5e9ed6 !important;
     outline: -webkit-focus-ring-color auto 5px !important;
   }
 }