Accessibility fixes

src/app/app.component.html

-<div class="alert-banner">
+<div class="alert-banner" tabindex="0">
   <p><md-icon class="material-icons error" role="img" aria-hidden="true">warning</md-icon> Course Search & Enroll will not be available from June 28 at 4:00pm to July 8 at 8:00am due to the <a href="https://upgrade.sis.wisc.edu/" target="_blank">SIS Upgrade.</a></p>
 </div>
 <header ngClass.sm="hide-navigation-bar" ngClass.xs="hide-navigation-bar" role="banner">

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

@@ -24,9 +24,9 @@
           <mat-form-field class="degree-plans-form-field" floatLabel="always">
             <mat-label>Degree Plans</mat-label>
             <mat-select
-              aria-label="Degree plans list"
+              attr.aria-label="Degree plans list - {{ degreePlan.name }} selected"
               [disabled]="isLoadingPlan$ | async"
-              placeholder="Degree Plans"
+              placeholder="Degree Plans list"
               class="degree-plan-selector"
               [value]="degreePlan.roadmapId"
               [disableOptionCentering]="true"
@@ -37,6 +37,7 @@
                   class="primary-star"
                   *ngIf="degreePlan.primary"
                   alt="Primary degree plan star"
+                  aria-label="Primary plan selected"
                   matTooltip="Primary plan"
                   matTooltipPosition="above"
                   >star_rate</mat-icon>
@@ -47,13 +48,16 @@
               <mat-option
                 *ngFor="let degreePlan of (allDegreePlans$ | async)"
                 [value]="degreePlan.roadmapId">
-                <mat-icon
+                  <mat-icon
+                  id="primary-plan-star"
                   class="primary-star"
                   *ngIf="degreePlan.primary"
+                  aria-label="Primary plan"
                   alt="Primary degree plan star"
                   matTooltip="Primary plan"
                   matTooltipPosition="above"
                   >star_rate</mat-icon>
+                  <span *ngIf="degreePlan.primary" aria-labelledby="primary-plan-star"></span>
                 <span class="plan-name">{{ degreePlan.name }}</span>
               </mat-option>
             </mat-select>

src/app/degree-planner/saved-for-later-container/saved-for-later-container.component.html

-<div class="term-container">
-  <div
+<div class="term-container"
+    aria-label="List of saved for later courses"
     id="saved-courses"
+    isFocusable="true"
+    isTabbable="true"
+    tabindex="0">
+  <div
     class="course-list"
     cdkDropList
     [cdkDropListData]="courses$ | async"
@@ -15,7 +19,7 @@
       [cdkDragDisabled]="mobileView.matches"
       [cdkDragData]="course">
       <div class="course-wrapper-inner">
-        <cse-course-item role="button" aria-labelledby="saved-courses" [course]="course" type="saved" class="course-favorite"></cse-course-item>
+        <cse-course-item role="button" aria-describedby="saved-courses" [course]="course" type="saved" class="course-favorite"></cse-course-item>
       </div>
     </div>
 

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

 <div id="sidenav-container" fxLayout="column" fxLayout.sm="column">
-  <mat-expansion-panel id="course-keys-container" expanded="true">
+  <mat-expansion-panel id="course-keys-container" expanded="true" role="group" aria-labelledby="course-key-list">
     <mat-expansion-panel-header>
       <mat-panel-title>
         <h3>Course key</h3>
       </mat-panel-title>
     </mat-expansion-panel-header>
-    <mat-list id="course-key-list" role="list">
+    <mat-list id="course-key-list" role="list"
+      aria-label="Course key List"
+      isFocusable="true"
+      isTabbable="true"
+      tabindex="0">
       <mat-list-item role="listitem">
         <i
+          aria-hidden="true"
           class="material-icons in-progress-icon"
           alt="Course is in progress">
           check_circle
@@ -16,6 +21,7 @@
       </mat-list-item>
       <mat-list-item role="listitem">
         <i
+          aria-hidden="true"
           class="material-icons problem-icon"
           alt="Course is waitlisted">
           report_problem
@@ -24,6 +30,7 @@
       </mat-list-item>
       <mat-list-item role="listitem">
         <i
+          aria-hidden="true"
           class="material-icons error-icon"
           alt="Course is not offered in term">
           error
@@ -32,6 +39,7 @@
       </mat-list-item>
       <mat-list-item>
         <i
+          aria-hidden="true"
           class="material-icons not-offered-icon"
           alt="Course is no longer offered">
           not_interested
@@ -47,7 +55,10 @@
         <h3>Menu</h3>
       </mat-panel-title>
     </mat-expansion-panel-header>
-    <div>
+    <div aria-label="Utility menu items"
+      isFocusable="true"
+      isTabbable="true"
+      tabindex="0">
       <a mat-button class="sidenav-link-btn" target="_blank" href="/api/degreeplanpdf?roadmapId={{ planId }}&hideGrades={{ !(showGrades$ | async) }}">
         <i aria-hidden="true" class="material-icons" alt="create pdf">picture_as_pdf</i>
         Create PDF

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

 <ng-template #enrolled id="enrolled-courses">
   <div class="course-list-wrapper">
     <div class="course-list">
-      <div class="course-list-inner">
+      <div class="course-list-inner"
+        attr.aria-label="List of courses in {{ termCode | getTermDescription }} term"
+        isFocusable="true"
+        isTabbable="true"
+        tabindex="0">
         <ng-container *ngIf="enrolledCourses.length === 0">
-          <p *ngIf="(term$ | async).termCode.isPast()" class="no-courses">
+          <p *ngIf="(term$ | async).termCode.isPast()" aria-label="No courses taken" class="no-courses">
             No courses taken
           </p>
-          <p *ngIf="(term$ | async).termCode.isActive()" class="no-courses">
+          <p *ngIf="(term$ | async).termCode.isActive()" aria-label="Not enrolled in any courses" class="no-courses">
             Not enrolled in any courses
           </p>
         </ng-container>
@@ -36,7 +40,11 @@
       (cdkDropListDropped)="drop($event)"
       (cdkDropListEntered)="dragEnter($event)"
       (cdkDropListExited)="dragExit($event)">
-      <div class="course-list-inner term-body">
+      <div class="course-list-inner term-body"
+        attr.aria-label="List of courses in {{ termCode | getTermDescription }} term"
+        isFocusable="true"
+        isTabbable="true"
+        tabindex="0">
         <ng-container
           *ngIf="plannedCourses.length === 0 && !hasItemDraggedOver">
           <p *ngIf="(term$ | async).termCode.isActive()" class="no-courses">
@@ -86,22 +94,26 @@
   class="term-container"
   [ngClass]="{ 'no-scrolling': mobileView.matches }"
   role="region"
-  cdkFocusInitial
->
+  cdkFocusInitial>
   <div class="term-inner">
     <div
       fxLayout="row"
       class="term-header"
-      fxLayoutAlign="space-between center">
+      fxLayoutAlign="space-between center"
+      attr.aria-label="{{ termCode | getTermDescription }} term"
+      isFocusable="true"
+      isTabbable="true"
+      tabindex="0">
       <h3 tabindex="0" class="term-description">{{ termCode | getTermDescription }}</h3>
+
       <div fxLayout="row" fxLayoutAlign="space-between center">
         <p class="text-right semi-bold credits">
-          <span *ngIf="visibleCredits === 'planned'" attr.aria-label="{{ plannedCredits }} credits">
-            {{ plannedCredits }} Cr
-          </span>
-          <span *ngIf="visibleCredits === 'enrolled'" attr.aria-label="{{ enrolledCredits }} credits">
-            {{ enrolledCredits }} Cr
-          </span>
+          <ng-container *ngIf="visibleCredits === 'planned'">
+            <span attr.aria-label="{{ plannedCredits }} credits">{{ plannedCredits }} Cr</span>
+          </ng-container>
+          <ng-container *ngIf="visibleCredits === 'enrolled'">
+            <span attr.aria-label="{{ enrolledCredits }} credits">{{ enrolledCredits }} Cr</span>
+          </ng-container>
         </p>
         <ng-container *ngIf="(note$ | async) as note; else newNote">
           <button
@@ -163,22 +175,22 @@
       <!-- If this term is an active term -->
   <ng-container *ngIf="(term$ | async).termCode.isActive()">
     <mat-tab-group (selectedTabChange)="changeVisibleCredits($event)" [selectedIndex]="(enrolledCourses.length > 0) ? 0 : 1">
-      <mat-tab [label]="'In Progress (' + enrolledCourses.length + ')'" aria-label="In progress courses">
+      <mat-tab [label]="'In Progress (' + enrolledCourses.length + ')'" [aria-label]="'In Progress courses (' + enrolledCourses.length + ')'">
         <ng-container cdkFocusinitial *ngTemplateOutlet="enrolled"></ng-container>
       </mat-tab>
-      <mat-tab [label]="(isPrimaryPlan) ? 'Cart (' + plannedCourses.length + ')' : 'Planned (' + plannedCourses.length + ')'" [aria-label]="(isPrimaryPlan) ? 'cart courses' : 'planned courses'">
+      <mat-tab [label]="(isPrimaryPlan) ? 'Cart (' + plannedCourses.length + ')' : 'Planned (' + plannedCourses.length + ')'" [aria-label]="(isPrimaryPlan) ? 'Cart courses (' + plannedCourses.length + ')' : 'Planned courses (' + plannedCourses.length + ')'">
         <ng-container cdkFocusinitial *ngTemplateOutlet="planned"></ng-container>
       </mat-tab>
     </mat-tab-group>
   </ng-container>
-  
+
   <!-- If this term is a past term -->
   <ng-container *ngIf="(term$ | async).termCode.isPast()">
     <mat-tab-group (selectedTabChange)="changeVisibleCredits($event)" [selectedIndex]="0">
-      <mat-tab [label]="'Completed (' + enrolledCourses.length + ')'" aria-label="Completed courses">
+      <mat-tab [label]="'Completed (' + enrolledCourses.length + ')'" [aria-label]="'Completed courses (' + enrolledCourses.length + ')'">
         <ng-container cdkFocusinitial *ngTemplateOutlet="enrolled"></ng-container>
       </mat-tab>
-        <mat-tab [label]="(isPrimaryPlan) ? 'Cart (' + plannedCourses.length + ')' : 'Planned (' + plannedCourses.length + ')'" [aria-label]="(isPrimaryPlan) ? 'cart courses' : 'planned courses'">
+        <mat-tab [label]="(isPrimaryPlan) ? 'Cart (' + plannedCourses.length + ')' : 'Planned (' + plannedCourses.length + ')'" [aria-label]="(isPrimaryPlan) ? 'Cart courses (' + plannedCourses.length + ')' : 'Planned courses (' + plannedCourses.length + ')'">
           <ng-container cdkFocusinitial *ngTemplateOutlet="planned"></ng-container>
         </mat-tab>
     </mat-tab-group>

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

@@ -15,8 +15,7 @@
 
 .term-description {
   &:focus {
-    outline: 2px solid #5e9ed6;
-    outline: -webkit-focus-ring-color auto 5px;
+    outline: none;
   }
 }
 /deep/.mat-tab-label,

src/app/shared/components/course-details/course-details.component.html

@@ -3,8 +3,8 @@
     <div class="term-selection" *ngIf="type === 'search' || type === 'saved'" fxLayout="row" fxFlex="100">
       <form [formGroup]="termSelector" (ngSubmit)="addCourseToPlan($event)" style="width:100%;display:flex">
         <mat-form-field style="margin-right:20px;">
-          <mat-select [compareWith]="sameTermCodes" placeholder="Term" aria-label="Term" matInput role="listbox" formControlName="term" cdkFocusInitial>
-            <mat-option role="option" *ngFor="let term of (droppableTermCodes$ | async)" [value]="term" >
+          <mat-select [compareWith]="sameTermCodes" placeholder="Select term from the list to move the course" aria-label="Select term to move the course" matInput role="listbox" formControlName="term" cdkFocusInitial>
+            <mat-option role="option" *ngFor="let term of (droppableTermCodes$ | async)" [value]="term">
               {{ term | getTermDescription }}
             </mat-option>
           </mat-select>
@@ -36,7 +36,7 @@
             <mat-select
               [compareWith]="sameTermCodes"
               placeholder="Term"
-              aria-label="Term"
+              aria-label="Select term from the list to move the course"
               matInput
               role="listbox"
               formControlName="term"