diff --git a/src/app/degree-planner/shared/course-item/course-item.component.html b/src/app/degree-planner/shared/course-item/course-item.component.html index adb04d6c683d0414ac2bdfedf3d731e630be730a..8a7430e917ac739d789a328f775244b927e30105 100644 --- a/src/app/degree-planner/shared/course-item/course-item.component.html +++ b/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> diff --git a/src/app/degree-planner/term-container/term-container.component.html b/src/app/degree-planner/term-container/term-container.component.html index 25d367217290b5275720fc38dbdf6a3d40bc581f..1e609fd2b95edfa77b19fabbd99d7d60e899ffe0 100644 --- a/src/app/degree-planner/term-container/term-container.component.html +++ b/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> diff --git a/src/app/degree-planner/term-container/term-container.component.ts b/src/app/degree-planner/term-container/term-container.component.ts index 269b2502f175489b64b5c368be9f6f02f2f49dd9..4c656fff59f4efc7e5a76500c84e446f55fc82bf 100644 --- a/src/app/degree-planner/term-container/term-container.component.ts +++ b/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;