aria implementation

src/app/degree-planner/course-search/course-search.component.html

@@ -47,6 +47,7 @@
         cdkFocusInitial
         id="keyword-field"
         matInput
+        aria-label="Keyword, number"
         placeholder="Keyword, number"
         formControlName="search"
         value=""/>

src/app/degree-planner/dialogs/modify-plan-dialog/modify-plan-dialog.component.html

@@ -28,6 +28,7 @@
           <input
             cdkFocusInitial
             matInput
+            aria-label="Plan name"
             placeholder="Name"
             formControlName="planName"
             cdkFocusInitial/>
@@ -41,6 +42,7 @@
           <input
             cdkFocusInitial
             matInput
+            aria-label="Plan name"
             placeholder="Name"
             formControlName="planName"
             cdkFocusInitial/>

src/app/degree-planner/dialogs/notes-dialog/notes-dialog.component.html

@@ -16,7 +16,6 @@
       >clear</i>
   </button>
 </mat-toolbar>
-
 <mat-dialog-content id="note-dialog" class="mat-typography dialog-with-toolbar">
   <div fxLayout="column" fxLayoutAlign="none" fxLayoutGap="10px">
     <div id="note-content">
@@ -28,11 +27,11 @@
             matInput
             mat-autosize="true"
             resizeToFitContent
+            aria-label="Note input"
             placeholder="i.e. Studying abroad">
           </textarea>
           <mat-hint align="start">
-            <strong
-              >Your note can be up to {{ MAX_LENGTH }} characters long</strong>
+           Note can be up to {{ MAX_LENGTH }} characters long
           </mat-hint>
           <mat-hint align="end" *ngIf="form.value.textarea?.length > 0">
             {{ form.value.textarea.length }} / {{ MAX_LENGTH }}
@@ -44,8 +43,8 @@
       <button
         mat-button
         class="btn-secondary"
-        mat-dialog-close
-        aria-label="Close note dialog">
+        aria-label="Cancel"
+        mat-dialog-close>
         Cancel
       </button>
       <button

src/app/degree-planner/dialogs/notes-dialog/notes-dialog.component.scss

@@ -3,6 +3,9 @@
   mat-form-field {
     display: block;
   }
+  .mat-dialog-content {
+    padding-bottom: 4px;
+  }
 }
 
 #delete-note-section {

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

@@ -15,7 +15,7 @@
       [cdkDragDisabled]="mobileView.matches"
       [cdkDragData]="course">
       <div class="course-wrapper-inner">
-        <cse-course-item [course]="course" type="saved" class="course-favorite"></cse-course-item>
+        <cse-course-item [course]="course" type="saved" class="course-favorite" aria-describedby="saved-courses"></cse-course-item>
       </div>
     </div>
 

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

@@ -94,7 +94,7 @@
               Course details
             </button>
             <button mat-menu-item [matMenuTriggerFor]="academicYearsGroup" aria-label="Select to move this course to a different term">
-              Move
+              Move to
             </button>
             <mat-menu #academicYearsGroup="matMenu" class="course-item-submenu">
                 <ng-template matMenuContent>
@@ -123,15 +123,14 @@
         </mat-menu>
       </div>
       <div *ngIf="disabled" fxLayout="row" fxLayoutAlign="end center">
-        <p>{{ course.grade || '&nbsp;' }}</p>
+        <p attr.aria-label="grade {{ course.grade }}">{{ course.grade || '&nbsp;' }}</p>
       </div>
       <div fxLayout="row" fxLayoutAlign="end center">
         <p *ngIf="type !== 'saved'"
           class="course-credits"
-          cdkFocusRegionEnd
-          aria-label="Total number of credits in term">
+          cdkFocusRegionEnd>
           <ng-container *ngIf="course.credits !== undefined || course.creditRange !== undefined">
-            {{ course.credits ? course.credits : course.creditRange }} Cr
+            <span attr.aria-label="{{ course.credits ? course.credits : course.creditRange }} credits">{{ course.credits ? course.credits : course.creditRange }} Cr</span>
           </ng-container>
         </p>
       </div>

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

@@ -57,8 +57,9 @@
       </mat-panel-title>
     </mat-expansion-panel-header>
     <div>
-      <button mat-button class="sidenav-link-btn" (click)="print()">
+      <button mat-button aria-label="Print degree plan" class="sidenav-link-btn" (click)="print()">
         <i
+          aria-hidden="true"
           class="material-icons"
           alt="Print plan"
           matTooltip="Print plan"
@@ -80,8 +81,9 @@
         </svg>
         Download PDF
       </a>
-      <button mat-button class="sidenav-link-btn" (click)="onCreatePlanClick()">
+      <button mat-button aria-label="Add degree plan" class="sidenav-link-btn" (click)="onCreatePlanClick()">
         <i
+          aria-hidden="true"
           class="material-icons"
           alt="Add degree plan"
           matTooltip="Add degree plan"
@@ -89,7 +91,7 @@
           >add_box</i>
         Add Degree Plan
       </button>
-      <button mat-button class="sidenav-link-btn" (click)="onAddAcademicYear()">
+      <button mat-button aria-label="Add academic year" class="sidenav-link-btn" (click)="onAddAcademicYear()">
         <svg
           aria-labelledby="addAcademicYearTitle addAcademicYearDesc"
           role="img"

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

-<ng-template #enrolled>
+<ng-template #enrolled id="enrolled-courses">
   <div class="course-list-wrapper">
     <div class="course-list">
       <div class="course-list-inner">
@@ -12,6 +12,7 @@
         </ng-container>
 
         <cse-course-item
+          aria-describedby="enrolled-courses"
           *ngFor="let course of enrolledCourses"
           type="course"
           [disabled]="true"
@@ -24,7 +25,7 @@
   </div>
 </ng-template>
 
-<ng-template #planned>
+<ng-template #planned id="planned-courses">
   <div class="course-list-wrapper">
     <div
       class="course-list"
@@ -58,6 +59,7 @@
           *ngFor="let course of plannedCourses"
         >
           <cse-course-item
+            aria-describedby="planned-courses"
             type="course"
             [course]="course"
             [era]="(term$ | async).era"
@@ -71,6 +73,7 @@
     <div class="add-new-wrapper" *ngIf="(term$ | async).era !== 'past'">
       <button
         mat-raised-button
+        attr.aria-label="Add course to {{ termCode | getTermDescription }}"
         class="add-course-button"
         (click)="openCourseSearch()"
       >
@@ -92,13 +95,13 @@
       class="term-header"
       fxLayoutAlign="space-between center"
     >
-      <h2 tabindex="0" class="term-description">{{ termCode | getTermDescription }}</h2>
+      <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'">
+          <span *ngIf="visibleCredits === 'planned'" attr.aria-label="{{ plannedCredits }} credits">
             {{ plannedCredits }} Cr
           </span>
-          <span *ngIf="visibleCredits === 'enrolled'">
+          <span *ngIf="visibleCredits === 'enrolled'" attr.aria-label="{{ enrolledCredits }} credits">
             {{ enrolledCredits }} Cr
           </span>
         </p>
@@ -164,10 +167,10 @@
   <!-- If this term is an active term -->
   <ng-container *ngIf="(term$ | async).era === 'active'">
     <mat-tab-group (selectedTabChange)="changeVisibleCredits($event)" [selectedIndex]="0">
-      <mat-tab [label]="'In Progress (' + enrolledCourses.length + ')'">
+      <mat-tab [label]="'In Progress (' + enrolledCourses.length + ')'" aria-label="In progress courses">
         <ng-container cdkFocusinitial *ngTemplateOutlet="enrolled"></ng-container>
       </mat-tab>
-      <mat-tab [label]="'Cart (' + plannedCourses.length + ')'">
+      <mat-tab [label]="'Cart (' + plannedCourses.length + ')'" aria-label="Cart courses">
         <ng-container cdkFocusinitial *ngTemplateOutlet="planned"></ng-container>
       </mat-tab>
     </mat-tab-group>
@@ -176,10 +179,10 @@
   <!-- If this term is a past term -->
   <ng-container *ngIf="(term$ | async).era === 'past'">
     <mat-tab-group (selectedTabChange)="changeVisibleCredits($event)" [selectedIndex]="0">
-      <mat-tab [label]="'Completed (' + enrolledCourses.length + ')'">
+      <mat-tab [label]="'Completed (' + enrolledCourses.length + ')'" aria-label="Completed courses">
         <ng-container cdkFocusinitial *ngTemplateOutlet="enrolled"></ng-container>
       </mat-tab>
-      <mat-tab [label]="'Cart (' + plannedCourses.length + ')'">
+      <mat-tab [label]="'Cart (' + plannedCourses.length + ')'" aria-label="Cart courses">
         <ng-container cdkFocusinitial *ngTemplateOutlet="planned"></ng-container>
       </mat-tab>
     </mat-tab-group>

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

@@ -5,7 +5,7 @@
   (closed)="collapseYear()">
   <mat-expansion-panel-header>
     <mat-panel-title>
-      {{ yearCode | academicYearState }}
+      <h2>{{ yearCode | academicYearState }}</h2>
     </mat-panel-title>
   </mat-expansion-panel-header>
   <div

src/app/shared/dialogs/prompt-dialog/prompt-dialog.component.html

@@ -33,6 +33,7 @@
           matInput
           mat-autosize="true"
           resizeToFitContent
+          aria-label="Input text"
           [placeholder]="inputName"/>
         <mat-hint align="end" *ngIf="maxLength">
           {{ inputForm.value.value.length }} / {{ maxLength }}

src/assets/sass/general.scss

@@ -124,6 +124,24 @@ body {
   outline: -webkit-focus-ring-color auto 5px;
 }
 
+.mat-hint {
+  font-size: 14px;
+}
+
+.mat-form-field.mat-form-field-invalid {
+  .mat-form-field-ripple {
+    background-color: #0479a8 !important;
+  }
+  .mat-form-field-label {
+    color: #0479a8;
+  }
+}
+
+.mat-warn .mat-input-element,
+.mat-form-field-invalid .mat-input-element {
+  caret-color: #0479a8;
+}
+
 .mat-icon,
 .mat-icon-button,
 .material-icons,
@@ -173,11 +191,15 @@ body {
 }
 
 .mat-expansion-panel-header {
-  font-size: 18px;
   &:focus {
     outline: 2px solid #5e9ed6 !important;
     outline: -webkit-focus-ring-color auto 5px !important;
   }
+  h2 {
+    font-size: 18px;
+    font-weight: 400;
+    margin: 0px;
+  }
 }
 
 // Menus styles