Add cdkDragStarted property to watch when course is dragged

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

@@ -13,7 +13,6 @@
       aria-haspopup="true">
       <div fxLayout="row" fxLayoutAlign="start center">
         <div class="icon-number-wrapper">
-          <span class="assistive-text">Moving course {{ course | courseDescription }}</span>
           <p cdkFocusRegionStart class="course-number">
             {{ course | courseDescription }}
           </p>

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

@@ -18,8 +18,7 @@
           type="course"
           [disabled]="true"
           [course]="course"
-          [era]="(term$ | async).era"
-        >
+          [era]="(term$ | async).era">
         </cse-course-item>
       </div>
     </div>
@@ -36,12 +35,10 @@
       [cdkDropListConnectedTo]="dropZoneIds$ | async"
       (cdkDropListDropped)="drop($event)"
       (cdkDropListEntered)="dragEnter($event)"
-      (cdkDropListExited)="dragExit($event)"
-    >
+      (cdkDropListExited)="dragExit($event)">
       <div class="course-list-inner term-body">
         <ng-container
-          *ngIf="plannedCourses.length === 0 && !hasItemDraggedOver"
-        >
+          *ngIf="plannedCourses.length === 0 && !hasItemDraggedOver">
           <p *ngIf="(term$ | async).era === 'active'" class="no-courses">
             No Courses in cart
           </p>
@@ -52,20 +49,21 @@
             No courses planned
           </p>
         </ng-container>
+        <span class="assistive-text">{{ assistiveText }}</span>
         <div
           cdkDrag
           [cdkDragData]="course"
           [cdkDragDisabled]="mobileView.matches"
+          (cdkDragStarted)="startDrag($event)"
           class="course-wrapper"
-          *ngFor="let course of plannedCourses"
-        >
+          *ngFor="let course of plannedCourses">
           <cse-course-item
+            draggable="true"
             role="button"
             aria-labelledby="planned-courses"
             type="course"
             [course]="course"
-            [era]="(term$ | async).era"
-          >
+            [era]="(term$ | async).era">
           </cse-course-item>
         </div>
       </div>
@@ -77,8 +75,7 @@
         mat-raised-button
         attr.aria-label="Add course to {{ termCode | getTermDescription }}"
         class="add-course-button"
-        (click)="openCourseSearch()"
-      >
+        (click)="openCourseSearch()">
         + Add Course
       </button>
     </div>
@@ -95,8 +92,7 @@
     <div
       fxLayout="row"
       class="term-header"
-      fxLayoutAlign="space-between center"
-    >
+      fxLayoutAlign="space-between center">
       <h3 tabindex="0" class="term-description">{{ termCode | getTermDescription }}</h3>
       <div fxLayout="row" fxLayoutAlign="space-between center">
         <p class="text-right semi-bold credits">
@@ -112,15 +108,13 @@
             mat-icon-button
             aria-label="Open dialog to edit note in this term"
             [disabled]="note.isLoaded === false"
-            (click)="openNotesDialog(note)"
-          >
+            (click)="openNotesDialog(note)">
             <mat-icon
               aria-label="Open dialog to edit note in this term"
               alt="Edit note"
               color="primary"
               matTooltip="Edit note"
-              matTooltipPosition="above"
-            >
+              matTooltipPosition="above">
               insert_drive_file
             </mat-icon>
           </button>
@@ -129,15 +123,13 @@
           <button
             mat-icon-button
             (click)="openNotesDialog()"
-            aria-label="Open dialog to add note in this term"
-          >
+            aria-label="Open dialog to add note in this term">
             <mat-icon
               aria-label="Open dialog to add note in this term"
               alt="Add note"
               color="primary"
               matTooltip="Add note"
-              matTooltipPosition="above"
-            >
+              matTooltipPosition="above">
               note_add
             </mat-icon>
           </button>
@@ -159,8 +151,8 @@
           <p class="note-excerpt">{{ note.text }}</p>
           <mat-progress-spinner
             mode="indeterminate"
-            diameter="24"
-          ></mat-progress-spinner>
+            diameter="24">
+          </mat-progress-spinner>
         </div>
       </ng-template>
     </ng-container>

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

@@ -58,6 +58,7 @@ export class TermContainerComponent implements OnInit, OnDestroy {
   public visibleCredits: 'enrolled' | 'planned';
   public courseNotOfferedInTerm: ReadonlyArray<Course>;
   public mobileView: MediaQueryList;
+  public assistiveText: string;
 
   constructor(
     public dialog: MatDialog,
@@ -137,7 +138,14 @@ export class TermContainerComponent implements OnInit, OnDestroy {
     }
   }
 
+  startDrag(event) {
+    this.assistiveText = `Dragging course ${
+      event.source.data.subjectDescription
+    } ${event.source.data.catalogNumber}`;
+  }
+
   drop(event: CdkDragDrop<TermCode>) {
+    this.assistiveText = '';
     const newContainer = event.container.id;
     const previousContainer = event.previousContainer.id;
     const { courseId } = event.item.data as Course;