Review Skip to... links

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

-<a class="show-on-focus" href="#maincontent">Skip to main content</a>
-<a class="show-on-focus" href="#sidenav-container">Skip to utility menu</a>
+<a class="show-on-focus" href="/degree-planner/#maincontent">Skip to main content</a>
+<a class="show-on-focus" href="/degree-planner/#utilityMenu">Skip to utility menu</a>
 
 <myuw-app-bar
   role="main"

src/app/degree-planner/degree-planner-view/degree-planner-view.component.html

@@ -15,7 +15,6 @@
         </cse-alert-container>
 
         <div
-          id="maincontent"
           fxLayout="row"
           fxLayoutGap="20px"
           fxLayoutAlign="start center"

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

@@ -78,16 +78,16 @@
         </button>
         <mat-menu #courseMenu="matMenu" class="course-item-menu" isFocusable="true" isTabbable="true">
           <ng-template matMenuContent>
-            <button mat-menu-item (click)="openCourseDetailsDialog()" aria-describedby="course-details-content" aria-label="Open dialog to see course details">
+            <button mat-menu-item (click)="openCourseDetailsDialog()" aria-describedby="course-details-content" attr.aria-label="Open dialog to see {{ course | courseDescription }} course details">
               Course details
             </button>
-            <button mat-menu-item [matMenuTriggerFor]="academicYearsGroup" aria-label="Select to move this course to a different term">
+            <button mat-menu-item [matMenuTriggerFor]="academicYearsGroup" attr.aria-label="Select to move {{ course | courseDescription }} to a different term">
               Move to
             </button>
             <mat-menu #academicYearsGroup="matMenu" class="course-item-submenu">
                 <ng-template matMenuContent>
                   <button mat-menu-item *ngFor="let term of (droppableTermCodes$ | async)"
-                    aria-labelledby="Move course to this term"
+                    attr.aria-labelledby="Move {{ course | courseDescription }} course to {{ term | getTermDescription }} term"
                     (click)="onMove(term)">
                     {{ term | getTermDescription }}
                   </button>
@@ -95,14 +95,14 @@
             </mat-menu>
             <button
               mat-menu-item
-              aria-label="Move this course to Saved for later"
+              attr.aria-label="Move {{ course | courseDescription }} course to Saved for later"
               *ngIf="type !== 'saved'"
               (click)="onSaveForLater()">
               Save for later
             </button>
             <button
               mat-menu-item
-              aria-label="Remove this course from my plan"
+              attr.aria-label="Remove {{ course | courseDescription }} course from my plan"
               *ngIf="type !== 'search'"
               (click)="onRemove()">
               Remove

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

-<div id="sidenav-container" fxLayout="column" fxLayout.sm="column">
+<div id="utilityMenu" fxLayout="column" fxLayout.sm="column">
   <mat-expansion-panel id="course-keys-container" expanded="true" role="group" aria-labelledby="course-key-list">
     <mat-expansion-panel-header>
       <mat-panel-title>

src/assets/sass/general.scss

@@ -287,6 +287,8 @@ body {
   padding: 0.7rem 2.2rem;
   background-color: #fff;
   font-family: sans-serif;
+  font-size: 16px;
+  border: 1px solid #0479a8;
 }
 
 .sr-only {